前言
今天搞的有點快,因為上午簡單研究了下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先!