無意間看到一個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還真他媽夠勁！！
