诗未冷的专栏

编程专栏

Backbone-02事件原理

一、事件模型及其原理

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>

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

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

阅读更多
个人分类: 物联网
上一篇Backbone-01基础
下一篇Backbone-03集合和路由
想对作者说点什么? 我来说一句

C#事件与引用闹钟

2011年09月27日 1.04MB 下载

没有更多推荐了,返回首页

关闭
关闭