无意间看到一个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>
![复制代码](https://common.cnblogs.com/images/copycode.gif)
我们又一次看看上面的代码。非常easy的逻辑。select改变后变化end的值,好了如今需求发生改变:
① select变成使用input模拟select
② 在手机上还是使用select算了
③ 总会有莫名其妙的需求,这个就是
好吧。如今的代码你该怎么写呢?是不是会写几个代码,或者你压根不知道怎么写呢???于是看看我们的MVC的实现吧
PS:代码是我可耻的抄的。。。。但我但是自豪的一个字一个字的敲的哦,窃知识不算偷......
![复制代码](https://common.cnblogs.com/images/copycode.gif)
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>
![复制代码](https://common.cnblogs.com/images/copycode.gif)
我们来看看这个神一样的代码。。。。我们一開始会觉得他有这些问题:
① 代码维护困难。至少我觉得非常困难
② 徒增复杂性。性能会有问题
③ 我并不能说服自己说自己懂了。
。。。
于是我们就放弃了MVC啦,可是我们回过头来好好审视下他,我们会发现不一样的东西:
① 我们好像就在view中使用了选择器获取dom,其他地方压根不认识dom这个丫的。
② 我们的数据似乎在model中,我们能够任意改变。可是并不会影响到我们dom
③ view和model是全然独立的。我们的controller恰好把他们串联起来了
看着这奇妙的魔法,我似懂非懂的点了点头。你妹的MVC还真他妈够劲!
!