一、 自定义事件
相信大部分的朋友对事件监听并不陌生,这是我们实际开发中常用的一种代码实现方式。但似乎我们之前用到的都是浏览器内置的事件,能不能自定义事件进行触发呢?
实际上在jQuery中为我们提供了 trigger() 函数,专门用来触发自定义事件。可以通过命名空间的形式来管理事件名称,命名空间中的单词用点号分隔 。 如:
// 绑定自定义事件
$(“.class“).bind(“refresh.widget”,function(){})
// 触发自定义事件
$(“.class”).trigger(“refresh.widget”);
我们还可以通过给trigger ()传入一个额外的参数给事件处理程序传入数据。 数据会以附加参数的形式带入回调:
// 绑定自定义事件,监听回调参数
$(“.class”).bind(“frob.widget”,function(event,dataNumber){
console.log(dataNumber);
})
// 触发自定义事件,传入参数
$(“.class”).trigger(“frob.widget”,5);
注意:自定义事件和内置事件一样,会沿着dom树做冒泡 。
二、 dom无关事件
js中基于事件的编程机制是非常强大的,因为它能让你的框架充分解耦,让功能变得更加内聚切具有更好的可维护性 。但是事件本质上是和dom无关的,因此你可以很容易的开发出一个事件驱动的库。我们可以称这种模式为发布 / 订阅 .
发布/ 订阅(Pub/Sub)是一种消息模式,它有两个参与者:发布者和订阅者 。发布者向某个信道发布一条消息,订阅绑定这个信道,当有消息发布至信道时就会接受一个通知。最重要的一点是,发布者和订阅者是完全解耦的,彼此并不知晓对方的存在。两者仅仅共享一个信道名称 。
发布者和订阅者的解耦可以让你的应用易于拓展,而不必引入额外的交叉依赖和耦合。从而提高了应用的可维护性,添加额外功能也非常容易。
代码实现:
var PubSub = {
// 定义订阅函数
subscribe:function (e,callback) {
// 定义 _callbacks 对象,除非它已经存在了 。
var calls = this._callbacks||(this._callbacks = {});
// _callbacks[e] 针对不同的信道名称,存储多个回调函数 。
(this._callbacks[e]||(this._callbacks[e]=[])).push(callback);
return this;
},
// 定义发布函数
publish:function () {
// 将arguments 对象,转换为真正的数组
var args=Array.prototype.slice.call(arguments,0);
// 拿出第一个参数,即信道名称(事件名称)
var ev = args.shift();
var list,calls,i,l;
// 如果不存在 _callbacks 对象则返回
if(!(calls=this._callbacks))
return this;
// 如果不包含给定事件所对应的数组,同样返回
if(!(list=this._callbacks[ev]))
return this;
// 依次触发事件对应的回调函数
for(i=0,l=list.length;i<l;i++)
list[i].apply(this,args);
return this;
}
}
// 使用方法
PubSub.subscribe("wem",function() { // 订阅
alert("wem");
})
PubSub.publish("wem"); // 发布
注意:我们可以使用命名空间的方式来管理事件名称,比如使用冒号分隔符(:)
PubSub.subscribe(“user:create”,function(){});