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>

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

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

c#的事件实现的原理

如果你看了本BLOG写的委托的文章,理解本文应该比较容易,C#中的事件的实现是通过委托直接实现的,所以本文只给出事件实现的代码示例,如果你明白了委托,相信看懂本代码应该不难。 using System...
  • niuyongjie
  • niuyongjie
  • 2006年09月13日 09:35
  • 1885

拖放事件原理及实现详解

移动端现在正是发展高潮期,一说到移动端就会想到的前端技术就是H5啦,它就像一种时尚潮流,now是它的主场,就任性地带着移动端头也不回地走向最高峰~ 最近再写一个简单的图片拖拽上传,所以就给大家说下这个...
  • fatansitic
  • fatansitic
  • 2016年07月18日 19:12
  • 1939

异步事件回调机制原理探索

自定义的异步事件回调机制: 可以在自己的应用程序中,先注册事件和事件对应的回调函数(回调函数可以是函数指针法,虚函数方法的方式);自己程序中每帧检测事件是否发生或者条件是否满足,满足的时候就进入回调函...
  • Blues1021
  • Blues1021
  • 2015年03月15日 12:58
  • 5421

事件原理

var a = document.getElementById("y1");         var b = document.getElementById("b1");         var ...
  • lunwenjun13269950823
  • lunwenjun13269950823
  • 2016年05月02日 13:45
  • 198

UGUI的事件机制

UGUI使用了新的event机制,我们之前在NGUI中,为了处理ui的交互,通常是在ui组件挂载的mono上写onclick(),onpress()这些函数,换到ugui后,unity使用了新的eve...
  • leonwei
  • leonwei
  • 2016年06月16日 20:28
  • 2402

netty之事件驱动原理

Netty使用了异步的事件驱动模型,来触发网络I/O的各种操作,其在socket层上面封装一层异步事件驱动模型,使得业务代码不需要关心网络底层,就可以编写异步的无网络I/O阻塞的代码。 ...
  • qq_26562641
  • qq_26562641
  • 2015年12月24日 09:47
  • 4433

js自定义事件及事件交互原理概述(一)

在JS中事件是JS与浏览器交互的主要途径。事件是一种叫做观察者的设计模式,这是一种创建松散耦合代码的技术。对象可以发布事件,用来表示在该对象生命周期中某个有趣的时刻到了。然后其他对象可以观察该对象,等...
  • SeedCoding
  • SeedCoding
  • 2016年07月05日 16:55
  • 566

js事件冒泡原理

就是当设定了多个div的嵌套时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作。但是父div的onclick事...
  • u013337743
  • u013337743
  • 2015年03月03日 23:18
  • 1299

JS事件发布和订阅的原理

我是小白 学过nodeJS的人, 对eventEmmit这个包应该很熟悉吧…它采用的是事件发布和订阅模式. eventEmmit可以自定义事件名, 并跟某些特定的元素绑定. 而本文抛弃nodeJS包...
  • gong_zhe_511
  • gong_zhe_511
  • 2017年06月21日 16:49
  • 415

Spring3.2.6中事件驱动模型实现原理深入源码分析

Spring3.2.6中事件驱动模型实现原理深入源码分析本次学习,是在新入公司熟悉项目时候开始的。因为是做页游的项目,所以涉及到gameServer做会将游戏中的业务操作日志交给logServer处理...
  • u011066648
  • u011066648
  • 2016年03月28日 19:56
  • 1768
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Backbone-02事件原理
举报原因:
原因补充:

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