欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入淺析knockout源碼分析之訂閱

 更新時間:2016年07月12日 17:07:11   作者:小龍女先生  
Knockout是一款很優(yōu)秀的JavaScript庫,它可以幫助你僅使用一個清晰整潔的底層數(shù)據(jù)模型(data model)即可創(chuàng)建一個富文本且具有良好的顯示和編輯功能的用戶界面。這篇文章主要介紹了knockout源碼分析之訂閱的相關(guān)資料,需要的朋友可以參考下

Knockout.js是什么?

Knockout是一款很優(yōu)秀的JavaScript庫,它可以幫助你僅使用一個清晰整潔的底層數(shù)據(jù)模型(data model)即可創(chuàng)建一個富文本且具有良好的顯示和編輯功能的用戶界面。任何時候你的局部UI內(nèi)容需要自動更新(比如:依賴于用戶行為的改變或者外部的數(shù)據(jù)源發(fā)生變化),KO都可以很簡單的幫你實現(xiàn),并且非常易于維護。

一、主類關(guān)系圖

二、類職責(zé)

2.1、observable(普通監(jiān)控對象類)

observable(他其是一個function)的內(nèi)部實現(xiàn):

1.首先聲明一個名為observable的fn(這個可以說是一個類)

2.增加一個ko惟一的latestValue(最新值)屬性來存儲形參傳入的值

3.如果支持原生__proto__屬性就利用hasOwnProperty來判斷屬性是否存在的方式來繼承,判斷__proto__代碼(在utils類中)

var canSetPrototype = ({ __proto__: [] } instanceof Array);

4.ko.subscribable的fn屬性的init方法對observable進行初始化(主要增加訂閱、發(fā)布相關(guān)屬性)

5.observable再繼承observabelFn相關(guān)屬性和方法(observabelFn包含觀察、值變化前、值變化后的執(zhí)行策略)

// Define prototype for observables
var observableFn = {
'equalityComparer': valuesArePrimitiveAndEqual,
peek: function() { return this[observableLatestValue]; },
valueHasMutated: function () { this['notifySubscribers'](this[observableLatestValue]); },
valueWillMutate: function () { this['notifySubscribers'](this[observableLatestValue], 'beforeChange'); }
};

6.返回observable方法的實現(xiàn)(如果傳入?yún)?shù)就是設(shè)置,無參則是獲?。?/p>

7、此類還提供了hasPrototype(判斷指定實例是否擁有此屬性)、isObservable(判斷指定實例是否為監(jiān)控對象)、isWriteableObservable(是否為可寫的監(jiān)控對象)。

2.2、observableArray(數(shù)組監(jiān)控對象類)

1.先執(zhí)行ko.observable方法,讓其對象變?yōu)橐粋€可監(jiān)控的類(名為result);

2.然后擴展ko.observableArray中的fn對象(ko.observabelArray的fn重寫了數(shù)組相關(guān)的操作方法,如remove、push等)

3.通過extends擴展一個方法(trackArrayChanages,詳細(xì)介紹見2.5)

4.返回擴展好的result對象。

ko.observableArray = function (initialValues) {
initialValues = initialValues || [];
if (typeof initialValues != 'object' || !('length' in initialValues))
throw new Error("The argument passed when initializing an observable array must be an array, or null, or undefined.");
var result = ko.observable(initialValues);
ko.utils.setPrototypeOfOrExtend(result, ko.observableArray['fn']);
return result.extend({'trackArrayChanges':true});
};

2.3、subscribable(訂閱對象類)

1.實現(xiàn)訂閱、發(fā)布的功能模塊,對observable、observableArray來說是必不可少的基類

2.這里有一個subscrible方法,用于對監(jiān)控對象變化的訂閱接口,開發(fā)則可以用此繼切入點

subscribe: function (callback, callbackTarget, event) {
var self = this;
event = event || defaultEvent;
var boundCallback = callbackTarget ? callback.bind(callbackTarget) : callback;
var subscription = new ko.subscription(self, boundCallback, function () {
ko.utils.arrayRemoveItem(self._subscriptions[event], subscription);
if (self.afterSubscriptionRemove)
self.afterSubscriptionRemove(event);
});
if (self.beforeSubscriptionAdd)
self.beforeSubscriptionAdd(event);
if (!self._subscriptions[event])
self._subscriptions[event] = [];
self._subscriptions[event].push(subscription);
return subscription;
}

3.extend:此方法用于添加extends方法加入的擴展類(如observableArray.changeTracking擴展類)

4.extend擴展的方法,會在監(jiān)控對象注冊后立即執(zhí)行,傳入?yún)?shù)為target(當(dāng)前對象)、options(extend調(diào)用時傳入的參數(shù))

5.extend就是安裝擴展的方法,他會立即執(zhí)行擴展中的代碼。

2.4、extends(擴展監(jiān)控對象類)

1.ko默認(rèn)的擴展集合

2.提供一個applyExtenders方法來安裝擴展

function applyExtenders(requestedExtenders) {
var target = this;
if (requestedExtenders) {
ko.utils.objectForEach(requestedExtenders, function(key, value) {
var extenderHandler = ko.extenders[key];
if (typeof extenderHandler == 'function') {
target = extenderHandler(target, value) || target;
}
});
}
return target;
}

2.5、observableArray.changeTracking(擴展監(jiān)控對象的一個具體實現(xiàn))

1.此擴展主要實現(xiàn)對數(shù)組變化的監(jiān)控,然后計算數(shù)組的差異,以及觸發(fā)相關(guān)的訂閱事件

2.cacheDiffForKnownOperation:緩存對數(shù)組的操作,以備差異比較

3.beforeSubscriptionAdd、afterSubscriptionRemove相關(guān)訂閱(還沒完全理解作用)。

以上所述是小編給大家介紹的深入淺析knockout源碼分析之訂閱,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評論