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

來源:互聯網
上載者:User
前言

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.