表现与数据分离；前台MVC

无意间看到一个web前端招聘要求：表现与数据分离

这名词对我非常陌生，我就去百度了下

由于有各种莫名其妙的需求，所以才会出现我们前端MVC这样的莫名其妙的东西。。。

我们的html就是model，我们的css就是view。我们的js就是controller。

话不多说，先上一段代码（原来的代码，抄过来的）：

 2 <head>
 3     <title></title>
 4     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(document).ready(function () {
 7             var end = $('#end');
 8             $('#pili').change(function () {
 9                 var name = '';
10                 var p = $(this).val();
11                 if (p == '叶小钗') {
12                     name = '刀狂剑痴';
13                 }
14                 if (p == '一页书') {
15                     name = '百世经纶';
16                 }
17                 if (p == '素还真') {
18                     name = '清香白莲';
19                 }
20 
21                 end.html(name + p);
22             });
23         });
24     </script>
25 </head>
26 <body>
27     <select id="pili">
28         <option value="叶小钗">叶小钗</option>
29         <option value="一页书">一页书</option>
30         <option value="素还真">素还真</option>
31     </select>
32     <div id="end"></div>
33 </body>
34 </html>

我们又一次看看上面的代码。非常easy的逻辑。select改变后变化end的值，好了如今需求发生改变：

① select变成使用input模拟select

② 在手机上还是使用select算了

③ 总会有莫名其妙的需求，这个就是

好吧。如今的代码你该怎么写呢？是不是会写几个代码，或者你压根不知道怎么写呢？？？于是看看我们的MVC的实现吧

PS：代码是我可耻的抄的。。。。但我但是自豪的一个字一个字的敲的哦，窃知识不算偷......

 2 <head>
 3     <title></title>
 4     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(document).ready(function () {
 7             //定义一个controller
 8             var piliController = {
 9                 //选择视图
10                 start: function () {
11                     this.view.start();
12                 },
13                 //将用户操作映射到模型更新上
14                 set: function (name) {
15                     this.model.setPerson(name);
16                 }
17             };
18             piliController.model = {
19                 piliKV: {
20                     '叶小钗': '刀狂剑痴',
21                     '一页书': '百世经纶',
22                     '素还真': '清香白莲'
23                 },
24                 curPerson: null,
25                 //数据模型负责业务逻辑和数据存储
26                 setPerson: function (name) {
27                     this.curPerson = this.piliKV[name] ?
 name : null;
28                     this.onchange();
29                 },
30                 //通知数据同步更新
31                 onchange: function () {
32                     piliController.view.update();
33                 },
34                 //对应视图对当前状态的查询
35                 getPiliAction: function () {
36                     return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???';
37                 }
38             };
39             piliController.view = {
40                 //用户触发change事件
41                 start: function () {
42                     $('#pili').change(this.onchange);
43                 },
44                 onchange: function () {
45                     piliController.set($('#pili').val());
46                 },
47                 update: function () {
48                     $('#end').html(piliController.model.getPiliAction());
49                 }
50             };
51             piliController.start();
52         });
53     </script>
54 </head>
55 <body>
56     <select id="pili">
57      <option value="叶小钗">叶小钗</option>
58         <option value="一页书">一页书</option>
59         <option value="素还真">素还真</option>
60     </select>
61     <div id="end"></div>
62 </body>
63 </html>

我们来看看这个神一样的代码。。。。我们一開始会觉得他有这些问题：

① 代码维护困难。至少我觉得非常困难

② 徒增复杂性。性能会有问题

③ 我并不能说服自己说自己懂了。

。。。

于是我们就放弃了MVC啦，可是我们回过头来好好审视下他，我们会发现不一样的东西：

① 我们好像就在view中使用了选择器获取dom，其他地方压根不认识dom这个丫的。

② 我们的数据似乎在model中，我们能够任意改变。可是并不会影响到我们dom

③ view和model是全然独立的。我们的controller恰好把他们串联起来了

看着这奇妙的魔法，我似懂非懂的点了点头。你妹的MVC还真他妈够劲！

！