表现与数据分离；前台MVC

来源：互联网发布：网络加速器免费版下载编辑：程序博客网时间：2024/05/28 11:30

无意间看到一个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还真他妈够劲！！

8 0