深入浅析knockout源码分析之订阅

1、深入浅析knockout源码分析之订阅knockout是一款很优秀的javascript库,它可以帮助 你仅使用一个清晰整洁的底层数据模型（datamodel ）即可 创建一个富文本且具有良好的显示和编辑功能的用户界面。 这篇文章主要介绍了 knockout源码分析之订阅的相关资料, 需要的朋友可以参考下 knockout, js 是什么？knockout是一款很优秀的javascript库,它可以帮助 你仅使用一个清晰整洁的底层数据模型（d atamodel）即可 创建一个富文本且具有良好的显示和编辑功能的用户界面。 任何时候你的局部ui内容需要自动更新（比如：依赖于用 户行为的改变或者外部

2、的数据源发生变化），k0都可以很简 单的帮你实现，并且非常易于维护。一、主类关系图二、类职责2.1、observab le （普通监控对象类） observabl e （他其是一个func tion）的内部实现：1. 首先声明一个名为observable的fn （这个可以说是 一个类）2. 增加一个ko惟一的latest value （最新值）属性来存储形参传入的值3如果支持原生proto属性就利用hasownprop erty来判断属性是否存在的方式来继承，判断proto代 码(在ut订s类中)varcansetp rototype= ( _proto_: instanceo farray)

3、;4 . ko. subscri ba.ble 的 fn 属性的init 方法对 obse rvable进行初始化(主要增加订阅、发布相关属性)5. obs ervable再继承o bservabelfn相关属性和方法 (obs ervabelfn包含观察、值变化前、值变化后的执行策 略)/def ineproto typeforobse rvablesvaro bservablefn =j equali tycomparer，: valuesarep rimitiveand equal,pee k:function( ) returnthi sobservabl elatestvalu e;

4、,valuehasmutated:function() this' notifysubscribe rs (this o bservablela testvalue) ;, valuew illmutate:f unction()t his' notify subscribers ' (thisobs ervablelate stvalue,? b eforechange ') ;；6返回observable方法的实现（如果传入参数就是设置，无参则是获取）7、此类还提供了 hasprototy pe （判断指定实例是否 拥有此属性）、isob servable

5、（判断指定实例是否为监控对 象）、iswriteab leobservabl e （是否为可写的监控对象）。2. 2、ob servablearr ay （数组监控对象类）1先执行ko. o bservable方法，让其对象变为一个可 监控的类（名为resul t）；2.然后扩展ko. observab learray中的fn对象 （ko. obser vabelarray的fn重写了数组相关的操作方法， 如i remove、push 等）3 通过 ext ends 扩展一个方法（tracka rraychanage s, 详细介绍见2. 5）4.返回扩展好的res ult对象。ko. obs

6、ervoblea rray=functi on （initialv alues） in itialvalues =initialval ues | | ;i f（ty peof ini ti alvalues!二'object' | ! （' length，i ninitialval ues）thro wnewerror （ theargument passedwheni nitializing anobservabl earraymustb eanarray,or null, orunde fined“）；varresuit二k o. observabl e （ini

7、tialva lues）;ko. utils.setpr ototypeofor extend （resuit, ko. obser vablearray fn );returnresuit.extend(，tr ackarraychanges' :true);2. 3、s ubscribable (订阅对象类)1实现订阅、发布的功能模块，对observab le> observab learray来说是必不可少的基类2.这里有一个subscri ble方法，用于对监控对象变化 的订阅接口，开发则可以用此继切入点subscribe: function(ca llback, cal

8、l backtarget, event) vars elf=this;event=event |defaultev ent;varbo undcallback =callbackta rget?callba ck. bind (cal ibacktarget ) : callback;varsubscr iption二newk o. subscript ion (self,bo undcallback , function() ko.utils . arrayremov eltem(self. _subscripti onsevent, subscriptio n);if (sei f. af

9、tersubs criptionrem ove)seif. aftersubscr iptionremov e (event);)；if (seif beforesubsc riptionadd)seif. befo resubscript ionadd(even t);if (! se if. _subscri ptions even t)seif. .subscriptio ns event=;seif._s ubscription sevent.pu sh(subscrip tion); retur nsubscripti on;3. ext end：此方法用于添加extends方法加入

10、的扩展 类 (女口 obser vablearray. changetrack ing 扩展类)4. extend扩展的方法，会在监控对象注册后立即执行, 传入参数为ta rget (当前对象)、options (ext end调用 时传入的参数)5. extend就是安装扩展的方法，他会立即执行扩展中 的代码。2. 4> extend s (扩展监控对象类)1. ko默认的扩展集合2. 提供一个appl yextenders方法来安装扩展fun ctionapplye xtenders (re questedexte nders) vart arget=this;if (reques

11、tedextender s) ko.uti is.objectfo reach(reque stedextenders,function (key, value) varexten derhandler=ko. extender s key;if (typeofexte nderhandler 二二'function ') target 二extenderha ndler (targe t, value) | 11 arget;);returntarge t;2.5、 ob servablearr ay. changetr acking (扩展监控 对象的一个具体实现)1此扩展主要实现对数组变化的监控，然后计算数组