表现与数据分离：前台MVC

表现与数据分离：前台MVC2015-01-08 csdn博客青春张开无意间看到一个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>

我们重新看看上面的代码，很简单的逻辑，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还真他妈够劲！！