表现与数据分离；前台MVC
無意間看到一個(gè)web前端招聘要求：表現(xiàn)與數(shù)據(jù)分離
這名詞對(duì)我非常陌生，我就去百度了下
由于有各種莫名其妙的需求，所以才會(huì)出現(xiàn)我們前端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 = '百世經(jīng)綸'; 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的值，好了如今需求發(fā)生改變：
① select變成使用input模擬select
② 在手機(jī)上還是使用select算了
③ 總會(huì)有莫名其妙的需求，這個(gè)就是
好吧。如今的代碼你該怎么寫呢？是不是會(huì)寫幾個(gè)代碼，或者你壓根不知道怎么寫呢？？？于是看看我們的MVC的實(shí)現(xiàn)吧
PS：代碼是我可恥的抄的。。。。但我但是自豪的一個(gè)字一個(gè)字的敲的哦，竊知識(shí)不算偷......
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 //定義一個(gè)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 '一頁書': '百世經(jīng)綸', 22 '素還真': '清香白蓮' 23 }, 24 curPerson: null, 25 //數(shù)據(jù)模型負(fù)責(zé)業(yè)務(wù)邏輯和數(shù)據(jù)存儲(chǔ) 26 setPerson: function (name) { 27 this.curPerson = this.piliKV[name] ? name : null; 28 this.onchange(); 29 }, 30 //通知數(shù)據(jù)同步更新 31 onchange: function () { 32 piliController.view.update(); 33 }, 34 //對(duì)應(yīng)視圖對(duì)當(dāng)前狀態(tài)的查詢 35 getPiliAction: function () { 36 return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???'; 37 } 38 }; 39 piliController.view = { 40 //用戶觸發(fā)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>我們來看看這個(gè)神一樣的代碼。。。。我們一開始會(huì)覺得他有這些問題：
① 代碼維護(hù)困難。至少我覺得非常困難
② 徒增復(fù)雜性。性能會(huì)有問題
③ 我并不能說服自己說自己懂了。
。。。
于是我們就放棄了MVC啦，可是我們回過頭來好好審視下他，我們會(huì)發(fā)現(xiàn)不一樣的東西：
① 我們好像就在view中使用了選擇器獲取dom，其他地方壓根不認(rèn)識(shí)dom這個(gè)丫的。
② 我們的數(shù)據(jù)似乎在model中，我們能夠任意改變。可是并不會(huì)影響到我們dom
③ view和model是全然獨(dú)立的。我們的controller恰好把他們串聯(lián)起來了
看著這奇妙的魔法，我似懂非懂的點(diǎn)了點(diǎn)頭。你妹的MVC還真他媽夠勁！
！
轉(zhuǎn)載于:https://www.cnblogs.com/lxjshuju/p/6953290.html
總結(jié)
以上是生活随笔為你收集整理的表现与数据分离；前台MVC的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 正点原子STM32F103 DMA代码例
- 下一篇： C++中的类加多线程代码修炼