Backbone-02事件原理

原创 2016年06月01日 15:45:03

一、事件模型及其原理

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 学习笔记 02 库函数Collections类

backbone个人学习笔记,有错希望大家指出。

Backbone.js的事件绑定

  • 2016年12月01日 13:27
  • 1.19MB
  • 下载

简说一下coffeescript的constructor是如何导致Backbone.View的事件无法正常工作的.

深刻理解coffeescript的继承过程中,constructor,super的误用导致Backbone.View的events未正常注册而事件无效。...

Backbone入门指南(三):Events(事件管理)

6. Events (事件管理)   从这一章开始,我将正式介绍Backbone的内容,过程中会有许多例子和代码,你应该将这些代码复制到你的页面,并查看它们的运行效果。   我介绍的第一个模块是B...

Backbone事件模块及其用法

事件模块Backbone.Events在Backbone中占有十分重要的位置,其他模块Model,Collection,View所有事件模块都依赖它。通过继承Events的方法来实现事件的管理,可以说...

Backbone的事件模块

Backbone的事件模块标签(空格分隔): backbone.js mvc event事件(events)模块是backbone的核心模块之一,model,view,collection等都是继...

android-02-UI基本组件及事件处理.ppt

  • 2014年11月02日 18:18
  • 1001KB
  • 下载

[js点击]JavaScript之触摸事件之touch.js详解02

touchjs插件介绍1.Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具. 2.Touch.js的代码已托管于github并开源,希望...

快速开发之02——textview能有点击事件发生

有时候点击不止只有Button组件有,为了美观 text
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Backbone-02事件原理
举报原因:
原因补充:

(最多只允许输入30个字)