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

時間 2019-11-29

標籤 javascript 激增思考 mvvm knockout 欄目 JavaScript 简体版

原文原文鏈接

前言

今天搞的有點快，由於上午簡單研究了下MVC，發現MVC不太適合前端開發，而後以前看幾位前端前輩都推薦前端使用MVVM，可是我對其還不甚瞭解，因此我以爲下午仍是應該先看看他是神馬先，後面再決定要不要繼續深刻下去。javascript

神馬是MVVM？

借用咱們百科一張美圖，所謂MVVM就是model-view-viewmodel模型。html

他是微軟帶來的一項新的技術體驗，最早用於WPF，最後發現其模式對前端開發尤爲比較合適，因此便在前端流行起來了。前端

MVVM是對MVC的一個改進，用以適應當代Web開發。java

model爲數據或者業務邏輯，徹底與UI無關，它存儲了狀態並對問題領域作出處理，model能夠寫在代碼裏面或者用json表示、或者數據表中，反正他就是數據啦。jquery

view表示可見元素，按鈕、標籤、圖片等，咱們可能會對各個標籤綁定事件，可是咱們知道這實際上是原來controller該作的事情。json

簡單例子中view被直接綁定到model，model的一些部分只是簡單單向綁定顯示在view中。app

PS：以上至於大家懂不懂，反正我是不懂了。。。用幾個字形容就是模模糊糊dom

由於光是讀概念沒法瞭解到實質，因此咱們來看看其使用吧！函數

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先！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。