表现与数据分离；前台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還真他媽夠勁！
！
轉載于:https://www.cnblogs.com/lxjshuju/p/6953290.html
總結
以上是生活随笔為你收集整理的表现与数据分离；前台MVC的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 正点原子STM32F103 DMA代码例
- 下一篇： C++中的类加多线程代码修炼