很多朋友都会写一些函数,类似window.onload、$(document).ready等,而且一个页面不止一处写到类似的函数,如何让这些需要执行的函数在一个统一的入口执行(即页面只需要执行一个类似window.onload的函数)?
这时我们可以借助HOOK来实现,(以window.onload为例)将所以需要在页面加载的时候执行函数都注册到一个入口,如:
function func1() {// .... }function func2() {// .... } hooks.addAction("loaded", func1); // 添加函数 hooks.addAction("loaded", "func2");
上面表示在loaded钩子上挂了两个函数。然后执行这个钩子,如:
window.onload = function(){hooks.doAction("loaded");}
这样无论在之前挂多少函数hooks.addAction("loaded", function),在hooks.doAction("loaded")这里都被统一执行了。
JavaScript钩子实现:
原理比较简单,定义一个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); }
以上就是javascript钩子是啥意思?的详细内容,更多请关注易知道|edz.cc其它相关文章!