UDN-企业互联网技术人气社区

板块导航

浏览  : 599
回复  : 4

[原生js] 浅谈使用MVC模式进行JavaScript程序开发

[复制链接]
猩红女神的头像 楼主
发表于 2015-12-9 18:09:11 | 显示全部楼层 |阅读模式
  随着前台开发日益受到重视,客户端代码比重日益增加的今天,如何在JavaScript开发里应用MVC模式,这个问题似乎会一直被提到,所以偶在这里粗略的谈一下自己的看法吧。

  MVC模式的基本理念,是通过把一个application封装成model, view和controller三个部分达到降低耦合,简化开发的目的。这么说很空洞,大家可以实际看个例子:
  1. <select id="selAnimal">
  2.   <option value="cat">cat</option>
  3.   <option value="fish">fish</option>
  4.   <option value="bird">bird</option>
  5. </select>
  6. <p id="whatDoesThisAnimalDo"></p>

  7. <script type="text/JavaScript">
  8. document.getElementById('selAnimal').onchange = function() {
  9.   var thisAnimalDoes;
  10.   switch ( this.value ) {
  11.     case 'cat':
  12.       thisAnimalDoes = "cat meows";
  13.       break;
  14.     case 'fish':
  15.       thisAnimalDoes = "fish swims";
  16.       break;
  17.     case 'bird':
  18.       thisAnimalDoes = "bird flies";
  19.       break;
  20.     default:
  21.       thisAnimalDoes = "wuff?";
  22.   }
  23.   document.getElementById('whatDoesThisAnimalDo').innerHTML = thisAnimalDoes;
  24. }
  25. </script>
复制代码

  这个小程序会把你从下拉菜单"selAnimal"中选择的动物能做什么事回显到网页上。以上是没有应用任何设计模式和编成思想写出的代码。如果要在这里应用MVC模式,代码又会变成怎样的呢?
  1. <select id="selAnimal">
  2.   <option value="cat">cat</option>
  3.   <option value="fish">fish</option>
  4.   <option value="bird">bird</option>
  5. </select>
  6. <p id="whatDoesThisAnimalDo"></p>

  7. <script type="text/JavaScript">
  8. // whatDoesAnimalDo 就是一个controller
  9. var whatDoesAnimalDo = {
  10.   // 选择视图
  11.   start: function() {
  12.     this.view.start();
  13.   },
  14.   // 将用户的操作映射到模型的更新上
  15.   set: function(animalName) {
  16.     this.model.setAnimal(animalName);
  17.   },
  18. };
  19. // whatDoesAnimalDo的数据model
  20. whatDoesAnimalDo.model = {
  21.   // animal的数据
  22.   animalDictionary: {
  23.     cat: "meows",
  24.     fish: "swims",
  25.     bird: "flies"
  26.   },
  27.   // 当前的animal,也就是这个application的状态
  28.   currentAnimal: null,
  29.   // 数据模型负责业务逻辑和数据存储
  30.   setAnimal: function(animalName) {
  31.     this.currentAnimal = this.animalDictionary[animalName] ? animalName : null;
  32.     this.onchange();
  33.   },
  34.   // 并且通知视图更新显示
  35.   onchange: function() {
  36.     whatDoesAnimalDo.view.update();
  37.   },
  38.   // 还需要响应视图对当前状态的查询
  39.   getAnimalAction: function() {
  40.     return this.currentAnimal ? this.currentAnimal + " " + this.animalDictionary[this.currentAnimal] : "wuff?";
  41.   }
  42. };
  43. // whatDoesAnimalDo的视图
  44. whatDoesAnimalDo.view = {
  45.   // 用户输入触发onchange事件
  46.   start: function() {
  47.     document.getElementById('selAnimal').onchange = this.onchange;
  48.   },
  49.   // 该事件将用户请求发送给控制器
  50.   onchange: function() {
  51.     whatDoesAnimalDo.set(document.getElementById('selAnimal').value);
  52.   },
  53.   // 视图更新显示的方法,其中视图会向model查询当前的状态,并将其显示给用户
  54.   update: function() {
  55.     document.getElementById('whatDoesThisAnimalDo').innerHTML = whatDoesAnimalDo.model.getAnimalAction();
  56.   }
  57. };
  58. whatDoesAnimalDo.start();
  59. </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. 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绑定支持。

  10. Ember.js——优点:很丰富的模板系统,拥有复合视图和UI绑定;缺点:相对较新,文档不够完备。

  11. Angular.js——优点:对模板范围和控制器设计有很好的考虑,拥有依赖注入系统,支持丰富的UI绑定语法。缺点:代码的模块性不强,视图的模块化也不够。

  12. Batman.js——优点:代码清晰,绑定、持久化的方法简单;缺点:使用了单例控制器。
发表于 2015-12-9 18:09:45 | 显示全部楼层
JavaScript依赖于浏览器本身,与操作环境无关,只要计算机能运行浏览器,并支持JavaScript的浏览器,就可正确执行,从而实现了“编写一次,走遍天下”的梦想。
使用道具 举报

回复

发表于 2015-12-10 04:04:54 | 显示全部楼层
我是被标题吸引进来的
使用道具 举报

回复

发表于 2015-12-10 09:49:43 | 显示全部楼层
总觉得你用MVC模式说js开发有点不着调的感觉,MVC中的V就是视图,基本上就是说前段如何显示的问题,这基本上就是js的工作。
使用道具 举报

回复

发表于 2017-8-29 11:17:34 | 显示全部楼层
MVC开发模式是比较普遍的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部