javascript钩子是啥意思？菜鸟教程网_钩子菜鸟知识

hook是什么意思？菜鸟教程网菜鸟知识

2020/03/20 07:34 • Web 前端

中间的钩子是把需要执行的函数或者其他一系列动作注册到一个统一的入口，程序通过调用这个钩子来执行这些注册的函数。很多朋友都会写一些函数，比如.、$()。准备好等，并且一个页面不止一个地方写了类似的函数，如何让这些需要执行的函数在一个统一的入口执行（即页面只需要执行一个像 from .ready这样的函数）。

hook是什么意思？菜鸟教程网

中间的钩子是将需要执行的函数或者其他一系列动作注册到统一的入口，程序通过调用这个钩子来执行这些注册的函数。

很多朋友都会写一些函数，比如.、$().ready等，而一个页面不止一个地方写着类似的函数，如何让这些需要执行的函数在一个统一的入口执行（即就是，页面只需要执行一个像.函数）？

这时候我们就可以使用HOOK来实现。 （以.为例）注册页面加载时需要执行的所有函数到某个条目，如：

function func1()
{// ....
}function func2()
{// ....
}
hooks.addAction("loaded", func1);    // 添加函数
hooks.addAction("loaded", "func2");

上面表示挂了两个函数。 然后像这样执行这个钩子：

window.onload = function(){hooks.doAction("loaded");}

这样，无论之前挂了多少个函数hooks.("",)，都统一在hooks.("")这里执行。

钩子实现：

原理比较简单。 定义一个hook数组，将函数push到hook数组中，并一一调用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);
}

喜欢(0)