Atitit. js mvc 總結(2)----angular 跟 Knockout o99 最佳實務

標籤：style   blog   http   color   io   使用   java   ar   for   

Atitit. js mvc 總結(2)----angular  跟 Knockout o99 最佳實務

 

1. 架構 angular 跟Knockout 1

2. 2. 簡單的列表綁定：Knockout 1

3. foreach綁定 3

4. Sumup:hesh angular simply 3

1. Mvc優點 angular 功能包括 3

2. 2.1 資料繫結 就是MVVM 結構, 3

3. 2.10 動畫效果, ng-animate 4

5. 參考 5

 

1. 架構 angular 跟Knockout

 

。有了Knockout，在寫JavaScript時，就不需要在頁面中引用UI元素或DOM。

 

 

　Knockout設計目標是把任何JavaScript對象當成View Model來使用。只要View Model的屬性具有可監聽性，就可以使用Knockout將其與UI綁定。一旦屬性值發生變化時，UI會被自動重新整理

 

 

作者:: 老哇的爪子 Attilax 艾龍，  EMAIL:[email protected]

轉載請註明來源： http://blog.csdn.net/attilax

 

2. 2. 簡單的列表綁定：Knockout

對於列表的綁定，基本上是使用table。這裡我們看如何使用ko把一個Array綁定到一個table中。因為多條資料就最好是使用模板了，所以我們結合jquery的模板外掛程式來使用ko。

首先我們需要定義一個數組，然後定義一個ko的數組。

Ko有自己的資料定義，是availableArray;所以我們需要使用它的函數把我們定義好的數組給傳進去，產生availableArray。

第二步是去定義一個jquery的模板，定義一個table,並把viewModel的資料繫結到模板中。

這裡tbody的data-bind就是直接綁定template啦，對應的需要給出綁定的模板Id，以及需要傳入到模板的資料來源。

 

3. foreach綁定

　<table> 
<thead> 
<tr> 
<td>Name</td> 
<td>Amount</td> 
<td>Price</td> 
</tr> 
</thead> 
<tbody data-bind="foreach: items"> 
<tr> 
<td data-bind="text: product.name"></td> 
<td><select data-bind="options:[1,2,3,4,5,6],value: amount"></select></td> 
<td data-bind="text: subTotal"></td> 
</tr> 
</tbody> 
</table> 

4. Sumup:hesh angular simply

不過foreach bind tsabdd...

文檔雅十angular的多

1. Mvc優點 angular 功能包括2. 2.1 資料繫結 就是MVVM 結構, 

 

目的就是讓開發人員完全忘記操作DOM, 只需要操作資料,html頁面就會自動更新
例如 var shownumber = 1, 那麼你把shownumber = 2 時, 介面就自動更新了, 完全不需要用jQuery用.html()或.text()更新資料. 就這個綁定功能,目前大部分網站的js代碼都能刪掉 三分之二.

 

同時提供大量內建的ng- 開頭的指令系統通過在html模板中 聲明式綁定 解決操作DOM問題. (聲明式指令簡直就是對不懂js的前端開發的福音,再也不用js的.show(),.hide()了, 直接寫到html標籤上)

 

3. 2.10 動畫效果, ng-animate

 

angular1.2版本後分為獨立的模組 ng-animate 非常方法,只要在html寫上樣式名字動畫自動就出來了,完全不用操心js代碼

 

?MVVM救 星：Model將和ViewModel互動（通過$scope對象），將監聽Model的變化。這些可以通過View來發送和渲染，由HTML來展示你的 代碼。View可以通過$routeProvider對象來支配，所以你可以深度的連結和組織你的View和Controller，將他們變成導航 URL。AngualrJS同時提供了無狀態的Controller，可以用來初始化和控制$scope對象。

 

 

要知道開源界的很多架構都是開發人員由於個人興趣或者激情而開發出來的，比如，Cappucino 還有 Knockout。而angularJS是由互連網巨人Google組織開發的。這意味這你有更加強大的社區支援。誰都不希望第一天開始使用一個架構，第 二天發現這個架構已經被遺棄了吧！

 

 一年前左右，接觸到knockout和AngularJS，感受到資料和視圖自動綁定的美妙開發體驗後，立即拋棄Backbone。此時的開發已經徹底前後分離、前端業務資料層和視圖層分離

 

你需要關心的只是資料模型的改變和真正的邏輯部分，雙綁機制可以幫你完成視圖層的自動更新。這也是為什麼17000的代碼可以變成5000的原因之一。

 

於AngularJS能讓整個代碼變得更為精簡的第二原因，應該是所謂的組件化吧。這個功能是我一直不敢用也沒認真去學的，因為這個功能過於強大，可以自訂HTML標籤，將諸如多TAB切換這種視圖層和模型層都涉及的東西，最終封裝成一個新的HTML標籤、非常強大，但陷阱也頗多，用起來比較嚇人。...相比於AngularJS的組件，polymer的組件構造方式，較容易為初中級開發人員理解。

 

 

在一般情況下，Angular.js依靠一種叫做“ 髒檢查（dirty checking）”的機制來確定對象是否已變更。“髒檢查”的方式是，在你掃描每個對象和其所有綁定屬性時，比較當前值和之前已知的值。如果它發生了變化，你就需要去更新其綁定。正如你能想到的那樣，代碼中對象越多，成本將越昂貴。

 

· 使用“髒檢查”，你不需要使用accessors。你可以用person.name = "Bill"來代替person.set(‘name‘, "Bill")，就像在Ember.js 或 Backbone.js中的一樣。

· 為什麼在DOM中你會有這麼多的對象？這最終將會成為一個瓶頸的。

Mi?ko Hevery在StackOverflow上介紹了 這種折中方式。他指出，使用“髒檢查”，你無法一次有超過2000個綁定對象。

 

Tom Dale（Ember.js開發人員之一）所說，Ember.js受Cocoa 和Rails啟發。但問題是，通過Ember.js，我並沒有真正感覺到像在寫一個Web應用程式，它就像一堆拋出的概念。而在Angular.js中， 我感覺像在寫一個Web應用程式，它真正支援所有的Web概念，並以一種非常自然的方式來擴充HTML。

 

。HTML是偉大的，因為它是聲明式的

 

· <ul>  

·   <li ng-repeat="element in array">element</li>  

· </ul>  

這個文法看起來像新的 MDV標準。這看起來比Ember.js更加簡潔。另外，Angular.js被最佳化得非常快，Team Dev通過如下措施來實現：

· 髒檢查

· 只檢查當前視圖

· 只在變化發生時檢查

· 通過和Chrome團隊協作來利用JIT

 

5. 參考

(foreach綁定  )(Knockoutjs快速入門(經典)_Javascript教程_Java學院_希賽網.htm

KnockOutJS學習系列----(一) - Nic Pei - 部落格園.htm

paip.提升效率--資料繫結到table原理和流程Angular js jquery實現 - attilax的專欄 - 部落格頻道 - CSDN.NET.htm

Atitit. js mvc 總結(2)----angular 跟 Knockout o99 最佳實務