稍微谈一下 javascript 开发中的 MVC 模式
随着前台开发日益受到重视,客户端代码比重日益增加的今天,如何在javascript开发里应用MVC模式,这个问题似乎会一直被提到,所以偶在这里粗略的谈一下自己的看法吧。
MVC模式的基本理念,是通过把一个application封装成model, view和controller三个部分达到降低耦合,简化开发的目的。这么说很空洞,大家可以实际看个例子:
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
8<script type="text/javascript">
9document.getElementById('selAnimal').onchange = function() {
10 var thisAnimalDoes;
11 switch ( this.value ) {
12 case 'cat':
13 thisAnimalDoes = "cat meows";
14 break;
15 case 'fish':
16 thisAnimalDoes = "fish swims";
17 break;
18 case 'bird':
19 thisAnimalDoes = "bird flies";
20 break;
21 default:
22 thisAnimalDoes = "wuff?";
23 }
24 document.getElementById('whatDoesThisAnimalDo').innerHTML = thisAnimalDoes;
25}
26</script>
这个小程序会把你从下拉菜单"selAnimal"中选择的动物能做什么事回显到网页上。以上是没有应用任何设计模式和编成思想写出的代码。如果要在这里应用MVC模式,代码又会变成怎样的呢?
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
8<script type="text/javascript">
9// whatDoesAnimalDo 就是一个controller
10var whatDoesAnimalDo = {
11 // 选择视图
12 start: function() {
13 this.view.start();
14 },
15 // 将用户的操作映射到模型的更新上
16 set: function(animalName) {
17 this.model.setAnimal(animalName);
18 },
19};
20// whatDoesAnimalDo的数据model
21whatDoesAnimalDo.model = {
22 // animal的数据
23 animalDictionary: {
24 cat: "meows",
25 fish: "swims",
26 bird: "flies"
27 },
28 // 当前的animal,也就是这个application的状态
29 currentAnimal: null,
30 // 数据模型负责业务逻辑和数据存储
31 setAnimal: function(animalName) {
32 this.currentAnimal = this.animalDictionary[animalName] ? animalName : null;
33 this.onchange();
34 },
35 // 并且通知视图更新显示
36 onchange: function() {
37 whatDoesAnimalDo.view.update();
38 },
39 // 还需要响应视图对当前状态的查询
40 getAnimalAction: function() {
41 return this.currentAnimal ? this.currentAnimal + " " + this.animalDictionary[this.currentAnimal] : "wuff?";
42 }
43};
44// whatDoesAnimalDo的视图
45whatDoesAnimalDo.view = {
46 // 用户输入触发onchange事件
47 start: function() {
48 document.getElementById('selAnimal').onchange = this.onchange;
49 },
50 // 该事件将用户请求发送给控制器
51 onchange: function() {
52 whatDoesAnimalDo.set(document.getElementById('selAnimal').value);
53 },
54 // 视图更新显示的方法,其中视图会向model查询当前的状态,并将其显示给用户
55 update: function() {
56 document.getElementById('whatDoesThisAnimalDo').innerHTML = whatDoesAnimalDo.model.getAnimalAction();
57 }
58};
59whatDoesAnimalDo.start();
60</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开发中过量应用设计模重要的多!
稍微谈一下 javascript 开发中的 MVC 模式的更多相关文章
- 二十七、EFW框架BS系统开发中的MVC模式探讨
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...
- 二十八、带给我们一种新的编码思路——EFW框架CS系统开发中的MVC模式探讨
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.3:http://pan.baidu.com/s/1c0dADO0 EFW框架实例源代码下载:http://p ...
- javascript开发中的封装模式(转)
var bgAuido={ audio : pingfan.$$('audio'), audioBtn : pingfan.$$('audioBtn'), init : function(){ var ...
- Web前端开发中的MCRV模式(转)
作者: izujian 来源: baiduux 摘要:针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为 基础,结 ...
- 生活中的MVC模式,一个吃货的理解。
以下是生活中对于MVC模式的领悟,虽然可笑,轻喷. 2015年 8月 26日 M => Model 模型 我认为叫做模具更好的理解.批量加工生产具有相同特征的东西. ...
- php中的MVC模式运用
[size=5][color=Red]php中的MVC模式运用[/color][/size] 首先我来举个例子: 一个简单的文章显示系统 简单期间,我们假定这个文章系统是只读的,也就是说这个例子将不涉 ...
- 浅析前端开发中的 MVC/MVP/MVVM 模式
MVC,MVP和MVVM都是常见的软件架构设计模式(Architectural Pattern),它通过分离关注点来改进代码的组织方式.不同于设计模式(Design Pattern),只是为了解决一类 ...
- 讨论Android开发中的MVC设计思想
最近闲着没事,总是想想做点什么.在时间空余之时给大家说说MVC设计思想在Android开发中的运用吧! MVC设计思想在Android开发中一直都是一套比较好的设计思想.很多APP的设计都是使用这套方 ...
- 前端开发中的 MVC、MVP、MVVM 模式
MVC,MVP和MVVM都是常见的软件架构设计模式(Architectural Pattern),它通过分离关注点来改进代码的组织方式.不同于设计模式(Design Pattern),只是为了解决一类 ...
随机推荐
- C++语言中数组指针和指针数组彻底分析
################################# ## 基本知识 ## ...
- HDU 1535 SPFA 前向星存图优化
Invitation Cards Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- DOM基本代码一
dom学习基本代码第一部分 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- POJ 2289 最大流
Jamie's Contact Groups Time Limit: 7000MS Memory Limit: 65536K Total Submissions: 7624 Accepted: ...
- HDU1540 区间合并
Tunnel Warfare Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo
1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...
- Base class does not contain a constructor that takes '0' argument
刚刚在写一段直播室网站中的一段程序遇,突然遇到一个错误,如下 'TVLLKBLL.BaseClass' does not contain a constructor that takes 0 argu ...
- JAVA有关命名规范
包名: xxxyyyzzz 全小写 类名/接口名:XxxYyyZzz 所有单词首字母大写,其他小写 方法名: xxxYyyZzz第一个单词首字母小写,其他单词首字母大写 ...
- java线程的常用方法和属性介绍
start() start方法是Thread 类的方法,在这个方法中会调用native方法(start0())来启动线程,为该线程分配资源. sleep() sleep方法有2个方法. public ...
- 2015/9/4 Python基础(8):映射和集合类型
Python里唯一的映射类型是字典.映射类型对象里,hash值(key)和指向的对象(值)是一对多的关系.字典对象是可变的,这一点上很像列表,它也可以存储任意个数任意类型的Python对象,其中包括容 ...