Knockout.js是什么

击倒是一个优秀的Javascript库。它可以帮助您创建一个文本丰富的用户界面,具有良好的显示和编辑功能,使用干净整洁的数据数据模型。任何时候,您的本地UI内容都需要自动更新(例如,取决于用户行为变化或外部数据源更改)。KO可以简单地为你实现,而且很容易维护。

1。大师级的图


两。类的责任



2.1,可观察的(普通监视对象类)



可观察到的内部实现(他是一个函数):

1。首先,声明一个名为可观察的FN(这可以说是一个类)。

2。添加Ko unique latestValue(新值)属性来存储传入的参数值

三.如果本地__proto__属性由hasownproperty支持确定属性是否存在的判断,__proto__代码(在工具类)

Var(cansetprototype = { } { }:__proto__ instanceof Array);

对4.ko.subscribable FN属性init方法初始化观测(主要是增加订阅和发布相关的属性)

5.observable继承observabelfn相关的属性和方法(observabelfn包含经过观察,执行战略价值的变化,价值的变化)




用于观测值的原型
无功observablefn = { {
equalitycomparer:valuesareprimitiveandequal,
皮克:函数(){ return这个observablelatestvalue } {;},
valuehasmutated:函数(){ { 'notifysubscribers(这observablelatestvalue } { });},
valuewillmutate:函数(){ { 'notifysubscribers(这observablelatestvalue } { },'beforechange ');}
};


6。返回可观察方法的实现(如果传入参数已设置,则不获得引用)

7、该类还提供hasprototype(决定是否指定的实例有此属性),观测(确定是否指定实例的监控对象),和iswriteableobservable(无论它是一个可写的监控对象)。



2.2、observablearray(阵列监测对象类)



1。首先,该方法执行ko.observable改变其对象为监测类(命名为结果)。

2。然后扩展FN对象ko.observablearray(KO。observabelarray的FN改写阵列相关的操作,如删除,推,等)

三.方法通过扩展延伸(trackarraychanages,看到2.5了)

4。返回扩展结果对象。




ko.observablearray =功能(初值){
每次| =初值| { };
如果(typeof计算= 'object| |!!('length在计算))
抛出新错误(初始化可观察数组时必须传递的参数);
VaR结果= ko.observable(基础);
Ko.utils.setPrototypeOfOrExtend(结果,KO。observablearray { 'fn});
返回result.extend({ 'trackarraychanges:真});
};


2.3、订阅(订阅对象类)



1。订阅与发布功能模块是可观察的和observablearray基础课

2。这里是订阅界面来监控对象变化的捐款方法,开发可用于后续的切入点




订阅:函数(回调,callbacktarget,事件){
var =;
事件=事件defaultevent | |;
无功boundcallback = callbacktarget callback.bind(callbacktarget):回调;
VaR订阅=新ko.subscription(自我,boundcallback,函数()){
ko.utils.arrayremoveitem(自我。_subscriptions {事件},订阅);
如果(自我。aftersubscriptionremove)
Self.afterSubscriptionRemove(事件);
});
如果(自我。beforesubscriptionadd)
Self.beforeSubscriptionAdd(事件);
如果(!自_subscriptions {事件})。
自我。_subscriptions {事件} = { };
自我。_subscriptions {事件}。推(订阅);
返回的订阅;
}


3.extend:此方法用于添加扩展的类(如observablearray.changetracking扩展类)添加到扩展方法。

4.extend扩展的方法将监控对象注册后立即执行,和传入的参数是目标(对象)和选项(扩展的输入参数)。

5.extend是安装和扩展的方式,他会立即在推广执行代码。

2.4,扩展(扩展监视器对象类)



1.ko默认扩展集

2。安装的扩展提供了一个applyextenders方法




功能applyextenders(requestedextenders){
var目标=;
如果(requestedextenders){
ko.utils.objectforeach(requestedextenders,功能(键,值){
无功extenderhandler = KO。填充剂{key};
如果(typeof extenderhandler = = 'function){
目标= extenderhandler(目标值)| |目标;
}
});
}
将目标;
}


2.5、observablearray.changetracking(具体实施扩展监控对象)



1。此扩展主要实现对数组更改的监视,然后计算数组中的差异,并触发相关的订阅事件。



2.cachediffforknownoperation:缓存为数组进行比较操作



3.beforesubscriptionadd,aftersubscriptionremove相关订阅(不清楚)。



以上是对淘汰赛分析的订阅,希望对您有所帮助。如果你有任何问题,请给我留言。萧边会及时回复你。谢谢你的支持网站。