深入浅析knockout源码分析之订阅
Knockout.js是什么？
Knockout是一款很优秀的JavaScript库，它可以帮助你仅使用一个清晰整洁的底层数据模型（data model）即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新（比如：依赖于用户行为的改变或者外部的数据源发生变化），KO都可以很简单的帮你实现，并且非常易于维护。
一、主类关系图
二、类职责
2.1、observable（普通监控对象类）
observable（他其是一个function）的内部实现：
1.首先声明一个名为observable的fn（这个可以说是一个类）
2.增加一个ko惟一的latestValue（最新值）属性来存储形参传入的值
3.如果支持原生__proto__属性就利用hasOwnProperty来判断属性是否存在的方式来继承，判断__proto__代码（在utils类中）
var canSetPrototype = ({ __proto__: [] } instanceof Array);
4.ko.subscribable的fn属性的init方法对observable进行初始化（主要增加订阅、发布相关属性）
5.observable再继承observabelFn相关属性和方法（observabelFn包含观察、值变化前、值变化后的执行策略）
// 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方法的实现（如果传入参数就是设置，无参则是获取）
7、此类还提供了hasPrototype（判断指定实例是否拥有此属性）、isObservable（判断指定实例是否为监控对象）、isWriteableObservable（是否为可写的监控对象）。
2.2、observableArray（数组监控对象类）
1.先执行ko.observable方法，让其对象变为一个可监控的类（名为result)；
2.然后扩展ko.observableArray中的fn对象（ko.observabelArray的fn重写了数组相关的操作方法，如remove、push等）
3.通过extends扩展一个方法(trackArrayChanages，详细介绍见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.实现订阅、发布的功能模块，对observable、observableArray来说是必不可少的基类
2.这里有一个subscrible方法，用于对监控对象变化的订阅接口，开发则可以用此继切入点
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扩展的方法，会在监控对象注册后立即执行，传入参数为target（当前对象）、options（extend调用时传入的参数）
5.extend就是安装扩展的方法，他会立即执行扩展中的代码。
2.4、extends（扩展监控对象类）
1.ko默认的扩展集合
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（扩展监控对象的一个具体实现）
1.此扩展主要实现对数组变化的监控，然后计算数组的差异，以及触发相关的订阅事件
2.cacheDiffForKnownOperation：缓存对数组的操作，以备差异比较
3.beforeSubscriptionAdd、afterSubscriptionRemove相关订阅（还没完全理解作用）。
以上所述是小编给大家介绍的深入浅析knockout源码分析之订阅，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
想必大家对窗口抖动一词并不陌生吧，其实原理很简单，下面为大家简单介绍下js中时如何实现的，喜欢的朋友可以参考下2013-09-09
这篇文章主要为大家详细介绍了javascript实现图片预加载和懒加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
javascript 实现滚动效果代码整理，需要的朋友可以参考下。2010-03-03
浏览器加载、渲染和解析过程的黑箱分析,对于渲染，利用 Fiddler 将网速调慢，可以看到 css 下载后会马上渲染到页面，渲染和下载同步进行,需要的朋友可以参考下2012-11-11
这篇文章主要介绍了ES6函数实现排它两种写法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
现在有一段12行的JavaScript代码，可以让firefox、chrome、safari浏览器崩溃，而且还能让iphone重启、安卓闪退，本文作者对于该12行代码进行了分析解读并且提出了相应的防御办法，欢迎大家一同探讨。有需要的朋友们可以参考借鉴。2016-10-10
我们已经知道，null 没有任何的属性值，并且无法获取其实体（existence）值。所以 null.property 返回的是错误（error）而不是 undefined 。2008-09-09
这篇文章主要介绍了详解小程序原生使用ES7 async/await语法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了前端解决滚动穿透问题的五种常见方法,并详细分析了它们的优缺点和适用场景,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-03-03
菜单效果...2006-10-10
最新评论