Knockoutjs 學習系列(一)ko初體驗
MVVM框架中Angular是好,但這么大而全的框架,學習難度可不低呢,上手起碼也得要個一兩周吧。而knockoutjs專注于數(shù)據(jù)綁定,只需一兩天就可以投入使用了,學習成本不要太低!在前端進化如此迅速的時代,學習成本也是不得不考慮的一個因素。很多時候其實我們的項目并沒那么復雜,也并不需要萬能的框架,更需要的反而是簡單順手的工具。
Before Knockoutjs
假設(shè)我們做一個訂單系統(tǒng),需要顯示商品單價,然后可以根據(jù)輸入數(shù)量計算出總價并顯示出來。使用原生代碼也很容易實現(xiàn),效果:
代碼如下:
<!--HTML code--> Price: <span id="price"></span><br /> Account: <input type="text" id="account" value="" placeholder="請輸入數(shù)量" /><br /> sum: <span id="sum"></span> //js code var priceNode = document.getElementById('price'), accountNode = document.getElementById('account'), sumNode = document.getElementById('sum'), price = 100, account = 11, sum = price * account; //初始化。 priceNode.innerText = price; accountNode.value = account; sumNode.textContent = sum; //監(jiān)視 View層的用戶輸入 accountNode.addEventListener('keydown', function (e) { window.setTimeout(function () { account = accountNode.value; sum = price * account; sumNode.textContent = sum; },10); });
嗯,蠻簡單的!哦,對了,我們一次展示50件商品,同時又有10類這樣的展示,還有買5盒岡本送一根油條這樣的各種促銷……
所以,你知道原生實現(xiàn)的問題了吧:
•隨著 UI 和數(shù)據(jù)交互的增多,代碼量迅速增長,難以維護
•基于 Dom 查詢,id 或 class 的命名難以管理
•代碼耦合度高,難以復用
Knockoutjs簡介
Knockoutjs(下面簡稱ko)就是為了解決上述問題而出現(xiàn)的,他是一個輕量級的MVVM庫,專注于實現(xiàn)數(shù)據(jù)與視圖的綁定,本身并不提供 UI 類和路由等功能,上手非???。同時,由于ko出來已經(jīng)有些年頭了,已經(jīng)是比較成熟的框架了。在做一些動態(tài)顯示比較多的頁面時,ko無疑是一個比較好的選擇。關(guān)于MVVM樓主就不多說了,一圖以蔽之:
ko建立在3大核心特征之上(官網(wǎng)介紹):
1. 可觀察對象與依賴跟蹤 (Observables and dependency tracking):使用可觀察對象在模型數(shù)據(jù)之間設(shè)立隱性關(guān)系鏈,用于數(shù)據(jù)轉(zhuǎn)換和綁定。
2. 聲明式綁定 (Declarative bindings):使用簡單易讀的語法方便地將模型數(shù)據(jù)與DOM元素綁定在一起。
3. 模板 (Templating):內(nèi)置模板引擎、為你的模型數(shù)據(jù)快速編寫復雜的 UI 展現(xiàn)。
使用ko非常簡單,直接到官網(wǎng)(http://knockoutjs.com/index.html)下載并用<script>引入即可。
可觀察對象
使用ko重寫上面的例子(自定價格,這也是我小時候的愿望之一):
代碼是這樣的:
<!--HTML Code--> <div id="one"> Price: <input type="text" data-bind="value: price" placeholder="請輸入單價" /><br /> Account: <input type="text" data-bind="value: account" placeholder="請輸入個數(shù)" /><br /> sum: <span data-bind="text: sum"></span> </div> // js Code var ViewModel = function(p, a) { //設(shè)置為可觀察對象并以參數(shù)p、a初始化 this.price = ko.observable(p); this.account = ko.observable(a); //調(diào)用ko函數(shù)的時候?qū)his傳入,否則執(zhí)行ko.pureComputed內(nèi)部代碼時,this為ko,ko.price()報錯。 this.sum = ko.pureComputed(function() { //因為可觀察對象是一個函數(shù)對象,所以要用 price()來讀取當前值。 //設(shè)置值使用price(NewValue),支持鏈式寫法:this.price(12).account(3) return this.price() * this.account(); }, this); }; var vm = new ViewModel(135, 10); //應(yīng)用該綁定,綁定開始生效 ko.applyBindings(vm);
1)先看HTML代碼:
可以看到在每個標簽中都加入了一個 data-bind = "XX:OO" 這樣的鍵-值對。這個就是 ko 的綁定語法,XXOO代表什么東西呢?(XXOO?樓主還是個孩子啊…)從例子可以看到XX為標簽的屬性,可以是text、value、class、checked等標簽屬性,其實也可以是click、focus、load等DOM事件。OO看起來像是一個變量,實際上并不是變量,而是一個函數(shù)對象,執(zhí)行這個函數(shù)(帶個())就能得到相應(yīng)的綁定值。通過XXOO就可以將元素的屬性或事件跟js中的函數(shù)對象綁定在一起(XXOO了就要相互負責哈),這就是ko的聲明式綁定。綁定的定義其實就是一個觀察者模式,只不過這是雙向的綁定,發(fā)布者和訂閱者相互訂閱了對方的消息而已,這就是MVVM的雙向綁定。ko雙向綁定的結(jié)果就是一方變化就可以自動更新另一方,也就是通過ViewModel將數(shù)據(jù)和表現(xiàn)層緊緊綁定在一起了。綁定的效果類似于:
2)再看看js代碼:
可以看到j(luò)s中定義了一個ViewModel對象,在對象中對HTML中綁定的OO進行了操作。這里主要有兩個操作: ko.observable()和ko.pureComputed()。
•ko.observable(p):見名知義、這個就是設(shè)置可觀察對象的方法,傳入的參數(shù)p就是初始化的值,這里的參數(shù)可以是基本數(shù)據(jù)類型,也可以是一個json對象。被設(shè)置為可觀察對象后就意味著系統(tǒng)會一直觀察這個值。無論是ViewModel中的p還是被綁定對象的p發(fā)生變化都會引起刷新事件,將所有用到這個值的地方都更新到最新狀態(tài)。顯然,可觀察對象是比較消耗性能的,所以對于不需要動態(tài)變更的值(如價格)則不要設(shè)置為可觀察對象,當然還是需要放入ViewModel中進行集中初始化。
•注意:ko.observable(p)返回的可觀察對象是一個函數(shù)對象,所以讀取可觀察對象需要使用price()這種方式;同樣的,設(shè)置可觀察對象需要使用price(newValue)這種方式。比較貼心的是,設(shè)置的時候支持鏈式寫法:ViewModel.price(100).account(10)。
•ko.pureComputed()就是所謂的依賴跟蹤了,這里是單價*數(shù)量等于總價,注意這里不能直接用this.sum = this.price() * this.account();來指定sum,這種寫法不能動態(tài)刷新被綁定的對象,只是動態(tài)改變了sum變量,但要去刷新綁定對象還需要其他操作。所以,與計算相關(guān)的綁定值都要用ko的計算函數(shù)來設(shè)置。當然,返回的也是一個函數(shù)對象。另外,ko還有一個computed函數(shù),也可以用其來進行設(shè)置,不過推薦使用pure的方式,以提高性能。
•注意這里的寫法:ko.pureComputed(fn, this),也就是將fn綁定到ViewModel作用域中,其實就是js中的call/apply。因為在執(zhí)行ko內(nèi)部函數(shù)的時候,this為ko對象,所以為了得到ViewModel對象的作用域,需要通過上面的寫法傳入this。當然也可以在ko函數(shù)外部用that保存ViewModel對象,然后在ko函數(shù)內(nèi)部使用that來調(diào)用ViewModel對象。像這樣:
var that = this; this.sum = ko.pureComputed(function() { return that.price() * that.account(); });
定義好ViewModel構(gòu)造函數(shù)后便實例化了一個ViewModel對象,然后使用了ko.applyBindings()的方式來使得綁定生效,這一步不要漏掉了。
使用ko的頁面簡單模式:
<!--HTML Code--> <span data-bind="text: bindtext"></span> // js Code var viewModel = { bindtext: ko.observable('initValue') }; ko.applyBindings(viewModel);
總結(jié)起來就是:HTML中使用data-bind="XX: OO"聲明綁定,js中建立ViewModel并設(shè)置可觀察對象,最后應(yīng)用綁定。
可觀察對象數(shù)組
再看看可觀察對象數(shù)組的使用方法,在ko中可不能像js一樣數(shù)組和變量混用,對于數(shù)組對象就要用ko.observableArray([…,…])這種形式,同樣的,數(shù)組元素也可以是基本類型也可以是json對象。ko中的可觀察對象數(shù)組有一系列的數(shù)組操作方法,如slice()、sort()、push()這種,效果跟原生的js數(shù)組操作方法一樣,只是通過ko方法所做的改動會通知到訂閱者從而刷新界面,但js方法則不會刷新界面。下面是一個簡單例子:
<!--HTML Code--> <select data-bind="options: list"></select> // js Code var vm = { // list: ko.observableArray() list: ko.observableArray(['Luffy','Zoro','Sanji']) }; ko.applyBindings(vm);
關(guān)鍵點:ko監(jiān)控的是數(shù)組的狀態(tài),而不是元素本身的狀態(tài)。也就是說當數(shù)組狀態(tài)變化(增減元素)的時候會觸發(fā)ko事件引起綁定對象的刷新,但數(shù)組內(nèi)部元素的變化(如:值變化)則不被監(jiān)控不能觸發(fā)ko事件。例如:
在控制臺中使用原生方法將Luffy動態(tài)改成Lucy是不會刷新UI頁面的,而使用ko的數(shù)組操作改動數(shù)組則會立即刷新頁面,值得注意的是在刷新的時候,也會將之前的改動刷新出來(Luffy > Lucy)。也就是說其實js內(nèi)存中的變量是已經(jīng)改變了,但是還缺少一個刷新DOM的動作。這里大家可以看到,讀取數(shù)組的方法是vm.list()[0],因為list也是一個函數(shù)對象,執(zhí)行返回值才是我們想要的list內(nèi)容。同理,也可以通過 vm.list(["妹子","妹子","妹子"]) 這樣的方式重置可觀察對象數(shù)組,也能立即刷新UI。
如果需要將數(shù)組元素的改動也動態(tài)反應(yīng)到UI上,需要將數(shù)組元素也設(shè)置為可觀察對象,然后使用ko的方法改變數(shù)組元素值。注意,是使用ko的方法 list()[0]("Lucy")!
操作可觀察對象數(shù)組的方法有兩類,一類是與原生js數(shù)組方法同名的:pop, push, shift, unshift, reverse, sort, splice,這一部分與js原生方法的用法和效果都一樣,就不再贅述了。
另外一些方法是js中沒有的,主要有以下幾個:
•remove(someItem) -- 刪除所有值與someItem相等的元素項并將它們以數(shù)組形式返回,這里的意思就是說你可不能直接list.remove(0)來刪除第一項,而是要用list.remove(list()[0]) 這種形式來刪除??偠灾?,傳入的參數(shù)必須是元素項的值,可以用list()[0] 的形式,也可以直接輸入值的字符串(比如“Luffy”這種)。
•remove(function(item) { return item.age < 18;}) -- 刪除所有age屬性小于18的元素項并將它們以數(shù)組形式返回,這種用法跟平常的數(shù)組高階函數(shù)沒什么區(qū)別。Item作為高階函數(shù)的參數(shù)傳入,遍歷數(shù)組時,當高階函數(shù)返回值為真值時就刪除該項,否則轉(zhuǎn)到下一項。
•removeAll(['Chad', 132, undefined]) -- 刪除所有值與 'Chad' 或 123 或 undefined 相等的元素項并將它們以數(shù)組形式返回。
•removeAll() -- 刪除所有項并以數(shù)組形式返回。
小竅門:在處理可觀察對象時,若對象數(shù)量眾多而且交互頻繁的情況下,每次變更都立即刷新的話會非常消耗性能,這個時候可以使用擴展 myObservableArray.extend({ rateLimit: 1000 }) 來設(shè)置延遲刷新。比如在不斷往可觀察對象數(shù)組中插入元素時,可以設(shè)置一個周期時間1000ms,讓1000ms內(nèi)的所有操作集中到一次刷新中去,避免頻繁操作 DOM 帶來的性能惡化。
總結(jié)
本篇主要簡單介紹了knockoutjs中最重要的概念:可觀察對象(數(shù)組)。可觀察對象實質(zhì)上是一個函數(shù)對象,通過ko方法操作可觀察對象時可以動態(tài)刷新UI展現(xiàn),這個是推薦做法。同時,也可以通過原生的js方法操作可觀察對象,只是原生方法并不會刷新UI展現(xiàn),需要等到下一次刷新事件時才會被刷新到UI中。
相關(guān)文章
JavaScript數(shù)據(jù)綁定實現(xiàn)一個簡單的 MVVM 庫
MVVM 是 Web 前端一種非常流行的開發(fā)模式,利用 MVVM 可以使我們的代碼更專注于處理業(yè)務(wù)邏輯而不是去關(guān)心DOM 操作。接下來通過本文給大家介紹JavaScript使用數(shù)據(jù)綁定實現(xiàn)一個簡單的 MVVM 庫,感興趣的朋友一起學習吧2016-04-04JS?生態(tài)系統(tǒng)加速Polyfill函數(shù)使用實例探索
這篇文章主要介紹了JS?生態(tài)系統(tǒng)加速Polyfill函數(shù)使用實例探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01JavaScript算法題之如何將一個數(shù)組旋轉(zhuǎn)k步
這篇文章主要給大家介紹了關(guān)于JavaScript算法題之如何將一個數(shù)組旋轉(zhuǎn)k步的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03