Knockout.js 初探


Knockout.js是什么?

Knockout是一款很優秀的JavaScript庫,它可以幫助你僅使用一個清晰整潔的底層數據模型(data model)即可創建一個富文本且具有良好的顯示和編輯功能的用戶界面。任何時候你的局部UI內容需要自動更新(比如:依賴於用戶行為的改變或者外部的數據源發生變化),KO都可以很簡單的幫你實現,並且非常易於維護。

KO重要特性以及優點

I、KO重要特性

  • 優雅的依賴跟蹤-任何時候當數據源模型發生變化時,它都能夠自動的更新你UI的指定內容。
  • 聲明綁定-它通過簡單淺顯的方式將你的UI與數據源模型進行綁定,你可以使用任意嵌套的結構模版來組建一個復雜的動態界面。
  • 良好的可擴展性-通過簡單的幾行代碼就可以實現一個自定義行為作為新的聲明進行綁定。

II、其他優點:

  • 純JavaScript庫-兼容任何服務器和客戶端技術。
  • 可以很好的應用到已有的應用程序中-而不需要程序主要架構發生變化。
  • 簡潔-采用Gzip壓縮之后只要13K。
  • 兼容任何主流瀏覽器-(IE 6+, Firefox 2+, Chrome, Safari, 及其他)
  • 一套全面完整的規范(采用行為驅動開發)-這意味着在新的瀏覽器或平台中也能夠很容易驗證通過。

開發人員如果熟悉Ruby on Rails,Asp.net MVC 或其它MVC技術可能會發現它是一個帶有聲明式語法的MVC實時form。換句話說,你可以把KO當成通過編輯JSON數據來制作UI用戶界面的一種方式… 不管它為你做什么。

如何使用它?

Knockout的核心類庫是純JavaScript代碼實現的,不依賴任何其他類庫,所以按照如下步驟即將KO添加到你的項目里:

1、下載Knockout的最新版本,在正式開發和產品使用中,推薦使用默認的壓縮版本(knockout.x.x.js)

下載地址:http://knockoutjs.com/downloads/index.html

對於調試使用,推薦使用完整的未壓縮版本(knockout-x.x.debug.js),壓縮版和未壓縮版功能相同,但是未壓縮版本具有全變量名和注釋,也沒有隱藏內部的API,使得源代碼更具可讀性。

2、在你的HTML頁面中通過<script>標簽引用Knockout文件。

例如:

1

<script type='text/javascript' src='knockout-2.2.0.js'></script>

 

 

下面你就可以開始使用了。

如果你是剛開始學習Knockout,你可以先從互動式教學開始,看一些在線實例,或者仔細的閱讀監控屬性相關的幫助文檔。

互動式教學地址:http://learn.knockoutjs.com/

在線實例:http://knockoutjs.com/examples/

幫助文檔:http://knockoutjs.com/documentation/introduction.html

瀏覽器支持

Knockout在如下瀏覽器通過測試:

  • Mozilla Firefox 2.0+(最新測試版本:3.6.8)
  • Google Chrome(通過Windows and Mac 下的version 5測試;其它低版本也該可以工作)
  • Microsoft Internet Explorer 6, 7, 8
  • Apple Safari(Windows下的Safari 5測試,Mac OS X下的 Safari 3.1.2測試,以及iPhone下的Safari for iOS 4測試;高低版本應該都可以工作)
  • Opera 10 for Windows

Knockout應該在以上這個瀏覽器的各版本上工作,但是由於太多版本,沒有逐一測試。最新測試結果顯示, Knockout在如下瀏覽器也是可以工作的(盡管沒有對每個版本逐一測試):

    Opera Mini

    Google Android OS browser (OS version 2.2)

測試Knockout能否在一個新平台或瀏覽器下工作,只需要下載源代碼,然后在該瀏覽器里運行里面的/spec/runner.html文件即可測試。這個文件可以驗證超過100個行為特性,如果有問題則會生成報表。上述瀏覽器的測試結果都應該是100%通過。

說說插件

Knockout也有豐富的插件可以使用,例如:

你可以使用集成JQueryUI功能的插件來實現autoComplete功能:

<input type="text" data-bind="autocomplete : autocompleteConfig"/>

而沒必要每次都要聲明下面這樣的代碼:

$( "#inputId" ).autocomplete({
            source: availableTags
        });


或者如果你想用表單驗證功能,你可以使用驗證插件:

var myObj = ko.observable('').extend({ max: 99 });

或者

<input type="text" data-bind="value: myProp" max="99"/>

而不是每次在點擊提交按鈕的時候或者離開焦點的時候都去檢查。

 

KO與Jquery

KO和Jquery(prototype等)是相互競爭還是可以兼容一起使用?

每個人都很喜歡Jquery!在過去,我們不得不忍受各種不一致的DOM對象操作的API方法,Jquery的出現,很出色的代替了以往種種笨拙的框架,顯得靈活易用。Jquery在Web頁面元素操作和事件處理上顯得相當出色並且易用,而KO是解決另外不同的問題的。

當你的UI界面稍微復雜且含有一些相同的行為的話,如果你僅僅只使用Jquery,那么UI處理上會比你想象的要復雜棘手,同時會讓維護費用相當昂貴。思考這樣一個例子:在一個表格里顯示一個項目列表,統計表格中列表的數量,當項目列表數量小於5時啟用“Add”按鈕,否則就禁用。Jquery沒有基本的數據模型概念,所以你想要獲取項目列表的數量,你需要從表格table/tr/div這些數量上去進行推斷才能知道。如果需要在某些SPAN里顯示數據的數量,當添加新數據的時候,你還要記得更新這個SPAN的text。當然,你還要記住當總數>=5條的時候,你需要禁用Add按鈕。然后,如果還要實現Delete功能的時候,你不得不指出哪一個DOM元素被點擊以后需要改變。

用Knockout來實現又有何不同?

使用KO這一切都變得非常簡單。它可以讓你很輕易的擴展項目的復雜度,而不必擔心由此產生的數據不一致問題。它僅僅只需要將你的數據轉換成一個JavaScript數組,然后使用foreach將數據數組綁定到頁面中的一個表格table或者一組div中。每當數據數組發生變化時,UI界面會自動響應改變(你不需要指出如何插入新行
或在哪里插入),剩下的就是UI界面數據同步了。例如:你可以聲明綁定如下一個SPAN顯示數據數量:


 

There are <span data-bind="text: myItems().count"></span> items

 
 

就是這些!你不需要寫代碼去更新它,它的更新依賴於數組myItems的改變。同樣, Add按鈕的啟用和禁用依賴於數組myItems的長度,如下:


 

<button data-bind="enable: myItems().count < 5">Add</button>

 
 

之后,如果你需要實現“Delete”功能,你不必去指定如何操作UI元素,只需要修改數據模型就可以了。

總結

總結:KO無意與jQuery這些類似的DOM 操作框架進行競爭。KO提供了一個數據模型與用戶UI界面進行關聯的高層次方式。KO本身不依賴jQuery,但是你可以一起同時使用jQuery, 生動平緩的UI改變需要使用jQuery。


免責聲明!

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



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