关闭

[置顶] Backbone-02事件原理

标签: backboneEventsBackbone事件原理和模型
323人阅读 评论(0) 收藏 举报
分类:

一、事件模型及其原理

Backbone.Events就是事件实现的核心,它可以让对象拥有事件能力
var Events = Backbone.Events = { .. }
对象通过listenTo侦听其他对象,通过trigger触发事件。可以脱离Backbone的MVC,在自定义的对象上使用事件

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

源码分析如下:
这里写图片描述

这里写图片描述

这里写图片描述

从上面的图可以看出,Model类、View类和Collection类之所以具有事件能力,是通过如下的代码来实现的:

_.extend(类名.prototype,Backbone.Events,{...});

二、示例

知道了如何让一个类具有事件能力,下面自定义类来测试一下。

1.同一个类的两个对象相互监听

model与model之间的监听

<!DOCTYPE html>
<html>
<head>
    <script src="underscore.js"></script>
    <script src="jquery.js"></script>
    <script src="backbone.js"></script>
</head>
<body>
    <script type="text/javascript">
    var Cat = function(){
    }
    _.extend(Cat.prototype,Backbone.Events);
    var tom = new Cat();
    var jerry = new Cat();
    jerry.listenTo(tom, 'run', function(){
        console.log('run');
    });
    </script>
</body>
</html>

浏览器测试:
这里写图片描述

2.两个不同类的对象相互监听

类似view和model之间的监听

<!DOCTYPE html>
<html>
<head>
    <script src="underscore.js"></script>
    <script src="jquery.js"></script>
    <script src="backbone.js"></script>
</head>
<body>
    <script type="text/javascript">
    var tom = {
    }
    _.extend(tom, Backbone.Events);
    var jerry = {
    }
    _.extend(jerry, Backbone.Events);
    jerry.listenTo(tom, 'run', function(){
        console.log('run');
    });
    </script>
</body>
</html>

浏览器测试:
这里写图片描述

通过测试,发现让一个类具有事件能力的做法很简单。
待继续总结…

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:127088次
    • 积分:2334
    • 等级:
    • 排名:第16633名
    • 原创:108篇
    • 转载:8篇
    • 译文:1篇
    • 评论:15条
    最新评论