Backbone事件模块及其用法

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

此外,事件模块的所有方法都挂在了全局的Backbone上,如果你的代码中需要用到自定义事件(实现观察者模式),可以直接使用它。

一、Events API

1.0之前只提供了三个基本方法 on/once/off/trigger,1.0开始增加了几个实用方法 listenTo/listenToOnce/stopListening。

以下是各个方法的意义

  1. on 添加自定义事件
  2. off 删除自定义事件
  3. trigger 派发自定义事件
  4. once 添加只执行一次的自定义事件 (内部依赖于_.once)
  5. listenTo 添加一个观察对象
  6. listenToOnce 添加一个仅执行一次的观察对象
  7. stopListening 删除添加的观察对象

二、基本事件方法

1.绑定 on方法

使用on方法可以给一个对象的自定义事件绑定触发该事件时执行的函数,当自定义的事件触发时,绑定的函数将会被执行。其调用格式如下:

obj.on(eventName, function, [context])

其中,参数Obj表示对象本身;eventName表示自定义事件的事件名;function表示当事件触发时被执行的函数;可选参数context表示上下文对象,用于对象级事件的监听,即当一个对象需要监听另一个对象的事件时,可以使用该参数。

使用on方法不仅可以绑定用户的自定义事件,可以直接监听对象自带的一些事件,下面通过一些简单示例来演示具体使用过程。

示例1:使用on方法监听默认事件

var Person = Backbone.Model.extend({
    defaults : {
        name : "",
        sex : ""
    }
});
var man = new Person();
man.on(‘change‘, function () {
    console.log(‘对象的默认值发生了变化‘);
});
man.set(‘name‘, ‘breezefeng‘);

在上述代码中,首先定义一个名称为Person的数据模型类。在定义时,通过defaults参数设置两个名为“name” 和 “sex” 的默认数据项。然后,实例化一个名为man的模型类对象,并使用on方法向该对象绑定触发change事件时执行的函数,即只要对象的属性值发生变化,将会触发change事件。

示例2:使用on方法监听属性事件

var Person = Backbone.Model.extend({
    defaults : {
        name : "",
        sex : "女"
    }
});
var man = new Person();
man.on(‘change‘, function () {
    console.log(‘对象的默认值发生了变化‘);
});
man.on(‘change:sex‘, function (model, value) {
    console.log(‘你修改了性别属性值,最新值是:‘ + value)
});
man.set(‘sex‘, ‘男‘);

在上述代码中,分别给man对象绑定了两个事件,一个是默认事件change,另一个是属性事件change:sex,即sex属性变化事件。在属性变化事件的回调函数中,通过回传的value参数获取最新修改后的属性值。

示例3:使用on方法获取属性修改前的值

在使用on方法绑定change和change属性事件时,还可以通过回调函数中的model对象获取属性修改前的所有值,如下所示:

model.previous(‘attrName‘)  //用于获取对象中某个属性的原有值

model.previousAttributes()  //返回一个对象,保存上一个状态的所有属性的原有值

var Person = Backbone.Model.extend({
    defaults : {
        name : "",
        sex : "女",
        age : 32,
        score : 120
    }
});
var man = new Person();
man.on(‘change:score‘, function (model, value) {
    var oldScore = model.previous(‘score‘);
    if (value > oldScore) {
        console.log(‘你比上次进步了‘ + (value - oldScore) + ‘分‘);
    } else if (value < oldScore) {
        console.log(‘你比上次落后了‘ + (oldScore - value) + ‘分‘);
    } else {
        console.log(‘你的成绩没有变化‘);
    }
});
man.on(‘change:age‘, function (model, value) {
    var objAttr = model.previousAttributes();
    var oldAge = objAttr.age;
    if (value > oldAge) {
        console.log(‘你又长大了‘ + (value - oldAge) + ‘岁‘);
    } else if (value < oldAge) {
        console.log(‘你又年轻了‘ + (oldAge - value) + ‘岁‘);
    } else {
        console.log(‘你的年龄没有变化‘);
    }
});
man.set({
    age : ‘36‘,
    score : 200
});

在上述代码中,通过使用on方法分别绑定对象man的change:score 和 change:age两个属性事件。

在第一个属性事件change:score 中,通过回调函数中model模型对象的previous方法,获取上一次保存的score属性值。

在第二个属性事件change:age 中,通过回调函数中model模型对象的previousAttributes方法,获取上一次保存结果的对象,并将对象保存至变量objAttr中,再通过访问对象变量objAttr的方式获取上一次保存的age属性值。

示例4:使用on方法绑定多个事件

    在Backbone中,除了使用on方法绑定单个对象的事件,还可以使用该方法同时绑定多个对象的事件。绑定的格式有两种,第一种为各个事件使用空格隔开,格式如下:

obj.on("eventName1 eventName2", function)

其中,使用空格隔开的参数eventName1 和 eventName2 表示被绑定的多个事件名称,function表示所有被绑定事件都要执行的自定义函数。

第一种绑定方式代码:

var Person = Backbone.Model.extend({
    defaults : {
        name : "",
        sex : "女",
        age : 32,
        score : 120
    }
});
var man = new Person();
man.on(‘change:score change:age‘, function (model, value) {
    var oldAge = model.previous(‘age‘);
    var newAge = model.get(‘age‘);
    if (oldAge != newAge) {
        console.log(‘age原值:‘ + oldAge + ‘, 新值:‘ + newAge);
    }

    var oldScore = model.previous(‘score‘);
    var newScore = model.get(‘score‘);
    if (oldScore != newScore) {
        console.log(‘score原值:‘ + oldScore + ‘, 新值:‘ + newScore);
    }
});

man.set(‘age‘, 36);
man.set(‘score‘, 200);

在使用on方法绑定事件中,有两种格式可以绑定多个事件,除第一种使用空格之外,第二种方法为使用对象方式绑定多个事件,格式如下:

var objEvent = {
    eventName1 : function1,
    eventName2 : function2
    ...
};
obj.on(objEvent);

在上述代码中,首先定义一个哈希对象objEvent,并以key/value的方式向该对象批量添加各个事件名称和要执行的事件函数,然后通过使用on方法绑定哈希对象即可。

接下来将第一种使用空格方式绑定多个事件的代码修改成使用哈希对象绑定多个事件功能,修改代码如下:

var Person = Backbone.Model.extend({
    defaults : {
        name : "",
        sex : "女",
        age : 32,
        score : 120
    }
});
var man = new Person();
var objEvent = {
    ‘change:score‘ : score_change,
    ‘change:age‘ : age_change
};
man.on(objEvent);
function score_change (model, value) {
    var oldScore = model.previous(‘score‘);
    var newScore = model.get(‘score‘);
    if (oldScore != newScore) {
        console.log(‘score原值:‘ + oldScore + ‘, 新值:‘ + newScore);
    }
}
function age_change (model, value) {
    var oldAge = model.previous(‘age‘);
    var newAge = model.get(‘age‘);
    if (oldAge != newAge) {
        console.log(‘age原值:‘ + oldAge + ‘, 新值:‘ + newAge);
    }
}
man.set({
    age : 36,
    score : 200
});

2.绑定一次 once方法

在Backbone中,除使用on方法可以绑定对象的事件之外,还可以使用once完成对象事件的绑定,只不过once方法绑定的事件只执行一次,之后即使触发也不执行,其调用格式如下:

obj.once(eventName, function, [context])

示例代码如下:

var Person = Backbone.Model.extend({
    defaults : {
        name : "",
        sex : "女",
        age : 32,
        score : 120
    }
});
var man = new Person();
var intNum = 0;
man.once(‘change‘, function () {
    intNum++;
    console.log(‘事件触发的次数为 : ‘ + intNum);  //1
});
man.set(‘age‘, 36);
man.set(‘age‘, 37);

最终intNum打印出1,说明绑定的事件函数只执行了一次。

3.触发事件 trigger方法

trigger也是Backbone事件API中的一个重要方法,它的功能是触发对象的某一个事件,其调用格式如下:

obj.trigger(eventName)

使用trigger方法可以手动触发对象的任何事件,不仅是系统自带的系统事件,还可以是自定义事件。示例代码如下:

var Person = Backbone.Model.extend({
    defaults : {
        name : "",
        sex : "女",
        age : 32,
        score : 120
    }
});
var man = new Person();
man.on(‘change_age_sex‘, function () {
    console.log(‘你手动触发了一个自定义事件‘);
});
man.on(‘change:age‘, function (model, value) {
    if (value != undefined) {
        console.log(‘你修改后的年龄为 : ‘ + value);
    } else {
        console.log(‘你手动触发了一个年龄修改事件‘);
    }
});
man.trigger(‘change_age_sex‘);
man.trigger(‘change:age‘);
man.set(‘age‘, 36);

不难看出,trigger方法的功能就是手动执行对象绑定的事件,类似于自定义一个函数后,调用该事件名。因此,该方法就是执行事件,不论该事件是自定义的还是系统自带的。

4.移出事件 off方法

在Backbone中,与绑定事件的on方法相对的是移除事件的off方法,该方法的功能是移除对象中已绑定的某个、多个或全部的时间,其调用格式如下:

obj.off(eventName, function, [context])

示例1:使用off方法移出对象的某个或多个绑定事件

在Backbone中,如果要移除对象的某个绑定事件,可以调用对象的off方法,指定需要移除的事件名称;如果有多个事件名称,则用空格隔开。

var Person = Backbone.Model.extend({
    defaults : {
        name : "",
        sex : "女",
        age : 32,
        score : 120
    }
});
var man = new Person();
var m = 0, n = 0;
var callback_a = function () {
    m++;
    console.log(‘你执行事件的次数为:‘ + m);
};
var callback_b = function () {
    n++;
    console.log(‘你执行事件的次数为:‘ + n)
};
man.on(‘event_a‘, callback_a);
man.on(‘event_b‘, callback_b);
man.off(‘event_a‘);
man.trigger(‘event_a event_b‘);
man.off(‘event_a event_b‘);
man.trigger(‘event_a event_b‘);

示例2:使用off方法移除绑定事件的某个函数

在Backbone中,不仅可以调用对象的off方法移除已绑定的一个或多个事件,还可以移除绑定事件执行的某个函数。

var Person = Backbone.Model.extend({
    defaults : {
        name : "",
        sex : "女",
        age : 32,
        score : 120
    }
});
var man = new Person();
var m = 0, n = 0;
var callback_a = function () {
    m++;
    console.log(‘你执行事件的次数为:‘ + m);
};
var callback_b = function () {
    n++;
    console.log(‘你执行事件的次数为:‘ + n)
};
man.on(‘event_a‘, callback_a);
man.on(‘event_b‘, callback_b);
man.off(‘event_a‘, callback_a);
man.trigger(‘event_a event_b‘);
man.off(‘event_b‘, callback_b);
man.trigger(‘event_a event_b‘);

示例3:使用off方法移除对象的全部绑定事件

在Backbone中,对象的off方法除了可以移除某个或多个事件、事件执行函数外,还可以通过不带参数的方式移除全部已绑定的事件,其调用格式如下:

obj.off()

var Person = Backbone.Model.extend({
    defaults : {
        name : "",
        sex : "女",
        age : 32,
        score : 120
    }
});
var man = new Person();
var m = 0, n = 0;
var callback_a = function () {
    m++;
    console.log(‘你执行事件的次数为:‘ + m);
};
var callback_b = function () {
    n++;
    console.log(‘你执行事件的次数为:‘ + n)
};
man.on(‘event_a‘, callback_a);
man.on(‘event_b‘, callback_b);
man.off();
man.trigger(‘event_a event_b‘);

三、新增事件方法

1.监听事件 listenTo方法

相对于对象的on方法而言,listenTo方法的监听效果更为突出,它是一个对象监听另一个对象的事件,如果被监听对象触发了被监听的事件,执行相应的回调函数或代码块。例如,view对象要监听model对象的change事件,如果model对象触发了change事件,则需要刷新当前view对象,即执行下列监听方法的代码:

view.listenTo(model, ‘change‘, view.render)

上面监听方法也等价于如下代码:

model.on(‘change‘, view.render, view)

其中,第三个参数为上下文环境对象,此时它的值为view,即model对象在触发change事件时,关联view对象进行执行view.render动作。

通过上述对listenTo方法的简单介绍,我们知道它是一个对象级别的事件监听方法,即在执行该方法时,必须要有两个对象,其调用格式如下:

obj1.listenTo(obj2, eventName, function

其中,参数obj1,obj2都为对象,参数eventName是obj2对象触发的事件名称,参数function为当obj2触发指定的eventName事件时,obj1所执行的自定义函数。

var Person = Backbone.Model.extend({
    defaults : {
        name : "",
        sex : "女",
        age : 32,
        score : 120
    }
});
var man = new Person();
var obj = _.extend({}, Backbone.Events);
obj.listenTo(man, ‘change:age‘, function (model, value) {
    var oldAge = model.previous(‘age‘);
    var newAge = model.get(‘age‘);
    if (oldAge != newAge) {
        console.log(‘age原值:‘ + oldAge + ‘, 新值:‘ + newAge);
    }
});
man.set(‘age‘, 36);

2.监听一次 listenToOnce方法

在BackBone中listenTo方法 和 listenToOnce方法调用方式完全一致,唯一区别是前者是一个对象一直监听另一个对象事件的触发,而后者是仅监听一次。

var Person = Backbone.Model.extend({
    defaults : {
        name : "",
        sex : "女",
        age : 32,
        score : 120
    }
});
var man = new Person();
var obj = _.extend({}, Backbone.Events);
var intNum = 0;
obj.listenToOnce(man, ‘change:age‘, function (model, value) {
    intNum++;
    console.log(‘事件触发的次数为:‘ + intNum);
});
man.set(‘age‘, 36);
man.set(‘age‘, 37);

3.停止监听 stopListening方法

在Backbone中,与单个对象的off方法相同,对象级别的事件监听也有停止方法,即stopListening方法,其调用格式如下:

obj1.stopListening(obj2, eventName, function)

var Person = Backbone.Model.extend({
    defaults : {
        name : "",
        sex : "女",
        age : 32,
        score : 120
    }
});
var man = new Person();
var obj = _.extend({}, Backbone.Events);
obj.listenTo(man, ‘change:name‘, function (model, value) {
    console.log(‘姓名修改后的值为:‘ + value);
});
obj.listenTo(man, ‘change:age‘, function (model, value) {
    console.log(‘年龄修改后的值为:‘ + value);
});
obj.listenTo(man, ‘change:score‘, function (model, value) {
    console.log(‘分数修改后的值为:‘ + value);
});
//停止监听某一个事件
obj.stopListening(man, ‘change:name‘);
man.set(‘name‘, ‘张三‘);
man.set(‘age‘, 35);
man.set(‘score‘, 600);
//停止监听两个事件
obj.stopListening(man, ‘change:name change:age‘);
man.set(‘name‘, ‘李四‘);
man.set(‘age‘, 36);
man.set(‘score‘, 601);
//停止监听全部事件
obj.stopListening();
man.set(‘name‘, ‘王五‘);
man.set(‘age‘, 37);
man.set(‘score‘, 602);

以上就是Backbone.Events模块所有API的使用,欢迎留言讨论~

时间: 2024-10-12 20:28:02

Backbone事件模块及其用法的相关文章

Backbone事件模块源码分析

事件模块Backbone.Events在Backbone中占有十分重要的位置,其他模块Model,Collection,View所有事件模块都依赖它.通过继承Events的方法来实现事件的管理,可以说,它是Backbone的核心组成部分. 此外,事件模块的所有方法都挂在了全局的Backbone上,如果你的代码中需要用到自定义事件(实现观察者模式),可以直接使用它. 所以很有必要一起来研究下Backbone.Events的源码,一来学习Backbone事件模块优秀的写法和思想,二来可以更好的灵活使

Backbone源码解读(一)事件模块

Backbone源码浅读: 前言: Backbone是早起的js前端MV*框架之一,是一个依赖于underscore和jquery的轻量级框架,虽然underscore中基于字符串拼接的模板引擎相比如今基于dom元素双向绑定的模板引擎已显得落伍,但backbone作为引领前端mv*开发模式的先驱之一,依然是麻雀虽小却设计精妙,了解其设计与结构对于想一探mv*框架的初学者来说仍会获益匪浅. Backbone结构: Backbone分为几个部分:其中最核心的是Event事件模块,提供了实现事件与观察

Backbone事件管理——Backbone.Events模块API结构

模块Backbone.Events的事件管理是通过Backbone提供的Events API来实现的,该API在1.0版本之前仅仅提供了几个基本的方法,如on.off.trigger.once分别执行对事件的绑定.解除绑定.执行事件.执行一次事件的操作.从1.0版本以后,又添加了几个实用方法,如listenTo.listenToOnce.stopListening,分别执行添加一个事件的侦察对象.添加一个仅执行一次的事件侦察对象和移除已添加的事件侦察对象,其完整的结构如图3-1所示. Backb

nodejs -- event 模块, 事件模块.

1. 注册事件 on 或者 addListener,触发事件 emit 1-1简单的使用: 1 var EventEmitter = require('events').EventEmitter; 2 3 var life = new EventEmitter(); 4 5 //求安慰: 6 7 8 function water(who){ 9 console.log('给 ' +who+ ' 倒水'); 10 } 11 //具名函数 12 life.addListener('求安慰', wat

jQuery源代码学习之九—jQuery事件模块

jQuery事件系统并没有将事件坚挺函数直接绑定在DOM元素上,而是基于事件缓存模块来管理监听函数的. 二.jQuery事件模块的代码结构 //定义了一些正则 // // //jQuery事件对象 jQuery.event={ global:{}, add:function(elem,types,handle,data,selector){}, remove:function(elem,types,handler,selector,mapppedTypes){}, trigger:functio

python之模块py_compile用法(将py文件转换为pyc文件)

# -*- coding: cp936 -*- #python 27 #xiaodeng #python之模块py_compile用法(将py文件转换为pyc文件) #二进制文件,是由py文件经过编译后,生成的文件. ''' import py_compile #不带转义r py_compile.compile('D:\test.py') Traceback (most recent call last): File "<pyshell#1>", line 1, in &l

关于js封装框架类库之事件模块

在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 例如: 鼠标操作点击事件时,事件对象中会获得鼠标的按键信息等,会提示按的哪一个键 获得鼠标按键属性button和which 鼠标左中右按键分别对应:在谷歌浏览器中   button:左键 0 右键 2 中键 1  ,which:左键 1 右键 3 中键 2 ie8及以下:左键 1 右键 2 中键 4,which属性不存在 用户在操作键盘时,

Nginx 事件模块

概述 Nginx 是以事件的触发来驱动的,事件驱动模型主要包括事件收集.事件发送.事件处理(即事件管理)三部分.在Nginx 的工作进程中主要关注的事件是 IO 网络事件 和 定时器事件.在生成的 objs 目录文件中,其中ngx_modules.c 文件的内容是 Nginx 各种模块的执行顺序,我们可以从该文件的内容中看到事件模块的执行顺序为以下所示:注意:由于是在 Linux 系统下,所以支持具体的 epoll 事件模块,接下来的文章结构按照以下顺序来写. extern ngx_module

nginx学习笔记五(nginx的事件模块定义)

在linux后台服务器开发领域里面,epoll的大名是早有所闻.<深入理解nginx>一书在第9章-事件模块中就详细说明了epoll相关的系统调用是怎么嵌入到nginx的框架中. 下面说明nginx框架下与事件处理相关的一些模块. 一.ngx_events_module ngx_events_module是核心模块中的一种.之前一直不是很明白核心模块的意思,现在想来,事件模块的核心模块应该是第一个启动的与事件相关的模块.这个模块并不会去处理实际的事件业务,而是会去做一些基本的初始化操作.ngx