前言
今天搞的有點快，因為上午簡單研究了下MVC，發現MVC不太適合前端開發，然后之前看幾位前端前輩都推薦前端使用MVVM，但是我對其還不甚了解，所以我覺得下午還是應該先看看他是神馬先，后面再決定要不要繼續深入下去。
神馬是MVVM？
借用我們百科一張美圖，所謂MVVM就是model-view-viewmodel模型。
他是微軟帶來的一項新的技術體驗，最先用於WPF，最后發現其模式對前端開發尤其比較合適，所以便在前端流行起來了。
MVVM是對MVC的一個改進，用以適應當代Web開發。
model為數據或者業務邏輯，完全與UI無關，它存儲了狀態並對問題領域做出處理，model可以寫在代碼里面或者用json表示、或者數據表中，反正他就是數據啦。
view表示可見元素，按鈕、標簽、圖片等，我們可能會對各個標簽綁定事件，但是我們知道這其實是原來controller該做的事情。
簡單例子中view被直接綁定到model，model的一些部分只是簡單單向綁定顯示在view中。
PS：以上至於你們懂不懂，反正我是不懂了。。。用幾個字形容就是模模糊糊
因為光是讀概念無法了解到實質，所以我們來看看其使用吧！
Knockout
之前我們在寫datalist的時候就有朋友提到這個東西，我當時也沒有怎么關注，現在一起來看看吧：
knockout是一個輕量級UI庫，通過應用MVVM（主角）模式使javascript前端UI簡單化：
聲明式綁定（declarative bindings）
使用簡單的語法將模型model數據關聯到dom元素上
UI界面自動刷新（automatic ui refresh）
當模型狀態發生改變（model state），UI自動更新
依賴跟蹤(dependency tracking)
為轉變聯合數據，在你的模型數據之間建立隱式關系
模板（templating）
為模型數據快速編寫可嵌套的UI
根據以上描述，我們來跟進一番：
Knockout是一個以數據模型（data model）為基礎的能夠幫助你創建富文本，影響顯示和編輯用戶界面的javascript類庫。
任何時候若是UI需要更新，knockout能夠簡單的幫助你實現並且容易維護。
但是究竟這個家伙是個神馬呢？我也不知道，所以來試試吧。
初探knockout水深
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 5 <script src="js/knockout-2.2.0.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 var piliPerson = [ 8 { name: '葉小釵', desc: '刀狂劍痴', weapon: '刀劍' }, 9 { name: '素還真', desc: '清香白蓮', weapon: '劍' }, 10 { name: '一頁書', desc: '百世經綸', weapon: '掌' } 11 ]; 12 $(document).ready(function () { 13 var viewModel = {}; 14 ko.applyBindings(viewModel); 15 }); 16 17 </script> 18 </head> 19 <body> 20 <select data-bind="options: piliPerson, optionsText: 'name'"> 21 </select> 22 </body> 23 </html>
PS：葉大俠之前寫了一個dropdownlist與datalist的功能，好像與他有點類似呢：）
我們再拓寬：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <script src="js/jquery-1.7.1.js" type="text/javascript"></script> 5 <script src="js/knockout-2.2.0.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 var piliPerson = [ 8 { name: '葉小釵', desc: '刀狂劍痴', weapon: '刀劍', key: 'yxc' }, 9 { name: '素還真', desc: '清香白蓮', weapon: '劍', key: 'shz' }, 10 { name: '一頁書', desc: '百世經綸', weapon: '掌', key: 'yys' } 11 ]; 12 $(document).ready(function () { 13 var viewModel = { 14 //observable是一個KO的基礎概念，UI可健康(observe)他的值，並且回應他的變化 15 //這里相當於設置了其選擇項，當前選擇的素還真 16 choseObj: ko.observable(piliPerson[1]) 17 }; 18 ko.applyBindings(viewModel); 19 }); 20 21 </script> 22 </head> 23 <body> 24 <select data-bind="options: piliPerson, optionsText: 'name', value: choseObj"> 25 <option ></option> 26 </select> 27 選擇了：<span data-bind="text: choseObj().name"></span> 28 </body> 29 </html>
這個例子很精彩，我們選擇后，選擇結果會馬上體現出來，初始化當然也是對的：
比較神奇的是，我們可以在標簽里面使用函數了，和最初的.net越來越靠近了：
function formatStr(name) { return name ? '霹靂人物：' + name : ''; } <span data-bind="text: formatStr(choseObj().name)"></span>
PS：在此小葉子已經認識到了knockout的強大了，小葉子寫的那個算是玩具吧。
PS2：我感覺如此使用后，對jquery的依賴降低了哦
驚嘆
使用了KO后，似乎我數據模型發生改變了，可能會發生級聯反應哦，曾經可能需要手動操作的事情，現在ko幫我們做了！！！
結語
經過今天的學習，雖然沒能完全了解MVVM是什么，但是也有所增長，更是發現了ko這個神器，真是不錯。
但是，因為我們最近的學習重點，是我們的小窗口，所以這里ko暫時放下，在我們小窗口靠一段落后，我們一起來學習ko先！