这篇文章主要介绍了浅谈使用 MVC 模式进行 JavaScript 程序开发, 同时也介绍了一些 JavaScript 的 MVC 框架, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
随着前台开发日益受到重视,客户端代码比重日益增加的今天,如何在 javascript 开发里应用 MVC 模式,这个问题似乎会一直被提到,所以偶在这里粗略的谈一下自己的看法吧。
MVC 模式的基本理念,是通过把一个 application 封装成 model, view 和 controller 三个部分达到降低耦合,简化开发的目的。这么说很空洞,大家可以实际看个例子:
- <select id="selAnimal">
- <option value="cat">
- cat
- </option>
- <option value="fish">
- fish
- </option>
- <option value="bird">
- bird
- </option>
- </select>
- <p id="whatDoesThisAnimalDo">
- </p>
- <script type="text/javascript">
- document.getElementById('selAnimal').onchange = function() {
- var thisAnimalDoes;
- switch (this.value) {
- case 'cat':
- thisAnimalDoes = "cat meows";
- break;
- case 'fish':
- thisAnimalDoes = "fish swims";
- break;
- case 'bird':
- thisAnimalDoes = "bird flies";
- break;
- default:
- thisAnimalDoes = "wuff?";
- }
- document.getElementById('whatDoesThisAnimalDo').innerhtml = thisAnimalDoes;
- }
- </script>
这个小程序会把你从下拉菜单 "selAnimal" 中选择的动物能做什么事回显到网页上。以上是没有应用任何设计模式和编成思想写出的代码。如果要在这里应用 MVC 模式,代码又会变成怎样的呢?
- <select id="selAnimal">
- <option value="cat">
- cat
- </option>
- <option value="fish">
- fish
- </option>
- <option value="bird">
- bird
- </option>
- </select>
- <p id="whatDoesThisAnimalDo">
- </p>
- <script type="text/javascript">
- // whatDoesAnimalDo 就是一个controller
- var whatDoesAnimalDo = {
- // 选择视图
- start: function() {
- this.view.start();
- },
- // 将用户的操作映射到模型的更新上
- set: function(animalName) {
- this.model.setAnimal(animalName);
- },
- };
- // whatDoesAnimalDo的数据model
- whatDoesAnimalDo.model = {
- // animal的数据
- animalDictionary: {
- cat: "meows",
- fish: "swims",
- bird: "flies"
- },
- // 当前的animal,也就是这个application的状态
- currentAnimal: null,
- // 数据模型负责业务逻辑和数据存储
- setAnimal: function(animalName) {
- this.currentAnimal = this.animalDictionary[animalName] ? animalName: null;
- this.onchange();
- },
- // 并且通知视图更新显示
- onchange: function() {
- whatDoesAnimalDo.view.update();
- },
- // 还需要响应视图对当前状态的查询
- getAnimalAction: function() {
- return this.currentAnimal ? this.currentAnimal + " " + this.animalDictionary[this.currentAnimal] : "wuff?";
- }
- };
- // whatDoesAnimalDo的视图
- whatDoesAnimalDo.view = {
- // 用户输入触发onchange事件
- start: function() {
- document.getElementById('selAnimal').onchange = this.onchange;
- },
- // 该事件将用户请求发送给控制器
- onchange: function() {
- whatDoesAnimalDo.set(document.getElementById('selAnimal').value);
- },
- // 视图更新显示的方法,其中视图会向model查询当前的状态,并将其显示给用户
- update: function() {
- document.getElementById('whatDoesThisAnimalDo').innerHTML = whatDoesAnimalDo.model.getAnimalAction();
- }
- };
- whatDoesAnimalDo.start();
- </script>
…… 突然一下代码变得好夸张 e....
——偶都还没有在里面实现观察者模式呢...
实在太不良好了。
这样就带出了 MVC 模式最大的诟病:在简单的系统中应用 MVC 模式,会增加结构的复杂性,并且降低效率。
所以偶觉得除了少数 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 sheet
Controller: EMAScripts 等等脚本
这不正是 web 标准的最终目的么....
所以,把握好整个前端代码的结构,永远比在 javascript 开发中过量应用设计模重要的多!
不过,也有一些优秀的 MVC 框架,对此西雅图的一位黑客和设计师 Gordon L. Hempton 做了一下对比,这里我们拉过来看一下:
1. {aa11aa}——优点:强大的社区,强劲的势头;缺点:抽象较弱,很多功能亟待增加。
2. {aa10aa}——优点:对绑定的支持,可靠的社区,大量特性;缺点:过度规范,难以和不需要的特性解耦。
3. {aa9aa}——优点:易于学习,更容易和现存的服务端应用程序整合;缺点:过于简单,无法应用于大型应用程序中。
4. {aa8aa}——优点:轻量级,文档很完备;缺点:它的核心概念 "spine" 是异步的用户界面,这意味着理想状况用户界面永远不会发生堵塞,而这个基础有缺陷。
5. {aa7aa}——优点:大型深思熟虑后的框架,良好的社区,很棒的继承模型;缺点:由 iOS 开发者创建,使用 JavaScript 模拟 Objective-C。
6. {aa6aa}——优点:对绑定的支持,完备的文档和教程;缺点:绑定语法拙劣,缺少统一的视图组件层级关系。
7. {aa5aa}——优点:可靠的社区;缺点:基于字符串的继承模型很差,控制器与视图关系过密而缺少绑定。
8. {aa4aa}(Google Web Toolkit)——优点:全面的框架,良好的社区,可靠的基于 Java 的组件继承模型;缺点:可能无法经受时间的考验,另外,Java 在客户端上的抽象有些笨拙。
9. {aa3aa}——优点:很好的基于组件的 UI 组合系统。缺点:缺少 UI 绑定支持。
10. {aa2aa}——优点:很丰富的模板系统,拥有复合视图和 UI 绑定;缺点:相对较新,文档不够完备。
11. {aa1aa}——优点:对模板范围和控制器设计有很好的考虑,拥有依赖注入系统,支持丰富的 UI 绑定语法。缺点:代码的模块性不强,视图的模块化也不够。
12. {aa0aa}——优点:代码清晰,绑定、持久化的方法简单;缺点:使用了单例控制器。
来源: http://www.phperz.com/article/17/0223/268786.html