從本節開始介紹關於KnockoutJs相關的內容,本節主要介紹knockoutjs一些重要特性與優點,以及它與Jquery等框架庫之間的區別。
1、Knockout.js是什么?
Knockout是一款很優秀的JavaScript庫,它可以幫助你僅使用一個清晰整潔的底層數據模型(data model)即可創建一個富文本且具有良好的顯示和編輯功能的用戶界面。任何時候你的局部UI內容需要自動更新(比如:依賴於用戶行為的改變或者外部的數據源發生變化),KO都可以很簡單的幫你實現,並且非常易於維護。
2、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用戶界面的一種方式… 不管它為你做什么。
3、如何使用它?
最快速、最有趣的方式就是通過互動式教學的方式來開始學習,一旦你掌握了最基本的技巧,學習了每個在線實例,你就可以在你的項目中一展身手了。
4、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元素被點擊以后需要改變。
5、用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元素,只需要修改數據模型就可以了。
6、總結
總結:KO無意與jQuery這些類似的DOM 操作框架進行競爭。KO提供了一個數據模型與用戶UI界面進行關聯的高層次方式。KO本身不依賴jQuery,但是你可以一起同時使用jQuery, 生動平緩的UI改變需要使用jQuery。
本文來自網絡,個人喜好收藏,如有侵權盡情原諒!