knockoutJS學習筆記03：knockout簡介

　　一般來講，前端的維護難度是比較大的，特別是腳本，雖然像jquery這樣的庫能夠幫助咱們減小不少代碼，但在稍微複雜的狀況下，仍是會產生有不少代碼。上一篇介紹了模板引擎jsRender，它能夠幫咱們快速生成html，減小代碼的編寫，加強代碼的可閱讀性和可維護性。但最後也說到，它仍是不夠強大。

1、mvvm

　　說到mvvm，就想到之前學過的wpf，雖然學得通常...,對比winform，wpf 裏面有不少很好的設計和想法，標籤控件、數據驅動、依賴屬性... 。更關鍵的是，它是以數據爲核心，經過數據驅動UI。一般，數據在整個程序都佔着核心地位，咱們但願對數據進行操做，而不是對UI。

　　假設一種最簡單的場景：有5個input text，咱們須要從後臺獲取數據而後爲它們賦值，而且能夠修改這些值從新提交到後臺。賦值：$(".class1").val(data1);$(".class2").val(data2);...。 獲取值：var data1 = $(".class1").val();var data2 = $(".class2").val();...。 能夠看到，若是操做多了，這種過程依舊很是繁瑣。

　　mvvm 是一種建立用戶界面的設計模式，解釋爲：模型-視圖-視圖模型。這三者的職責分別爲：

　　模型：表示業務領域的對象和數據操做。

　　視圖：用於展現數據和交互的UI。

      視圖模型：包括與視圖相關的全部數據和可視化業務邏輯。一般咱們的模型不必定與UI一一對應，也就是說模型須要加工和處理後才能用於展現，視圖模型就是這個做用，把模型處理爲適合UI的模型。

　　這裏舉一個例子：頁面有一個顯示人員信息的列表，包括修改和刪除兩個操做。

　　視圖：已經被咱們描繪出來了。

　　模型：一個person實體對象，和修改、刪除兩個操做。

　　視圖-模型：一個person列表，用於視圖綁定，包括修改和刪除兩個操做。

　　以ui操做修改成例子，會觸發view-model裏修改操做，而這個操做會調用model裏的修改操做。

2、knockout

　　knockout (簡稱ko)就是一個mvvm前端框架。

　　引用官網的介紹：ko是一款很優秀的JavaScript庫，它能夠幫助你僅使用一個清晰整潔的底層數據模型（data model）便可建立一個富文本且具備良好的顯示和編輯功能的用戶界面。任什麼時候候你的局部UI內容須要自動更新（好比：依賴於用戶行爲的改變或者外部的數據源發生變化），ko均可以很簡單的幫你實現，而且很是易於維護。

　　簡單的說，用了ko以後，ui和咱們的數據就綁定在一塊兒了，並且是雙向綁定。對於上面5個input text的例子，咱們徹底不用去操做dom就能夠實現賦值或獲取值操做。

　　瀏覽器兼容性問題。微軟開發的，兼容全部主流瀏覽器，也兼容低版本ie。

　　ko與 jquery。這二者自己是不衝突的，徹底能夠配合使用。例如在數據方面用ko，在動畫方面用jquery。

3、簡單例子

　　寫了那麼多文字，看看一個簡單的例子。下載ko.js，代碼以下，能夠看到輕鬆完成數據綁定。

　　html:

name:<input type="text" data-bind="value:name" />,age:<input type="text" data-bind="value:age" />
name:<span data-bind="text:name"></span>

　　js:

    function Person(name,age){
　　　　this.name = ko.observable(name);
　　　　this.age = ko.observable(age);
　　}
　　var person = new Person("tom",18);
　　ko.applyBindings(person);

4、總結

　　理解mvvm的概念對於學習ko仍是很是重要的。下一篇將開始學習ko的相關語法。