最近一直在使用和學(xué)習(xí)KNOCKOUT.JS。有了一些心得體會就把它們總結(jié)了出來。Knockout js 使用心得條目如下：

 

1 knockout js是個輕量級的js框架，在knockout官網(wǎng)下載之后，可以引入自己的html中。knockout js的使用并不需要jQuery配合，但我們也可以在jQuery之后自己的js文件之前引入knockoutjs

 

2 knockout js是一個MVVM(Model View Viewmodel)框架, 其他還有MVC(Controller)，MVP(Presenter)框架

 

3 knockout js 是創(chuàng)建一些監(jiān)控變量和監(jiān)控數(shù)組和事件，并將這些變量，數(shù)組，事件通過data-bind屬性統(tǒng)統(tǒng)綁定在html上。

好處：1省去了在js文檔中要寫綁定和獲取元素的煩惱，因?yàn)槟硞€html元素要獲取的內(nèi)容和事件已經(jīng)綁定好了 2 如果元素的內(nèi)容或者屬性有變化，不需要再查找元素，更改屬性，直接修改綁定的變量，數(shù)組和事件，html元素就會動態(tài)地更新

 

4 knockout的引入:

 

<script type="text/javascript" src="./js/jquery-2.2.3.js"></script>

<script src="./js/knockout-3.4.0.js"></script>

<script type="text/javascript" src="./js/demou1.js"></script>

 

5 knockout的結(jié)構(gòu)：

 

在js文件中，需要引入的初始數(shù)據(jù)(一般來說都是不變的數(shù)據(jù))都可以在model外定義，可變的數(shù)據(jù)都要定義在model內(nèi)部

 

var variable1 = "...";var variable2 = "...";var variableArray = ["..."];var variableObject = {};/*...一系列初始量的定義, 這些值是作為外部數(shù)據(jù)，要傳入這個model的...*/function ViewModel(){

   var self = this;//將this賦值給self，這樣方便內(nèi)部不同域時使用this

   /*

   * 自己定義的監(jiān)控變量，監(jiān)控數(shù)組，還有事件寫在這里

   */

}

ko.applyBindings(new ViewModel());

 

最后需要應(yīng)用這個ViewModel，注意每個項(xiàng)目只可以應(yīng)用一次這個Model

嚴(yán)重注意一點(diǎn)：如果在body的末尾引入script，那么就可以直接向上邊這樣寫代碼了；如果在頭部引入(推薦)，那么就需要將所有代碼包裹起來(讓DOM樹結(jié)構(gòu)完整了再運(yùn)行代碼)，兩種方法，可以用jQuery包裹，也可以用純js的window.addEventListener(“l(fā)oad”, function(){}, false)來包裹，個人覺得第二個更好，少用jQuery可以節(jié)省運(yùn)行時間

 

window.addEventListener("load", function(){

   /*...所有代碼...*/

}, false);

 

$(function(){

   /*...所有代碼...*/

});

 

 

6監(jiān)控變量：

 

監(jiān)控變量的定義

 

self.variable1 = ko.observable("...");

self.variable2 = ko.observable(100);

self.variable3 = ko.observable(variable1);

self.variable4 = ko.observable({

   name: "alex",

   age: 18

});

 

這個括號里面就是這個監(jiān)控變量的值，這個值可以是字符串，可以是數(shù)字。這樣的話，模型就會實(shí)時監(jiān)控這個變量，任何html元素使用了這個變量，當(dāng)我們在模型中改變這個變量的時候，html中的值就會改變。

 

監(jiān)控變量的值獲取

var value = self.variable1();

注意，值后邊一定要有括號，因?yàn)楸O(jiān)控的本質(zhì)是個函數(shù)，執(zhí)行這個函數(shù)會返回所監(jiān)控的內(nèi)容

這個括號里還可以寫外部定義的字符串或數(shù)字

 

監(jiān)控變量的值更新

self.variable1("abc");

self.variable2(self.variable2() + 1);

self.variable1().school = "123"

在括號內(nèi)賦值，或者改變數(shù)值，來更新監(jiān)控變量。注意第二個，更新的時候是在原有的上邊加1

 

7 監(jiān)控數(shù)組

 

監(jiān)控數(shù)組的定義：使用ko.observableArray()來定義

self.arr = ko.observableArray([]);

self.arr1 = ko.observableArray([{}, {}, {}]);

self.arr2 = ko.observableArray(variableArray);

監(jiān)控數(shù)組里面可以放空數(shù)組，可以放對象組成的數(shù)組，可以把模型外的數(shù)組引入

注意，如果想使用對象，也推薦將對象作為數(shù)組的元素來使用，方便用foreach:綁定，如果只是想用對象的話，也可以用ko.observable()來監(jiān)控

 

監(jiān)控數(shù)組的獲取

var array = self.arr();

必須要有括號。獲取到的是數(shù)組，也就是之前括號里面的監(jiān)控的值

監(jiān)控數(shù)組的更新

self.arr([{

   "name": "Lee"

}, {

   "name": "alex"

}])

當(dāng)然監(jiān)控數(shù)組也可以用js的數(shù)組方法來更新，

比如self.arr.push(123) 和 self.arr().push(123)效果一樣的，不過推薦后者，與監(jiān)控變量一樣的方法，更清晰。

監(jiān)控數(shù)組可以用的方法比如.push()  .pop()  .unshift()  .shift()   .slice()  .reverse()   .sort()  .splice()

注意.sort()方法，我們知道排序時必須要傳一個比大小的函數(shù)，不然會按照字符串來比較

 

self.arr().sort(function(a, b){

   if(a < b){

       return -1;

   }else{

       return 1;

   }

});

 

從小到大還是從大到小就是調(diào)整-1和1的位置

因?yàn)閿?shù)組的上述方法都是可以直接改變數(shù)組的，所以我們可以用self.arr().方法()直接使用，但是無論字符串還是數(shù)字都沒有可以改變自身的方法，所以就不能這樣更新了。

 

其實(shí)監(jiān)控變量還是監(jiān)控數(shù)組本質(zhì)都可以用self.content(self.content()變化)來更新, 獲取都是用self.content()來獲取

 

 

 

原文來自:博客園/Wiesler