JS钩⼦的机制与实现
[什么是钩⼦]
接触过WordPress的朋友都知道，WP的程序中可以执⾏类似钩⼦的函数，当然是这实现的钩⼦。在中⼀样可以实现类似的功能。
⽤⼀句话来形容⼀下：钩⼦是将需要执⾏的函数或者其他⼀系列动作注册到⼀个统⼀的⼊⼝，程序通过调⽤这个钩⼦来执⾏这些已经注册的函数。
[为什么要⽤钩⼦]
很多朋友都会写⼀些函数，类似load、$(document).ready等，⽽且⼀个页⾯不⽌⼀处写到类似的函数，如何让这些需要执⾏的函数在⼀个统⼀的⼊⼝执⾏（即页⾯只需要执⾏⼀个类似load的函数）？
这时我们可以借助HOOK来实现，（以load为例）将所以需要在页⾯加载的时候执⾏函数都注册到⼀个⼊⼝，如：
function func1()
{// ....
}function func2()
{// ....
}
hooks.addAction("loaded", func1);    // 添加函数
hooks.addAction("loaded", "func2");
上⾯表⽰在loaded钩⼦上挂了两个函数。然后执⾏这个钩⼦，如：
{
hooks.doAction("loaded");
}
typeof array
这样⽆论在之前挂多少函数hooks.addAction("loaded", function)，在hooks.doAction("loaded")这⾥都被统⼀执⾏了。
[JS钩⼦如何实现]
原理⽐较简单，定义⼀个hook数组，addAction时将函数push到hook数组，doAction时将hook数组⾥的函数逐⼀调⽤。
function hooks()
{this.queue = new Array();
}
hooks.prototype.addAction = function(hook, func)
{this.queue[hook] = new Array();if(typeof func == 'function') {this.queue[hook].push(func);
} else if(typeof func == 'string') {this.queue[hook].push(this.window[func]);
}
}
hooks.prototype.doAction = function(hook)
{var parameters = Array.prototype.slice.call(arguments, 1);var functions = this.queue[hook];for(var i=0; i < functions.length; i++)
{this.call_user_func_array(functions[i], parameters);
}return true;
}
hooks.prototype.call_user_func_array = function(cb, parameters)
{if (typeof cb === 'string') {
func = (typeof this[cb] === 'function') ? this[cb] : func = (newFunction(null, 'return ' + cb))();
} else if (cb instanceof Array) {
func = ( typeof cb[0] == 'string' ) ? eval(cb[0]+"['"+cb[1]+"']") : func = cb[0][cb[1]];
} else if (typeof cb === 'function') {
func = cb;
}if (typeof func != 'function') {throw new Error(func + ' is not a valid function');
}if(typeof parameters == 'undefined') {var tmp_ary = [];var parameters = Array.prototype.slice.call(tmp_ary, 1);
}return (typeof cb[0] === 'string') ? func.apply(eval(cb[0]), parameters) :.
( typeof cb[0] !== 'object' ) ? func.apply(null, parameters) : func.apply(cb[0], parameters);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。