金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > js使用场景,js观察者模式学习总结

js使用场景,js观察者模式学习总结

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-09 19:49

座谈 JavaScript 的观看者方式(自定义事件卡塔 尔(英语:State of Qatar)

金沙棋牌官方平台,2016/08/25 · JavaScript · 观望者方式, 设计形式

本文我: 伯乐在线 - winty 。未经作者许可,避免转发!
招待参预伯乐在线 专辑我。

萧萧,明天到位了多个笔试,里面有风流倜傥到JS编制程序题,那个时候瞅着难点就蒙圈。后来钻探了后生可畏晃,原本就是所谓的观看者方式。就记下来 ^_^

题目

JavaScript

[附加题] 请完结上面包车型客车自定义事件 Event 对象的接口,功能见注释(测量检验1) 该 伊夫nt 对象的接口必要能被别的对象进行理并答复用(测验2) // 测量检验1 伊芙nt.on('test', function (result) { console.log(result); }); 伊芙nt.on('test', function () { console.log('test'); }); Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test' // 测量试验2 var person1 = {}; var person2 = {}; Object.assign(person1, 伊夫nt); Object.assign(person2, Event); person1.on('call1', function () { console.log('person1'); }); person2.on('call2', function () { console.log('person2'); }); person1.emit('call1'); // 输出 'person1' person1.emit('call2'); // 未有出口 person2.emit('call1'); // 未有出口 person2.emit('call2'); // 输出 'person2'<br>var 伊夫nt = { // 通过on接口监听事件eventName // 倘使事件eventName被触发,则试行callback回调函数 on: function (eventName, callback) { //你的代码 }, // 触发事件 eventName emit: function (eventName) { //你的代码 } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
[附加题] 请实现下面的自定义事件 Event 对象的接口,功能见注释(测试1)
该 Event 对象的接口需要能被其他对象拓展复用(测试2)
// 测试1
Event.on('test', function (result) {
    console.log(result);
});
Event.on('test', function () {
    console.log('test');
});
Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test'
// 测试2
var person1 = {};
var person2 = {};
Object.assign(person1, Event);
Object.assign(person2, Event);
person1.on('call1', function () {
    console.log('person1');
});
person2.on('call2', function () {
    console.log('person2');
});
person1.emit('call1'); // 输出 'person1'
person1.emit('call2'); // 没有输出
person2.emit('call1'); // 没有输出
person2.emit('call2'); // 输出 'person2'<br>var Event = {
    // 通过on接口监听事件eventName
    // 如果事件eventName被触发,则执行callback回调函数
    on: function (eventName, callback) {
        //你的代码
    },
    // 触发事件 eventName
    emit: function (eventName) {
        //你的代码
    }
};

少了一些没把笔者看晕…

好吧,一步一步来看看怎么回事。

①掌握一下观望者形式

阅览者方式

这是豆蔻年华种创造松散耦合代码的本领。它定义对象间 大器晚成种生龙活虎对多的依附关系,当叁个对象的景观发生改造时,全部依赖于它的靶子都将收获通知。由中央和观看者组成,主体肩负公布事件,同一时候观察者通过订阅那几个事件来考查该中央。主体并不知道观看者的别的专门的学业,观看者知道主体并能注册事件的回调函数。

例子:

即使大家正在开采叁个超级市场网址,网址里有header底部、nav导航、音信列表、购物车等模块。那多少个模块的渲染有五个联合具名的前提条件,就是必得先用ajax异步哀告获取客商的报到音讯。那是很平常的,比方客商的名字和头像要来得在header模块里,而那八个字段都源于客户登陆后回来的音信。当时,大家就足以把那多少个模块的渲染事件都放置几个数组里面,然后待登陆成功之后再遍历这几个数组况兼调用每贰个方法。

基本方式:

JavaScript

function EventTarget(){ this.handlers = {}; } EventTarget.prototype = { constructor: EventTarget, addHandler: function(type, handler){ if (typeof this.handlers[type] == "undefined"){ this.handlers[type] = []; } this.handlers[type].push(handler); }, fire: function(event){ if (!event.target){ event.target = this; } if (this.handlers[event.type] instanceof Array){ var handlers = this.handlers[event.type]; for (var i=0, len=handlers.length; i < len; i++){ handlers[i](event); } } }, removeHandler: function(type, handler){ if (this.handlers[type] instanceof Array){ var handlers = this.handlers[type]; for (var i=0, len=handlers.length; i < len; i++){ if (handlers[i] === handler){ break; } } handlers.splice(i, 1); } } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function EventTarget(){    
    this.handlers = {};
}
EventTarget.prototype = {    
    constructor: EventTarget,
    addHandler: function(type, handler){
         if (typeof this.handlers[type] == "undefined"){
              this.handlers[type] = [];
         }
         this.handlers[type].push(handler);
     },
    fire: function(event){
         if (!event.target){
             event.target = this;
         }
         if (this.handlers[event.type] instanceof Array){
             var handlers = this.handlers[event.type];
             for (var i=0, len=handlers.length; i < len; i++){
                 handlers[i](event);
            }
         }
     },
     removeHandler: function(type, handler){
        if (this.handlers[type] instanceof Array){
            var handlers = this.handlers[type];
            for (var i=0, len=handlers.length; i < len; i++){
                if (handlers[i] === handler){
                    break;
                 }
             }
             handlers.splice(i, 1);
          }
      }
};

大约意思正是,创建叁个风浪微处理器。handles是二个存款和储蓄事件管理函数的对象。

addHandle:是丰硕事件的不二秘籍,该措施选取四个参数,几个是要增多的轩然大波的品类,多少个是以此事件的回调函数名。调用的时候会率先遍历handles这几个目的,看看那么些类型的点子是还是不是业已存在,如若已经存在则增多到该数组,假诺不设有则先创建一个数组然后增进。

fire方法:是试行handles这么些目的里面包车型地铁某部项目标每二个艺术。

removeHandle:是呼应的去除函数的点子。

好啊,回到标题,剖判一下。

②标题中的测量试验生机勃勃:

JavaScript

// 测试1 Event.on('test', function (result) { console.log(result); }); Event.on('test', function () { console.log('test'); }); Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test'

1
2
3
4
5
6
7
8
// 测试1
Event.on('test', function (result) {
    console.log(result);
});
Event.on('test', function () {
    console.log('test');
});
Event.emit('test', 'hello world'); // 输出 'hello world' 和 'test'

意思就是,定义贰个叫’test’类型的事件集,而且注册了五个test事件。然后调用test事件集里面包车型地铁整整办法。在此边on方法等价于addHandle方法,emit方法等价于fire方法。在那之中第二个参数正是事件类型,第一个参数便是要传进函数的参数。

是还是不是以此回事呢?很好,那么大家要写的代码就是:

JavaScript

var Event = { // 通过on接口监听事件eventName // 若是事件eventName被触发,则推行callback回调函数 on: function (eventName, callback) { //笔者的代码 if(!this.handles){ this.handles={}; } if(!this.handles[eventName]){ this.handles[eventName]=[]; } this.handles[eventName].push(callback); }, // 触发事件 eventName emit: function (eventName) { //你的代码 if(this.handles[arguments[0]]){ for(var i=0;i<this.handles[arguments[0]].length;i++){ this.handles[arguments[0]][i](arguments[1]); } } } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var Event = {
    // 通过on接口监听事件eventName
    // 如果事件eventName被触发,则执行callback回调函数
    on: function (eventName, callback) {
        //我的代码
        if(!this.handles){
             this.handles={};    
        }      
       if(!this.handles[eventName]){
            this.handles[eventName]=[];
       }
       this.handles[eventName].push(callback);
    },
    // 触发事件 eventName
    emit: function (eventName) {
        //你的代码
       if(this.handles[arguments[0]]){
           for(var i=0;i<this.handles[arguments[0]].length;i++){
               this.handles[arguments[0]][i](arguments[1]);
           }
       }
    }
};

这般测验,完美地通过了测量检验豆蔻梢头。

③测试二:

JavaScript

var person1 = {}; var person2 = {}; Object.assign(person1, 伊夫nt); Object.assign(person2, Event); person1.on('call1', function () { console.log('person1'); }); person2.on('call2', function () { console.log('person2'); }); person1.emit('call1'); // 输出 'person1' person1.emit('call2'); // 未有出口 person2.emit('call1'); // 没有出口 person2.emit('call2'); // 输出 'person2'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var person1 = {};
var person2 = {};
Object.assign(person1, Event);
Object.assign(person2, Event);
person1.on('call1', function () {
    console.log('person1');
});
person2.on('call2', function () {
    console.log('person2');
});
person1.emit('call1'); // 输出 'person1'
person1.emit('call2'); // 没有输出
person2.emit('call1'); // 没有输出
person2.emit('call2'); // 输出 'person2'

粗粗意思便是为三个不相同person注册自定义事件,而且八个person之间是相互独立的。

一贯测验,发掘输出了

金沙棋牌官方平台 1

其后生可畏就好疑似难点必要有个别出入呢,或然那才是主题素材的坑吧!

解释一下,Object.assign(person1, Event);

其一是ES6的新目的方法,用于对象的联合,将源对象(source卡塔尔国的装有可枚举属性,复制到目的对象(target卡塔尔。

意思是将伊芙nt里面包车型地铁可枚举的靶子和措施放到person1里面。

金沙棋牌官方平台 2

也正是说,假使源对象有些属性的值是目的,那么目的对象拷贝获得的是其一指标的援用。由于开展测量检验大器晚成的时候调用了on方法,所以event里面已经有了handles这一个可枚举的本性。然后再各自合并到七个person里面包车型地铁话,三个person对象里面包车型地铁handles都只是一个援引。所以就相互影响了。

假诺assign方法要贯彻深克隆则要如此:

金沙棋牌官方平台 3

标题是,标题已经定位了点子,我们不可能改正那一个方法。

因而,大家亟须将handles那几个个性定义为不可计数的,然后在person调用on方法的时候再各自发出handles那个目的。

也正是说准确的做法应该是:

JavaScript

var Event = { // 通过on接口监听事件eventName // 假诺事件eventName被触发,则施行callback回调函数 on: function (eventName, callback) { //你的代码 if(!this.handles){ //this.handles={}; Object.defineProperty(this, "handles", { value: {}, enumerable: false, configurable: true, writable: true }) } if(!this.handles[eventName]){ this.handles[eventName]=[]; } this.handles[eventName].push(callback); }, // 触发事件 eventName emit: function (eventName) { //你的代码 if(this.handles[arguments[0]]){ for(var i=0;i<this.handles[arguments[0]].length;i++){ this.handles[arguments[0]][i](arguments[1]); } } } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var Event = {
    // 通过on接口监听事件eventName
    // 如果事件eventName被触发,则执行callback回调函数
    on: function (eventName, callback) {
        //你的代码
        if(!this.handles){
            //this.handles={};
            Object.defineProperty(this, "handles", {
                value: {},
                enumerable: false,
                configurable: true,
                writable: true
            })
        }
      
       if(!this.handles[eventName]){
            this.handles[eventName]=[];
       }
       this.handles[eventName].push(callback);
    },
    // 触发事件 eventName
    emit: function (eventName) {
        //你的代码
       if(this.handles[arguments[0]]){
           for(var i=0;i<this.handles[arguments[0]].length;i++){
               this.handles[arguments[0]][i](arguments[1]);
           }
       }
    }
};

由此这道题,感到考得真的很抢眼何况很考根基。好啊。笔者大概不错复习去了。

打赏帮助自身写出更加多好随笔,谢谢!

打赏笔者

阅览者情势:

那是意气风发种创制松散耦合代码的技巧。它定义对象间 风流洒脱种大器晚成对多的依靠关系,当多少个对象的场馆发生退换时,全部信任于它的对象都将得到文告。由注重和观看者组成,主体各负其责公布事件,同期观望者通过订阅那些事件来考查该中央。主体并不知古刹看者的别样职业,观望者知道主体并能注册事件的回调函数。

node事件
<code>
server.on('connection', (stream) => {
console.log('someone connected!');
});
server.removeListener('connection', callback);
server.emit('connection', callback);
</code>
<p>
node 在二个事件之中只能登记十三个事件
</p>

# Backbone入门之事件(Backbone.Events卡塔尔

node.js中的emitter.emit方法运用表明,node.js使用意况

办法求证:

发射event事件,传递若干可选参数到事件监听器的参数表。

语法:

复制代码 代码如下:

emitter.emit(event, [arg1], [arg2], [...])

收起参数:

event                      事件类型

arg1 ~ argN           传递的参数(多少个)

例子:

复制代码 代码如下:

var  events = require('events');
var emitter = new events.EventEmitter();
 
emitter.on('someEvent', function(arg1, arg2){
    console.log('listener1', arg1, arg2);
})
 
emitter.on('someEvent', function(arg1, arg2){
    console.log('listener2', arg1, arg2);
})
 
emitter.emit('someEvent', 'byvoid', 1991);

源码:

复制代码 代码如下:

EventEmitter.prototype.emit = function(type) {
  var er, handler, len, args, i, listeners;
  if (!this._events)
    this._events = {};
  // If there is no 'error' event listener then throw.
  if (type === 'error') {
    if (!this._events.error ||
        (util.isObject(this._events.error) && !this._events.error.length)) {
      er = arguments[1];
      if (this.domain) {
        if (!er) er = new TypeError('Uncaught, unspecified "error" event.');
        er.domainEmitter = this;
        er.domain = this.domain;
        er.domainThrown = false;
        this.domain.emit('error', er);
      } else if (er instanceof Error) {
        throw er; // Unhandled 'error' event
      } else {
        throw TypeError('Uncaught, unspecified "error" event.');
      }
      return false;
    }
  }
  handler = this._events[type];
  if (util.isUndefined(handler))
    return false;
  if (this.domain && this !== process)
    this.domain.enter();
  if (util.isFunction(handler)) {
    switch (arguments.length) {
      // fast cases
      case 1:
        handler.call(this);
        break;
      case 2:
        handler.call(this, arguments[1]);
        break;
      case 3:
        handler.call(this, arguments[1], arguments[2]);
        break;
      // slower
      default:
        len = arguments.length;
        args = new Array(len - 1);
        for (i = 1; i < len; i++)
          args[i - 1] = arguments[i];
        handler.apply(this, args);
    }
  } else if (util.isObject(handler)) {
    len = arguments.length;
    args = new Array(len - 1);
    for (i = 1; i < len; i++)
      args[i - 1] = arguments[i];
    listeners = handler.slice();
    len = listeners.length;
    for (i = 0; i < len; i++)
      listeners[i].apply(this, args);
  }
  if (this.domain && this !== process)
    this.domain.exit();
  return true;
};

方法求证: 发射event事件,传递若干可选参数到事件监听器的参数表。 语法: 复制代码...

打赏辅助本人写出更加的多好文章,感谢!

任选意气风发种支付办法

金沙棋牌官方平台 4 金沙棋牌官方平台 5

1 赞 5 收藏 评论

落到实处它的成效

注册与公布
<code>
function Events(name) {
this.name = name;
this._events = {};
}
Events.prototype.on = function(eventname, callback) {
if(this._events[eventname]) {
this._events[eventname].push(callback)
}else{
this._events[eventname]=[callback]
}
}
Events.prototype.emit=function(eventname){
var callbacks=this._events[eventname]
callbacks.forEach(function(callback){
callback()
})
}
var girl = new Events()
girl.on('长头发及腰',function(){
console.log('长发及腰')
})
girl.on('长长的头发及腰',function(){
console.log('长头发及腰2')
})
girl.emit('长长的头发及腰')
</code>

本系列前后生可畏篇呈报了[Backbone入门之视图](

关于小编:winty

金沙棋牌官方平台 6

前端程序员,前端爱好者。博客: 个人主页 · 笔者的作品 · 1 ·  

金沙棋牌官方平台 7

旧事是Ali面试题 落成效果与利益

<code>
const emitter = new EventEmitter()
const sayHi = (name) => console.log(Hello ${name})
const sayHi2 = (name) => console.log(Good night, ${name})
emitter.on('hi', sayHi)
emitter.on('hi', sayHi2)
emitter.emit('hi', 'ScriptOJ')
// => Hello ScriptOJ
// => Good night, ScriptOJ
emitter.off('hi', sayHi)
emitter.emit('hi', 'ScriptOJ')
// => Good night, ScriptOJ
const emitter2 = new EventEmitter()
emitter2.on('hi', (name, age) => {
console.log(I am ${name}, and I am ${age} years old)
})
emitter2.emit('hi', 'Jerry', 12)
// => I am Jerry, and I am 12 years old
</code>

Backbone事件将事件触发所要进行的回调函数注册成事件处理句柄,当事件发生时,就触发该函数。

兑现它的职能

挂号与宣布
<code>
function EventEmitter(name) {
this.name = name;
this._events = {};
}
EventEmitter.prototype.on = function(eventname, callback) {
if(this._events[eventname]) {
this._events[eventname].push(callback)
} else {
this._events[eventname] = [callback]
}
}
EventEmitter.prototype.emit = function(eventname) {
var args = Array.prototype.slice.call(arguments, 1)
var callbacks = this._events[eventname]
var self = this
callbacks.forEach(function(callback) {
callback.apply(self, args)
})
}
EventEmitter.prototype.off = function(eventname, callback) {
var callbacks = this._events[eventname]
let cbindex = callbacks.indexOf(callback)
if(cbindex === -1) {
console.log('没有该方法')
} else {
callbacks.splice(cbindex, 1);
}
}
const emitter = new EventEmitter()
const sayHi = (name) => console.log(Hello ${name})
const sayHi2 = (name) => console.log(Good night, ${name})

emitter.on('hi', sayHi)
emitter.on('hi', sayHi2)
emitter.emit('hi', 'ScriptOJ')
Hello ScriptOJ
Good night, ScriptOJ

emitter.off('hi', sayHi)
emitter.off('hi', sayHi3)
emitter.emit('hi', 'ScriptOJ')
Good night, ScriptOJ

const emitter2 = new EventEmitter()
emitter2.on('hi', (name, age) => {
console.log(I am ${name}, and I am ${age} years old)
})
emitter2.emit('hi', 'Jerry', 12)
</code>

ES6 class方法
<code>
class EventEmitter {
constructor(name) {
this.name = name;
this._events = {};
}
on(eventname, callback) {
if(this._events[eventname]) {
this._events[eventname].push(callback)
} else {
this._events[eventname] = [callback]
}
}
emit(eventname, ...args) {
let callbacks = this._events[eventname]
callbacks.forEach(function(callback) {
callback(args)
})
}
off(eventname,cb){
let callbacks = this._events[eventname];
let cbindex=callbacks.indexOf(cb)
if(cbindex===-1){
console.log('该方法官样文章')
}else{
callbacks.splice(cbindex,1)
}
}
}
const emitter = new EventEmitter()
const sayHi = (name) => console.log(Hello ${name})
const sayHi2 = (name) => console.log(Good night, ${name})
emitter.on('hi', sayHi)
emitter.on('hi', sayHi2)
emitter.emit('hi', 'ScriptOJ')
emitter.off('hi', sayHi)
emitter.off('hi', 'sayHi3')
emitter.emit('hi', 'ScriptOJ')
const emitter2 = new EventEmitter()
emitter2.on('hi', (name, age) => {
console.log(I am ${name}, and I am ${age} years old)
})
emitter2.emit('hi', 'Jerry', 12)</code>

## Backbone.Events

redux 使用阅览方式代码

<code>
let currentListeners = []
let nextListeners = currentListeners
function ensureCanMutateNextListeners() {
if (nextListeners === currentListeners) {
nextListeners = currentListeners.slice()
}
}
function subscribe(listener) {
if (typeof listener !== 'function') {
throw new Error('Expected listener to be a function.')
}
//判定是不是是函数
let isSubscribed = true
ensureCanMutateNextListeners()
nextListeners.push(listener)
return function unsubscribe() {
if (!isSubscribed) {
return
}
isSubscribed = false
ensureCanMutateNextListeners()
const index = nextListeners.indexOf(listener)
nextListeners.splice(index, 1)
}
}

每一回推行dispath 都会执行监听函数
function dispatch(action) {
if (!isPlainObject(action)) {
throw new Error(
'Actions must be plain objects. ' +
'Use custom middleware for async actions.'
)
}
if (typeof action.type === 'undefined') {
throw new Error(
'Actions may not have an undefined "type" property. ' +
'Have you misspelled a constant?'
)
}
if (isDispatching) {
throw new Error('Reducers may not dispatch actions.')
}
try {
isDispatching = true
currentState = currentReducer(currentState, action)
} finally {
isDispatching = false
}
const listeners = currentListeners = nextListeners
for (let i = 0; i < listeners.length; i++) {
const listener = listeners[i]
listener()
}
return action
}
</code>

小结,写东西真累,现在会习于旧贯的。。。

Backbone.伊芙nts能够扩充到其余对象上,使其全部绑定和接触事件的力量。在绑定事件的回调解和管理理函数从前,无需定义事件,且能够传递参数:

```

   var myObj = {};

   _.extend(myObj, Backbone.Events);

   //增添二个自定义事件

   myObj.on('test', function(msg) {

       console.log('triggered ' + msg);

   });

   //触发自定义事件,输出"triggered test"

   myObj.trigger('test', 'test');

```

### on()

on(event, callback [,context])会在对象上绑定二个风云回调函数,回调函数this暗中同意指向当前指标,事件爆发时,回调函数就能被调用。单一事件时,第一个参数event值即为自定义事件名;而四个事件时,则可感到事件加上命名空间,以冒号分隔;第2个参数能够流传作为回调函数施行上下文,:

*注:特殊事件all,能够捕获对象上保有的风云触发。*

- 未注册all事件

   ```

       var myObj = {};

       _.extend(myObj, Backbone.Events);

       function test(msg) {

           console.log('triggered ' + msg);

       }

       myObj.on('test:first', test);

       myObj.on('test:second', test);

       //触发test:first事件,输出 "triggered test first"

       myObj.trigger('test:first', 'test first');

       //触发test:second事件,输出 "triggered test second"

       myObj.trigger('test:second', 'test second');

       //不触发任何事件

       myObj.trigger('test', 'test');

   ```

- 注册all事件

   ```

       var myObj = {};

       _.extend(myObj, Backbone.Events);

       function test(msg) {

           console.log('triggered ' + msg);

       }

       //监听所有的事件

       myObj.on('all', test);

       //触发test:first事件,输出 "triggered test first"

       myObj.trigger('test:first', 'test first');

       //触发test:second事件,输出 "triggered test second"

       myObj.trigger('test:second', 'test second');

       //触发test事件, 输出"triggered test"

       myObj.trigger('test', 'test');

   ```

### once()

登记事件并绑定回调解和管理理函数,触发三次后旋即被移除,别的同on()方法。

### off()

off([event] [,callback] [,context])事件能够移除从前经过on()方法绑定在事件目的上的回调解和管理理函数,第四个参数为要移除的回调函数对应的风浪名,若为空则移除所有的事件的回调函数;第叁个参数为相应的要移除的回调函数名,若为空则移除该事件负有绑定的回调函数:第多个函数为回调函数上下文,若为空则移除全体上下文下的这么些回调函数:

```

   var myObj = {};

   _.extend(myObj, Backbone.Events);

   function test(msg) {

       console.log('triggered ' + msg);

   }

   function joke(msg) {

       console.log("Joke " + msg);

   }

   myObj.on('test:first', test);

   myObj.on('test:second', test);

   myObj.on('joke', test);

   myObj.on('joke', joke);

   myObj.off('test:first');

   //触发test:first事件,不输出

   myObj.trigger('test:first', 'test first');

   //触发test:second事件,输出 "triggered test second"

   myObj.trigger('test:second', 'test second');

   myObj.off('joke', test);

   //触发joke事件,输出"Joke joke"

   myObj.trigger('joke', 'joke');

   myObj.off('joke');

   //触发joke事件,不输出

   myObj.trigger('joke', 'joke');

```

### trigger()

trigger(event [,*args])方法为钦定事件触发回调函数,第多少个参数为事件名,后边的参数为传送的参数,可认为三个或多少个;trigger()方法能够触发贰个或八个事件的回调函数,触发单个事件时,event参数值即为事件名;而接触三个事件时,event值为以空格分隔的八个事件名:

```

   var myObj = {};

   _.extend(myObj, Backbone.Events);

   function test(arg1, arg2) {

       console.log('triggered ' + arg1 + ' ' + arg2);

   }

   function joke(msg) {

       console.log("Joke " + msg);

   }

   myObj.on('test', test);

   myObj.on('joke', joke);

   //输出"triggered boy girl"

   myObj.trigger('test', 'boy', 'girl');

   //输出"triggered several events undefined"和"Joke several events"

   myObj.trigger('test joke', 'several events');

```

### listenTo()

前文的on()和off()都是在指标上一贯绑定或移除回调函数,而listenTo(obj, event, callback)方法则能够兑现叁个目的监听另三个目的上的事件,第二个参数是要监听的对象,第二个参数是要坚听对象上事件的风云名,第多个参数是所监听目的上事件触发时此目的上的回调函数:

*注:object.listenTo()方法调用时,其第八个参数回调函数实行上下文化总同盟是当前指标object。*

```

   var objA = {}, objB = {};

   _.extend(objA, Backbone.Events);

   _.extend(objB, Backbone.Events);

   objA.listenTo(objB, 'test', function(e) {

       console.log('listened it');

   });

   //输出"listened it"

   objB.trigger('test');

```

### listenToOnce()

listenToOnce(obj, event, callback)方法规足以兑现三个指标监听另一个目的上的风云,并在该事件触发贰回后

### stopListening()

stopListening([other] [,event] [,callback])方法使对象终止监听事件,若不带参数,则停止监听全部目的,移除全体已登记的回调函数;若第一个参数为空,则截至监听某指标上具备事件,移除为该对象注册的享有回调函数;若第多少个参数为空,截至监听某指标上一定事件,移除为该事件注册的具备回调函数;参数均不为空,移除某指标上一定事件的钦命回调函数:

```

   var objA = {}, objB = {};

   _.extend(objA, Backbone.Events);

   _.extend(objB, Backbone.Events);

   objA.listenTo(objB, 'test', function(e) {

       console.log('listened it');

   });

   //输出"listened it"

   objB.trigger('test');

   objA.stopListening(objB);

   //不输出

   objB.trigger('test');

```

## 事件与视图

在Backbone中,事件选取最多的场地总是与视图对象一起,在三个视图中,要监听事件,日常常有二种艺术:DOM事件和Event事件API。

- DOM事件

   增多DOM事件能够透过视图对象events属性可能jQuery.on()方法注册:

   - 使用events属性注册的平地风波,回调函数的this指向视图对象

   - 使用jQuery注册事件,回调函数this指向DOM成分

- Event API

   使用伊芙nt API注册事件也可能有二种景况:

   - 使用on()方法注册事件,上下文暗中同意是指向当前目的,也足以透过首个参数字传送入作为回调函数上下文

   - 使用listenTo()注册事件,回调函数this指向当前指标

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:js使用场景,js观察者模式学习总结

关键词:

上一篇:json工控风机叶轮旋转,Web前端开发

下一篇:没有了