深入解析JavaScript框架Backbone.js中的事件机制


事件模型及其原理
Backbone.Events就是事件实现的核心,它可以让对象拥有事件能力

var Events = Backbone.Events = { .. }

对象通过listenTo侦听其他对象,通过trigger触发事件。可以脱离Backbone的MVC,在自定义的对象上使用事件

var model = _.extend({},Backbone.Events); var view = _.extend({},Backbone.Events); view.listenTo(model,'custom_event',function(){ alert('catch the event') }); model.trigger('custom_event');

执行结果:

2016214153156830.jpg (644×434)

Backbone的Model和View等核心类,都是继承自Backbone.Events的。例如Backbone.Model:

var Events = Backbone.Events = { .. } var Model = Backbone.Model = function(attributes, options) { ... }; _.extend(Model.prototype, Events, { ... })

从原理上讲,事件是这么工作的:

被侦听的对象维护一个事件数组_event,其他对象在调用listenTo时,会将事件名与回调维护到队列中:

2016214153253355.png (367×193)

一个事件名可以对应多个回调,对于被侦听者而言,只知道回调的存在,并不知道具体是哪个对象在侦听它。当被侦听者调用trigger(name)时,会遍历_event,选择同名的事件,并将其下面所有的回调都执行一遍。

需要额外注意的是,Backbone的listenTo实现,除了使被侦听者维护对侦听者的引用外,还使侦听者也维护了被侦听者。这是为了在恰当的时候,侦听者可以单方面中断侦听。因此,虽然是循环引用,但是使用Backbone的合适的方法可以很好的维护,不会有问题,在后面的内存泄露部分将看到。

另外,有时只希望事件在绑定后,当回调发生后,就接触绑定。这在一些对公共模块的引用时很有用。listenToOnce可以做到这一点

与服务器同步数据
backbone默认实现了一套与RESTful风格的服务端同步模型的机制,这套机制不仅可以减轻开发人员的工作量,而且可以使模型变得更为健壮(在各种异常下仍能保持数据一致性)。不过,要真正发挥这个功效,一个与之匹配的服务端实现是很重要的。为了说明问题,假设服务端有如下REST风格的接口:

GET /resources 获取资源列表

POST /resources 创建一个资源,返回资源的全部或部分字段

GET /resources/{id} 获取某个id的资源详情,返回资源的全部或部分字段

DELETE /resources/{id} 删除某个资源

PUT /resources/{id} 更新某个资源的全部字段,返回资源的全部或部分字段

PATCH /resources/{id} 更新某个资源的部分字段,返回资源的全部或部分字段

backbone会使用到上面这些HTTP方法的地方主要有以下几个:

Model.save() 逻辑上,根据当前这个model的是否具有id来判断应该使用POST还是PUT,如果model没有id,表示是新的模型,将使用POST,将模型的字段全部提交到/resources;如果model具有id,表示是已经存在的模型,将使用PUT,将模型的全部字段提交到/resources/{id}。当传入options包含patch:true的时候,save会产生PATCH。

Model.destroy() 会产生DELETE,目标url为/resources/{id},如果当前model不包含id时,不会与服务端同步,因为此时backbone认为model在服务端尚不存在,不需要删除

Model.fetch() 会产生GET,目标url为/resources/{id},并将获得的属性更新model。

Collection.fetch() 会产生GET,目标url为/resources,并对返回的数组中的每个对象,自动实例化model

Collection.create() 实际将调用Model.save

options参数存在于上面任何一个方法的参数列表中,通过options可以修改backbone和ajax请求的一些行为,可以使用的options包括:

wait: 可以指定是否等待服务端的返回结果再更新model。默认情况下不等待

url: 可以覆盖掉backbone默认使用的url格式

attrs: 可以指定保存到服务端的字段有哪些,配合options.patch可以产生PATCH对模型进行部分更新

patch: 指定使用部分更新的REST接口

data: 会被直接传递给jquery的ajax中的data,能够覆盖backbone所有的对上传的数据控制的行为

其他: options中的任何参数都将直接传递给jquery的ajax,作为其options

backbone通过Model的urlRoot属性或者是Collection的url属性得知具体的服务端接口地址,以便发起ajax。在Model的url默认实现中,Model除了会考察urlRoot,第二选择会是Model所在Collection的url,所有有时只需要在Collection里面书写url就可以了。

Backbone会根据与服务端要进行什么类型的操作,决定是否要添加id在url后面,以下代码是Model的默认url实现:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwyps.html