翻譯:Knockout 輕松上手 - 1 Knockout 是什么?


原文名稱:KnockoutJS Starter

Knockout 是一個非常棒的腳本庫,可是我發現許多人並不了解它,所以,思勝翻譯了這本著作。

這一節,我們將會討論 Knockout 可以做什么,又如何使用它的功能。

Knockout 是一個 JavaScript 腳本庫

Knockout ,從本質上講,是一個 JavaScript 腳本庫,可以用在網站或者網頁的開發中。用來增強腳本的功能以便提供更好的客戶體驗。默認情況下,除非你調用 Knockout ,否則它什么都不會做。這是區別其他的腳本庫或者框架很重要的一點。你可以從這里下載它

Knockout 是一個 MVVM ( Model-View-ViewModel ) 庫

創建 Knockout 的一個重要原因是在 Web 開發中可以應用 MVVM 模式。MVVM 是一種與面向對象不同的開發方式,通過將界面的邏輯與業務邏輯進行分離,達到可測試的目的。

有很多的原因值得我們寫可測試的代碼 ( 這可以用整本的書來講 ),但是最重要的原因是代碼的可維護性和質量的保證。寫可測試的代碼,代碼會變得更加容易維護。不管怎么說,使用 MVVM 模式創建 Javascript 程序,比直接使用 DOM 的事件來編寫程序,要花費更短的時間。

 

上面的圖表說明了使用 MVVM 進行開發的基本組件及其通訊的關系。你可以看到 View,Model,ViewModel 表示為一個個的塊。第一個要注意的是 Model,Model 是一個對象,通常直接表示現實中的業務邏輯。它會包含對應業務邏輯的的屬性和方法。如果你使用 Model 來表示一個汽車,那么可能如下屬性:

  • 最大速度
  • 輪胎數量
  • 制造商

同時,還有一些功能:

  • 鳴笛
  • 前進

MVVM 中的第二個特性是 View, View 由 HTML 標記,布局,元素,顏色,以及其他的可視的界面元素組成。它里面沒有邏輯和代碼,完全使用定義進行說明 ( 所有的說明都使用純粹的 HTML 完成 )。

MVVC 的第三個部分是 ViewModel,ViewModel 提供了 View 和 Model 之間的連接。如果你設計一個 ViewModel 來表示多輛汽車,它的屬性可能如下:

  • 汽車集合 ( Array )
  • 當前的汽車 ( Object )

方法

  • 添加汽車
  • 對汽車排序

ViewModel 允許你將業務邏輯在 Model 中實現,而在 ViewModel 中實現界面的控制邏輯。用術語來說就是“分離方面”,這對於大型的 Web 應用開發來說很重要。

最后一個 MVVM 的特性稱為 Binding 綁定。Binding 是連接用戶界面的屬性,事件到 ViewModel 的屬性,方法的理想途徑。關於綁定的一個例子可以是界面的一個按鈕,通過點擊它來調用 ViewModel 的 AddAutoMobile 函數,或者將界面上的多個按鈕連接到 AddAutoMobile 函數上。

在 MVVM 中,類似於 View 一般使用定義式的語法進行說明,Binding 也在視圖中通過定義進行說明,Knockout 也不例外,而且大量使用 HTML5 兼容的 data-bind 屬性進行綁定說明。

堅實又優美的 MVVM 庫,比如 Knockout 可以使你關注在應用的業務邏輯和核心功能上,而不是把時間花費在事件的注冊,取消注冊上,在數據發生變化的時候更新輸入框的值這些細碎的問題上。

 這是一個非常棒的視頻,即使你聽不懂英語,也一樣可以通過它學會使用 Knockout。

視頻地址:http://channel9.msdn.com/Events/MIX/MIX11/FRM08


免責聲明!

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



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