雖然在WPF中接觸過MVVM模式，可是剛開始在Web中接觸到Knockout.JS讓我大吃一驚，簡化了好多工作量，原來可能需要一大堆的JS腳本完成的工作量，被釋放許多。接觸KnockoutJS一年多了，在好多個項目中也用到過，雖然每個項目中都有點重復造輪子的滋味，但是不得不說，越來越喜歡用KO完成前端的一些工作，雖然現在有許多流行的MVVM/MVC前端框架，如Angular、Vue、React等等，接觸過Vue，簡單用過一次，接觸不深，不敢談論，也就帶過吧。工作之余，開始總結自己在使用的工具、框架上用到的，體會到的感受。
一、簡單例子
先來看個最簡單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 }
二、概念介紹
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）
對於模板，個人而言，用到的次數並不是很多，大多數時候前兩個功能就已經完全滿足業務需求了。
三、結構講解
1、以剛開始的最簡單的例子來看，寫的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>
2、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 })
效果展示：
3、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的操作就全部到這里了，還有包括模板等功能，雖然存在，但是實際來講我用到的地方，或許有很多博友用到了，需要看模板的博友，可以參考其它博友的文章。
四、knockoutJS優勢所在
雖然ko發布到現在也有六七年了，有點廉頗老矣的感覺，比不上新興之秀們，但是ko的功能仍然是優秀的，也不存在非常落后的地方。
ko具備的首要功能:
-
- 簡潔依賴追蹤：無論何時數據模型改動，UI將會自動更新。
- 聲明式綁定： 淺顯易懂的方式將UI中指定部分關聯到數據模型上，並能夠通過嵌套模板構建復雜的動態UI。
- 輕易可擴展：通過幾行代碼就可以實現自定義行為作為新的聲明式綁定用於重用。
另外的優勢：
-
- 純JavaScript類庫：兼容任何服務器端和客戶端技術
- 可添加到Web程序最上部：不需要大的架構改變
- 簡潔的： Gzip之后大約13kb
- 兼容任何主流瀏覽器 (IE 6+、Firefox 2+、Chrome、Safari、Edge、其它)
- 文檔詳細的綜合組件 （采用行為驅動開發） - 意味着在新的瀏覽器和平台上可以很容易通過驗證。
代碼地址：https://gitee.com/530521314/Partner.TreasureChest.git
參考文章：@湯姆大叔 http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html
2018-7-14,望技術有成后能回來看見自己的腳步