KnockoutJS-快速入門

　　雖然在WPF中接觸過MVVM模式，但是剛開始在Web中接觸到Knockout.JS讓我大吃一驚，簡化了好多工做量，原來可能須要一大堆的JS腳本完成的工做量，被釋放許多。接觸KnockoutJS一年多了，在好多個項目中也用到過，雖然每一個項目中都有點重複造輪子的滋味，可是不得不說，愈來愈喜歡用KO完成前端的一些工做，雖然如今有許多流行的MVVM/MVC前端框架，如Angular、Vue、React等等，接觸過Vue，簡單用過一次，接觸不深，不敢談論，也就帶過吧。工做之餘，開始總結本身在使用的工具、框架上用到的，體會到的感覺。

 

1、簡單例子

　　先來看個最簡單ko所帶來的效果：

　　

　　看看代碼是如何簡潔設計的：

 1 <div>
 2     <label>公司名稱</label>
 3     <input type="text" data-bind="value:unitName" /><br />
 4     <label>公司地址</label>
 5     <input type="text" data-bind="value:address" />
 6     <p data-bind="text:'您的公司名稱爲:'+unitName()+'，公司地址是:'+address()+' .'"></p>
 7 </div>
 8 
 9 @section Scripts{
10     <script type="text/javascript">
11         var viewModel = {
12             unitName: ko.observable(''),
13             address: ko.observable(''),
14         };
15         $(function () {
16             ko.applyBindings(viewModel);//完成綁定
17         });
18     </script>
19 }

 

2、概念介紹

　　knockout.JS利用的是MVVM模式，不依賴任何第三方的、純Javascript編寫的UI類庫。官網地址：http://knockoutjs.com/

　　

　　Model-View-View Model (MVVM) 是一種建立用戶界面的設計模式。 描述的是如何將複雜的UI用戶界面分紅3個部分：

• Model：後臺模型對象，存儲着數據和操做，獨立於前端UI的存在，與具體業務打交道。
• ViewModel：前臺數據展現，一般是用於對外交互的，ViewModel有兩種不一樣的使用場景，一種是後臺對外的ViewModel用於對外交互時接收的對象屬於服務器端ViewModel，一種是前臺Javscript對象在前臺的數據交互模型.如ko中的ViewModel,固然這兩種經常是互相轉換的。
• View：視圖頁面，用戶可以見到的交互頁面，存放着與ViewModel交互的UI，輸入數據或操做對象完成對ViewModel的更新，

　　Knockout有着三大核心功能：

• 監控屬性（Observables）和依賴跟蹤（Dependency tracking）
• 聲明式綁定（Declarative bindings）
• 模板（Templating）

　　對於模板，我的而言，用到的次數並非不少，大多數時候前兩個功能就已經徹底知足業務需求了。

 

3、結構講解

　　一、以剛開始的最簡單的例子來看，寫的js代碼無非就是聲明瞭一個對象，而後將這個對象利用ko.applyBindings()綁定到了ko中,即可以利用viewModel對象完成ko的相關功能。

　　     ko.applyBindings()方法第一個參數用於綁定須要綁定的viewModel對象，第二個可選參數用來限定第一個參數的綁定範圍,這樣一來，頁面上能夠聲明出不少個不一樣做用範圍的viewModel對象。

1     <script type="text/javascript">
2         var viewModel = {
3             unitName: ko.observable(''),
4             address: ko.observable(''),
5         };
6         $(function () {
7             ko.applyBindings(viewModel);//完成綁定
8         });
9     </script>

　　二、viewModel對象內部，定義屬性或方法有許多種方式(我比較鐘意這種方式，有點鍵值對的感受)。

　　　　其中的ko.observable()方法還有兩個兄弟，ko.observableArray()和ko.computed()，我的而言前兩種用的較多。

　　　　ko.observable()方法，將UI元素和viewModel中的屬性進行雙向關聯，一方的改變影響着另外一方，如上的例子中，在js中須要對unitName操做時有：

• • 讀數據操做：varunitName = viewModel.unitName(); 讀取到unitName的數據，一般是UI上輸入數據，js中須要根據輸入的數據作處理用它。
  • 寫數據操做：viewModel.unitName("博客園"); UI上相應綁定的元素將會使用新的值，一般是用於js取得新數據並綁定到UI上使用。

　　　　ko.observableArray()方法，綁定集合或數組，一般以列表形式出現，對列表內的數據展現或增刪操做。監控數組監控的是整個集合/數組對象，內部的具體對象的監控不屬於它的職責範圍。

unitType:ko.observableArray(),//在viewModel中初始化一個監控數組

　　　　在js中若是某個業務需求須要增長或是刪除某個對象，利用集合的push('新值')或是remove(‘舊值’)便可。

　　

　　　　ko.computed()方法,針對多個屬性的同時監控，而產生的最終結果，能夠監控多個屬性的變化而後返回不一樣的數據，我的對這個方法來說，沒用過幾回，大多數時候若是須要監控多個屬性的變化，我仍是喜歡另寫一個方法去改變最終結果。以下能夠將unitInfo屬性綁定在UI元素上，但另外兩個屬性的值改變時後，這個值也會相應的改變。對於computed方法還有一個一樣的pureComputed方法，若是要用推薦使用pureComputed方法，該方法相比computed而言可以更快的從新渲染和更低的內存使用。

1     unitInfo: ko.pureComputed(function () {
2         return "您的公司名稱爲:" + viewModel.unitName() + "，公司地址是：" + viewModel.address();
3     }),

　　　　對於pureComputed方法,最優的使用仍是利用它的重寫功能,咱們經過write方法，能夠實現許多功能，如拆分、提煉字符串等等，具體業務，具體設計。

 1     unitInfo: ko.pureComputed(function () {
 2         return "您的公司名稱爲:" + viewModel.unitName() + "，公司地址是：" + viewModel.address();
 3     }),
 4     unitDetailInfo: ko.pureComputed({
 5         read: function () {
 6             return "您的公司名稱爲:" + viewModel.unitName() + "，公司地址是：" + viewModel.address();
 7         },
 8         write: function (value) {
 9             viewModel.unitName(value);
10         }
11     })

　　　　效果展現：

　　三、UI上用到的data-bind屬性

　　　　data-bind屬性雖然好用但它不是HTML的原生屬性，嚴格聽從HTML5語法屬於'data-'系家族經常使用來作自定義屬性。ko中命名data-bind來做爲數據綁定的屬性，全部的操做都依靠data-bind屬性完成。

1 <select data-bind="options:unitTypeOptions, optionsText: 'text', optionsValue: 'value', value:choiceUnitTypeValue"></select>

 　　至此，基本上ko的操做就所有到這裏了，還有包括模板等功能，雖然存在，可是實際來說我用到的地方，或許有不少博友用到了，須要看模板的博友，能夠參考其它博友的文章。

 

4、knockoutJS優點所在

　　雖然ko發佈到如今也有六七年了，有點廉頗老矣的感受，比不上新興之秀們，可是ko的功能仍然是優秀的，也不存在很是落後的地方。

　　ko具有的首要功能:

• • 簡潔依賴追蹤：不管什麼時候數據模型改動，UI將會自動更新。
  • 聲明式綁定： 淺顯易懂的方式將UI中指定部分關聯到數據模型上，並可以經過嵌套模板構建複雜的動態UI。
  • 輕易可擴展：經過幾行代碼就能夠實現自定義行爲做爲新的聲明式綁定用於重用。

　　另外的優點：

• • 純JavaScript類庫：兼容任何服務器端和客戶端技術
  • 可添加到Web程序最上部：不須要大的架構改變
  • 簡潔的： Gzip以後大約13kb
  • 兼容任何主流瀏覽器 (IE 6+、Firefox 2+、Chrome、Safari、Edge、其它)
  • 文檔詳細的綜合組件 （採用行爲驅動開發） - 意味着在新的瀏覽器和平臺上能夠很容易經過驗證。

 

 本文地址：http://www.javashuo.com/article/p-drzqttmf-eg.html

 本文Demo的地址：：https://gitee.com/530521314/koInstance.git

 參考文章：@湯姆大叔 http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html

 

2018-7-14,望技術有成後能回來看見本身的腳步