因为最初20天的慌乱处理，加之随后两轮的迭代，我已经在订单填写页中买下了太多坑，而且网页中随处可见的dom操作让代码可维护程度大大降低，而点击某一按钮而导致的连锁变化经常发生，比如，用户增减购买商品数量时：

① 会改变本身商品数量的展示

② 会根据当前条件去刷新优惠卷使用数据

③ 改变支付条上的最终总额

④ ......

于是这次迭代后，你会发现订单填写页尼玛经常出BUG，每次改了又会有地方出BUG，一段时间不在，同事帮助修复了一个BUG，又引起了其它三个BUG，这个时候迎来了第四轮迭代，而这种种迹象表明：

如果一个页面开始频繁的出BUG，如果一个页面逻辑越来越复杂，如果一个页面的代码你觉得不好维护了，那么意味着，他应该得到应有的重构了！

前端的MVC 不太MVC的做法

如果在你的页面（会长久维护的项目）中有以下情况的话，也许你应该重构你的页面或者换掉你框架了：

① 在js中大规模的拼接HTML，比如这样：

1 for (i = 0; i < len; i++) { 2 for (key in data[i]) { 3 item = data[i][key]; 4 len2 = item.length; 5 if (len2 === 0) continue; 6 str += '<h2>' + key + '</h2>'; 7 str += '<ul>'; 8 for (j = 0; j < len2; j++) { 9 str += '<li data-type="' + item[j].type + '" data-city="' + item[j].regionid + '">' + item[j].cnname + '</li>'; 10 } 11 str += '</ul>'; 12 break; 13 } 14 if (str !== '') 15 html.push('<div>' + str + '</div>'); 16 str = ''; 17 }

对于这个情况，你应该使用前端模板引擎

② 在js中出现大规模的获取非文本框元素的值

③ 在html页面中看到了大规模的数据钩子，比如这个样子：

④ 你在js中发现，一个数据由js变量可获取，也可以由dom获取，并你对从哪获取数据犹豫不决

⑤ 在你的页面中，click事件分散到一个页面的各个地方

⑥ 当你的js文件超过1000行，并且你觉得没法拆分

以上种种迹象表明，哟！这个页面好像要被玩坏了，好像可以用MVC的思想重构一下啦！

什么是MVC

其实MVC这个东西有点悬，一般人压根都不知道他是干嘛的，就知道一个model-view-controller；

知道一点的又说不清楚；

真正懂的人要么喜欢东扯西扯，要么不愿意写博客或者博客一来便很难，曲高和寡。

所以前端MVC这个东西一直是一个玄之又玄的东西，很多开发了很久的朋友都不能了解什么是MVC。

今天我作为一个自认为懂得一点的人，便来说一说我对MVC在前端的认识，希望对大家有帮助。

前端给大家的认识便是页面，页面由HTML+CSS实现，如果有交互便需要JS的介入，其中：

对于真实的业务来说，HTML&CSS是零件，JS是搬运工，数据是设计图与指令。 JS要根据数据指令将零件组装为玩具，用户操作了玩具导致了数据变化，于是JS又根据数据指令重新组装玩具 我们事实上不写代码，我们只是数据的搬运工

上述例子可能不一定准确，但他可以表达一些中心思想，那就是：

对于页面来说，要展示的只是数据

所以，数据才是我们应该关注的核心，这里回到我们MVC的基本概念：

MVC即Model-View-Controller三个词的缩写

Model

是数据模型，是客观事物的一种抽象，比如机票订单填写的常用联系人模块便可以抽象为一个Model类，他会有一次航班最多可选择多少联系人这种被当前业务限制的属性，并且会有增减联系人、获取联系人、获取最大可设置联系人等业务数据。

Model应该是一个比较稳定的模块，不会经常变化并且可被重用的模块；当然最重要的是，每一次数据变化便会有一个通知机制，通知所有的controller对数据变化做出响应

View

View就是视图，在前端中甚至可简单理解为html模板，Controller会根据数据组装为最终的html字符串，然后展示给我们，至于怎么展示是CSS的事情，我们这里不太关注。

PS：一般来说，过于复杂的if else流程判断，不应该出现在view中，那是controller该做的事情