浅谈使用MVC模式进行JavaScript程序开发(使用mvc模式设计的web应用程序)

编辑：rootadmin

推荐整理分享浅谈使用MVC模式进行JavaScript程序开发(使用mvc模式设计的web应用程序)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:浅谈使用mvc模式的意义,浅谈使用mvc模式的意义,浅谈使用mvc模式的利弊,使用mvc模式有什么优点,mvc模式作用,浅谈使用mvc模式的优缺点,浅谈使用mvc模式的优缺点,浅谈使用mvc模式的优缺点,内容如对您有帮助，希望把文章链接给更多的朋友！

随着前台开发日益受到重视，客户端代码比重日益增加的今天，如何在javascript开发里应用MVC模式，这个问题似乎会一直被提到，所以偶在这里粗略的谈一下自己的看法吧。

MVC模式的基本理念，是通过把一个application封装成model, view和controller三个部分达到降低耦合，简化开发的目的。这么说很空洞，大家可以实际看个例子：

这个小程序会把你从下拉菜单"selAnimal"中选择的动物能做什么事回显到网页上。以上是没有应用任何设计模式和编成思想写出的代码。如果要在这里应用MVC模式，代码又会变成怎样的呢？

……突然一下代码变得好夸张e....——偶都还没有在里面实现观察者模式呢...实在太不良好了。

这样就带出了MVC模式最大的诟病：在简单的系统中应用MVC模式，会增加结构的复杂性，并且降低效率。

浅谈使用MVC模式进行JavaScript程序开发(使用mvc模式设计的web应用程序)

所以偶觉得除了少数javascript控件，比如click-anywhere-to-edit datagrid/tree control, 或者FckEditor/tinyMCE这样的支持自定义plugin的富文本编辑器非常适合应用MVC之外，在大多数的实用B/S系统中，javascript开发只要遵循工厂模式就足够让你受益匪浅了。这是由于前端开发和后段开发的性质不同引起的。如果在ASP.net或者JSP项目中应用MVC模式，SDK或多或少会自动生成一些view和controller的代码。但是javascript呢——javascript甚至连个好用的SDK都没有，虽然有不少成熟的framework，但最终还是会大大增加开发量。

与开发量相比，更加令人头疼的是效率的问题。三层之间的相互通信都是额外的开销。对于服务器端，这些通信造成的开销几乎可以忽略不计。但对于javascript这样相对低效率的语言，多几重调用和事件侦听就能明显感觉到性能的下降了。而且，因为javascrip的闭包特性，一不小心就搞出内存泄漏，这可是正宗的偷鸡不成蚀把米了...所以，对于javascript开发，适度开发可能比应用你所学到的学术知识更重要，毕竟前端开发是以解决实际问题为基础，而不是为了炫技。当然，Dflying gg有句话叫“重构无处不在”——如果你觉得你自己的代码越来越乱，维护起来越来越困难，那么，你就该考虑是不是该用MVC重构一下了~

再额外的说一句：是不是整个前端开发就不必使用MVC了呢？no no~ 其实整个前端开发就是一个大大的MVC架构啊——

Model: HTML/XHTML中的信息View: Style sheetController: EMAScripts等等脚本这不正是web标准的最终目的么....

所以，把握好整个前端代码的结构，永远比在javascript开发中过量应用设计模重要的多！

不过，也有一些优秀的MVC框架，对此西雅图的一位黑客和设计师Gordon L. Hempton做了一下对比，这里我们拉过来看一下：

1. Backbone.js——优点：强大的社区，强劲的势头；缺点：抽象较弱，很多功能亟待增加。2. SproutCore——优点：对绑定的支持，可靠的社区，大量特性；缺点：过度规范，难以和不需要的特性解耦。3. Sammy.js——优点：易于学习，更容易和现存的服务端应用程序整合；缺点：过于简单，无法应用于大型应用程序中。4. Spine.js——优点：轻量级，文档很完备；缺点：它的核心概念“spine”是异步的用户界面，这意味着理想状况用户界面永远不会发生堵塞，而这个基础有缺陷。5. Cappuccino——优点：大型深思熟虑后的框架，良好的社区，很棒的继承模型；缺点：由iOS开发者创建，使用JavaScript模拟Objective-C。6. Knockout.js——优点：对绑定的支持，完备的文档和教程；缺点：绑定语法拙劣，缺少统一的视图组件层级关系。7. Javascript MVC——优点：可靠的社区；缺点：基于字符串的继承模型很差，控制器与视图关系过密而缺少绑定。8. GWT（Google Web Toolkit）——优点：全面的框架，良好的社区，可靠的基于Java的组件继承模型；缺点：可能无法经受时间的考验，另外，Java在客户端上的抽象有些笨拙。9. Google Closure——优点：很好的基于组件的UI组合系统。缺点：缺少UI绑定支持。. Ember.js——优点：很丰富的模板系统，拥有复合视图和UI绑定；缺点：相对较新，文档不够完备。. Angular.js——优点：对模板范围和控制器设计有很好的考虑，拥有依赖注入系统，支持丰富的UI绑定语法。缺点：代码的模块性不强，视图的模块化也不够。. Batman.js——优点：代码清晰，绑定、持久化的方法简单；缺点：使用了单例控制器。

详解 javascript中offsetleft属性的用法此属性可以返回当前元素距离某个父辈元素左边缘的距离，当然这个父辈元素也是有讲究的。（1）.如果父辈元素中有定位的元素，那么就返回距离当前

谈谈对offsetleft兼容性的理解关于此属性的基本用法可以参阅offsetleft属性用法详解一章节。此属性具有一定的兼容性问题，那就是在IE7浏览器中，它的返回值是想对于最近的父辈元

轻松实现javascript数据双向绑定双向数据绑定指的是当对象的属性发生变化时能够同时改变对应的UI，反之亦然。换句话说，如果我们有一个user对象，这个对象有一个name属性，无论何