【javascript激增的思考03】MVVM與Knockout


前言

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM