TGCode

关注互联网技术

稍微谈一下 javascript 开发中的 MVC 模式

2021年1月15日   |   by tgcode

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

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

1%title插图%numselectid=”selAnimal”>
2%title插图%numoptionvalue=”cat”>catoption>
3%title插图%numoptionvalue=”fish”>fishoption>
4%title插图%numoptionvalue=”bird”>birdoption>
5%title插图%numselect>
6%title插图%numpid=”whatDoesThisAnimalDo”>p>
7%title插图%num
8%title插图%num%title插图%numscripttype=”text/javascript”>%title插图%num
9%title插图%num%title插图%numdocument.getElementById(‘selAnimal‘).onchange=function()%title插图%num{
10%title插图%numvarthisAnimalDoes;
11%title插图%num%title插图%numswitch(this.value)%title插图%num{
12%title插图%numcase‘cat‘:
13%title插图%numthisAnimalDoes=“catmeows“;
14%title插图%numbreak;
15%title插图%numcase‘fish‘:
16%title插图%numthisAnimalDoes=“fishswims“;
17%title插图%numbreak;
18%title插图%numcase‘bird‘:
19%title插图%numthisAnimalDoes=“birdflies“;
20%title插图%numbreak;
21%title插图%numdefault:
22%title插图%numthisAnimalDoes=“wuff?“;
23%title插图%num}
24%title插图%numdocument.getElementById(‘whatDoesThisAnimalDo‘).innerHTML=thisAnimalDoes;
25%title插图%num}
26%title插图%numscript>

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

1%title插图%numselectid=”selAnimal”>
2%title插图%numoptionvalue=”cat”>catoption>
3%title插图%numoptionvalue=”fish”>fishoption>
4%title插图%numoptionvalue=”bird”>birdoption&gtgcodet;
5%title插图%numselect>
6%title插图%numpid=”whatDoesThisAnimalDo”>p>
7%title插图%num
8%title插图%num%title插图%numscripttype=”text/javascript”>%title插图%num
9%title插图%num//whatDoesAnimalDo就是一个controller
10%title插图%num%title插图%numvarwhatDoesAnimalDo=%title插图%num{
11%title插图%num//选择视图
12%title插图%num%title插图%numstart:function()%title插图%num{
13%title插图%numthis.view.start();
14%title插图%num},
15%title插图%num//将用户的操作映射到模型的更新上
16%title插图%num%title插图%numset:function(animalName)%title插图%num{
17%title插图%numthis.model.setAnimal(animalName);
18%title插图%num},
19%title插图%num};
20%title插图%num//whatDoesAnimalDo的数据model
21%title插图%num%title插图%numwhatDoesAnimalDo.model=%title插图%num{
22%title插图%num//animal的数据
23%title插图%num%title插图%numanimalDictionary:%title插图%num{
24%title插图%numcat:“meows“,
25%title插图%numfish:“swims“,
26%title插图%numbird:“flies“
27%title插图%num},
28%title插图%num//当前的animal，也就是这个application的状态
29%title插图%numcurrentAnimal:null,
30%title插图%num//数据模型负责业务逻辑和数据存储
31%title插图%num%title插图%numsetAnimal:function(animalName)%title插图%num{
32%title插图%numthis.currentAnimal=this.animalDictionary[animalName]?animalName:null;
33%title插图%numthis.onchange();
34%title插图%num},
35%title插图%num//并且通知视图更新显示
36%title插图%num%title插图%numonchange:function()%title插图%num{
37%title插图%numwhatDoesAnimalDo.view.update();
38%title插图%num},
39%title插图%num//还需要响应视图对当前状态的查询
40%title插图%num%title插图%numgetAnimalAction:function()%title插图%num{
41%title插图%numreturnthis.currentAnimal?this.currentAnimal+““+this.animalDictionary[this.currentAnimal]:“wuff?“;
42%title插图%num}
43%title插图%num};
44%title插图%num//whatDoesAnimalDo的视图
45%title插图%num%title插图%numwhatDoesAnimalDo.view=%title插图%num{
46%title插图%num//用户输入触发onchange事件
47%title插图%num%title插图%numstart:function()%title插图%num{
48%title插图%numdocument.getElementById(‘selAnimal‘).onchange=this.onchange;
49%title插图%num},
50%title插图%num//该事件将用户请求发送给控制器
51%title插图%num%title插图%numonchange:function()%title插图%num{
52%title插图%numwhatDoesAnimalDo.set(document.getElementById(‘selAnimal‘).value);
5tgcode3%title插图%num},
54%title插图%num//视图更新显示的方法，其中视图会向model查询当前的状态，并将其显示给用户
55%title插图%num%title插图%numupdate:function()%title插图%num{
56%title插图%numdocument.getElementById(‘whatDoesThisAnimalDo‘).innerHTML=whatDoesAnimalDo.model.getAnimalAction();
57%title插图%num}
58%title插图%num};
59%title插图%numwhatDoesAnimalDo.start();
60%title插图%numscript>

……突然一下代码变得好夸张e %title插图%num

——偶都还没有在里面实现观察者模式呢 %title插图%num

实在太不良好了。

这样就带出了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的闭包特性，一不小心就搞出
内存泄漏，这可是正宗的偷鸡不成蚀把米了 %title插图%num

所以，对于javascript开发，适度开发可能比应用你所学到的学术知识更重要，毕竟前端开发是以解决实际问题为基础，而不是为了炫技。当然，Dflying gg有句话叫“重构无处不在”——如果你觉得你自己的代码越来越乱，维护起来越来越困难，那么，你就该考虑是不是该用MVC重构一下了~

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

  • Model: HTML/XHTML中的信息
  • View: Style sheet
  • Controller: EMAScripts等等脚本

这不正是web标准的最终目的么 %title插图%num

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

相关推荐: 浅谈JavaScript编程语言的编码规范

　　注：本文转载自 developerworks 　　作者：王丹丹，高级软件工程师，IBM 　　简介： JavaScript 编程语言作为最流行的客户端脚本语言，早已被众多 Web 开发人员所熟悉。随着 Web2.0 时代的到来和 Ajax 技术的广泛应用，J…

Tags: , , , ,