無意間看到一個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還真他媽夠勁！！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
