关于js模拟c#的Delegate(委托)实现

这是我的第一篇博文,想来讲一讲js的函数。我的标题是js模拟c#的Delegate。

一、什么是Delegate(委托)

在jquery中有delegate函数,作用是将某个dom元素的标签的事件委托给一个函数队列,在触发这个事件的时候会触发这个函数队列中的所有函数。而c#中的Delegate对象也是如此,将多个方法添加至一个委托对象,或称将多个方法委托给一个委托对象,当调用委托对象的Invoke方法时会调用所有被委托的方法。由此可以看出Delegate的本质应该是一个函数队列,执行委托对象就是遍历执行函数队列。

二、实现委托构造函数

明白了委托对象的本质是一个函数队列,就可以着手建立委托对象了。先写一个简单的委托的构造函数,这个构造函数返回的对象实现以下功能

1、add();                             添加函数

2、remove();                        移除函数

3、();                                  调用委托

 function SimpleDelegate() {
var _fnQuene = [];
var delegate=function(){
for(var i=0;i<_fnQuene.length;i++){
_fnQuene[i].apply(this,arguments);
}
}
delegate.add = function (fn) {
//只有函数才能被添加到函数队列
if(Object.prototype.toString.call(fn)==='[object Function]'){
_fnQuene.push(fn);
}
}
delegate.remove = function (fn) {
_fnQuene.splice(_fnQuene.indexOf(fn), 1);
}
return delegate;
}

这个函数已经能实现基本的添加移除和调用,如果使用规范,这个函数没有任何问题。但如果使用不规范,会造成严重的后果,比如下面的代码。在后面的代码中执行的时候会不断添加函数去调用add函数,这样一来就造成了死循环。

 //正确的使用委托
var d1=new SimpleDelegate();
d1.add(function(){
console.log(1);
})
d1.add(function(){
console.log(2);
})
d1(); //打印1,2 //不规范使用,造成死循环
var d2=new SimpleDelegate();
d2.add(function(){
d2.add(function(){
console.log(1);
})
})
d2();

我们需要修改这个函数,首先我们发现在调用委托的时候会获取_fnQuene的length值,而这个length是不断在变化的,每添加一个函数长度就会增加,于是就产生了循环调用add造成死循环的问题,如果我们在调用前获取length的值并缓存起来就不用担心添加的问题了

 var delegate = function () {
var len = _fnQuene.length;
for (var i = 0; i < len; i++) {
_fnQuene[i].apply(this, arguments);
}
}

执行结果变成如下,不再死循环

var d2 = new SimpleDelegate();
d2.add(function () {
console.log(1);
d2.add(function () {
console.log(2);
})
})
d2(); //第一次执行打印1
d2(); //第二次执行打印1,2
d2(); //第三次执行打印1,2,2

但这样还是不够,我们只解决了add的问题,如果在函数中调用remove呢,这样好像缓存length也不行

 var d=new SimpleDelegate();
function f1(){
console.log(1);
d.remove(f2);
}
function f2(){
console.log(2);
}
d.add(f1);
d.add(f2)
d(); //执行到索引为1的函数,函数已经被删除,报错

add和remove函数并不靠谱,我们应该修改的是Delegate的机制,之前,我们调用add和remove会直接将操作直接作用在fnQuen上,但当我们开始执行委托后就不应该对fnQuene进行操作。如果添加的函数对fnQuene进行操作,应当把操作缓存下来,并在下一次调用委托之前执行这些操作,并在执行后立刻删除这些操作。如此一想,为什么我们不把每一次操作都缓存下来呢?每次委托执行前添加和移除,委托一旦开始执行,调用的add和remove函数又会缓存相应的操作。

 function SimpleDelegate() {
var _fnQuene = [];
var _waitingQuene = []; var delegate = function () {
var len = _waitingQuene.length; //缓存本次执行委托时已有的操作数量
var i;
//首先调用所有缓存的操作
for (i = 0; i < len; i++) {
_waitingQuene[i]();
} len = _fnQuene.length; //缓存当前函数队列的长度
for (i = 0; i < len; i++) {
_fnQuene[i].apply(this, arguments);
}
} delegate.add = function (fn) {
_waitingQuene.push(function(){
_fnQuene.push(fn);
})
} delegate.remove = function (fn) {
_waitingQuene.push(function(){
_fnQuene.splice(_fnQuene.indexOf(fn),1);
})
}
return delegate;
}

最后为了这个函数使用更加方便,添加链式编程并支持一些重载,以及为对象添加一些属性

 function cloneArray(arr) {
var ret = [];
//这里不用map是因为arr可以是类数组对象
for (var i = ; i < arr.length; i++) {
ret[i] = arr[i];
}
return ret;
} function Delegate() {
var _fnQuene = [];
var _waitingQuene = []; var delegate = function () {
var len = _waitingQuene.length; //缓存本次执行委托时已有的操作数量
var i;
//首先调用所有缓存的操作
for (i = ; i < len; i++) {
_waitingQuene[i]();
}
_waitingQuene.length = ; len = _fnQuene.length; //缓存当前函数队列的长度
for (i = ; i < len; i++) {
_fnQuene[i].apply(this, delegate._argIntercept ?
cloneArray(arguments) :
arguments
);
}
} delegate.add = function (fn) {
var args = arguments;
var arg;
var type;
var self = this;
function add() {
for (var i = ; i < args.length; i++) {
arg = args[i];
type = Object.prototype.toString.call(arg);
if (type === '[object Array]') {
add.apply(self, arg);
}
else if (type === '[object Function]') {
_fnQuene.push(arg);
}
}
}
_waitingQuene.push(add);
return this;
} delegate.remove = function (fn) {
var args = arguments;
var arg;
var type;
var self = this;
function remove() {
for (var i = ; i < args.length; i++) {
arg = args[i];
type = Object.prototype.toString.call(arg);
if (type === '[object Array]') {
remove.apply(self, arg);
}
else if (type === '[object Function]') {
var idx = _fnQuene.indexOf(arg);
if (idx === -) {
continue;
}
_fnQuene.splice(idx, );
}
}
}
_waitingQuene.push(remove);
return this;
} //检查某个函数是否委托给了当前委托对象
delegate.has = function (fn) {
return _fnQuene.indexOf(fn) !== -;
} Object.defineProperties(delegate, {
//委托中函数的数量
_length: {
get: function () {
return _fnQuene.length;
}
}, //是否拦截参数,如果为true,则委托被调用时传给函数的参数为副本
_argIntercept: {
value: false,
}
}) delegate.constructor = Delegate;
return delegate;
}

上一篇:css三级下拉的导航栏


下一篇:Gremlins.js – 模拟用户随机操作的 JS 测试库