javaScript hook

今天在网上搜索了不少资料，基本概念如下:

钩子(Hook)，是Windows消息处理机制的一个平台,应用程序可以在上面设置子程以监视指定窗口的某种消息，而且所监视的窗口可以是其他进程所创建的。当消息到达后，在目标窗口处理函数之前处理它。钩子机制允许应用程序截获处理window消息或特定事件。

钩子实际上是一个处理消息的程序段，通过系统调用，把它挂入系统。每当特定的消息发出，在没有到达目的窗口前，钩子程序就先捕获该消息，亦即钩子函数先得到控制权。这时钩子函数即可以加工处理（改变）该消息，也可以不作处理而继续传递该消息，还可以强制结束消息的传递。　

转自：http://www.clanfei.com/2013/10/1730.html

当我们面对比较复杂的前端项目时，我们经常会采用模块化的方式来对JavaScript代码进行解耦，以方便对代码的管理和维护，以下是一个简单的立即执行函数实现的模块化例子：

var Common = (function(){
//这个函数是立即执行的，执行结果给了Common
var func = function(){
// 全局公用方法
}
return {
func : func
}
})();

var ModuleA = (function(){
var _count = 1;
var init = function(){
// 独立模块逻辑
}
var getCount = function(){
return _count;
}
return {
init : init,
getCount : getCount
}
})();

模块只对外暴露外部需要的接口，而外部模块不需要关心其内部的运行逻辑，只需要知道调用接口的方式和返回结果，这样就实现了模块的“低耦合，高内聚”。

看起来很美好，可是当项目的逻辑变的越来越复杂时，比如A模块中某个针对全局公用的逻辑，可能在B模块的某种特定情况下需要进行一些额外的逻辑操作，该怎么办呢？

var Common = (function(){
var func = function(){
// 全局公用方法
if(typeof ModuleA != 'undefined' && ModuleA.getCount() > 0){
// 模块A需要进行的额外逻辑操作,实际上就是钩子捕获消息
}
}
return {
func : func
}
})();

var ModuleA = (function(){
var _count = 1;
var init = function(){
// 独立模块逻辑
}
var getCount = function(){
return _count;
}
return {
init : init,
getCount : getCount
}
})();

不知道当你看到Common.func中间的那一坨东西的时候，会不会突然怒吼一声：“卧槽，尼玛怎么这么恶心！”= =。。

明明是A模块的逻辑，却恶心地出现在了公用模块里，如果这样的特殊逻辑多起来之后，Common模块会不会变成这样？

var Common = (function(){
var func = function(){
// 全局公用方法
if(typeof ModuleA != 'undefined' && ModuleA.getCount() > 0){
// 模块A需要进行的额外逻辑操作
}
if(typeof ModuleB != 'undefined' && ModuleB.getWhat() != 'something'){
// 模块B需要进行的额外逻辑操作
}
// ...
if(typeof ModuleZ != 'undefined' && ModuleB.isWhat() !== false){
// 模块Z需要进行的额外逻辑操作
}
}
return {
func : func
}
})();

天哪，简直无法忍受。。

如果。。如果有这么一个钩子（Hook），可以把额外的逻辑代码挂在Common.func上，而Common.func执行的时候顺便把钩子上挂着的代码也执行了，那该多好啊。。这样的话既可以实现特殊的额外操作，又可以保持模块的低耦合和高内聚：

var Common = (function(){
//这个函数是立即执行的，执行结果给了Common
var func = function(){
//执行挂在这个方法的钩子上的所有额外逻辑代码
var arg = 2;

Hook.doActions(arg);//每个模块都可以得到arg，根据它做相应操作。但是并不能更改arg;
console.log(arg);
//全局公用方法
}
return {
func: func
}
})()
//应用场景：比如A模块中某个针对全局公用的逻辑，可能在B模块的某种特定情况下需要进行一些额外的逻辑操作。
var ModuleA = (function(){
var _count = 1;
var init = function(){
//用钩子把额外的逻辑挂到Common.func上
Hook.addAction(Common.func, function(arg){
if(_count > 0){
//增加的额外逻辑操作
arg = arg + 1;
console.log("看看执行到没？");
console.log(arg);
}
})
}
var getCount = function(){
return _count;
}
return {
init: init,
getCount: getCount
}
})()
ModuleA.init();
Common.func();

没有不可能。借鉴了一下WordPress的Hook机制，一个基于JavaScript钩子机制模块就实现了。

当然，一个完整的钩子机制需要考虑的并不像上面说的那么简单，具体的实现大家请看代码，或者懒得看的可以自己尝试实现，我就不在赘述了：

<script>

/*var fn1 = {
_hooks : {
actions:[
{action:action,priority:priority},
{}
],
filters:[
{
filter: filter,
priortity: priority
}
]
}
}*/

var Hook = (function(){
var addAction = function(method, action, priority){
_initHook(method);
var actions = method['_hooks_'].actions;
actions.push({
action: action,
priority: priority || 10,
})
actions.sort(_compare);
}

var doActions = function(){
var method = Hook.doActions.caller;
　　　　　　　　　　//caller:http://www.cnblogs.com/darr/p/4756906.html
console.log(arguments.callee);
//callee;
//Common.func
//指向调用它的函数
//如果一个函数f是在全局作用域内被调用的,则f.caller为null,相反,如果一个函数是在另外一个函数作用域内被调用的,则f.caller指向调用它的那个函数.
_initHook(method);
//Common.func._hooks_:{actions:[],filters:[]}
var actions = method['_hooks_'].actions;
if(arguments.length == 0){
arguments = method.arguments;//?
}
for(var i in actions){
if(actions[i].action.apply(method, arguments) === false){
　　　　　　　　　　　　　　//apply:http://www.cnblogs.com/darr/p/4757082.html
return false;
}
}
}

var hasAction = function(method, action){
_initHook(method);
var actions = method['_hooks_'].actions;
if(actions.length > 0 && action != undefined){
for(var i in actions){
if(actions[i].action == action){
return true;
}
}
return false;
}else{
return actions.lengths > 0;
}

}

var removeAction = function(method, action){
_initHook(method);
var actions = method['_hooks_'].actions;
if(actions.length > 0){
if(actions != undefined){
for(var i in actions){
if(actions[i].action == action){
delete actions[i];
return;
}
}
}else{
method['_hooks_'].actions = [];
}
}
}

var addFilter = function(method, filter, priority){
_initHook(method);
var filters = method['_hooks_'].filters;
filters.push({
filter:filter,
priority: priority || 10
});
filters.sort(_compare)
}

var applyFilters = function(value){
var method = Hook.applyFilters.caller;
_initHook(method);
var filters = method['_hooks_'].filters;
for(var i in filters){
value = filters[i].filter.call(method, value);
}
return value;
}

var hasFilter = function(method, filter){
_initHook(method);
var filters = method['_hooks_'].filters;
if(filters.length > 0 && filter != undefined){
for(var i in filters){
if(filters[i] == filter){
return true;
}
}
return false;
}else{
return filters.length > 0 ;
}
}

var removeFilter = function(method, filter){
_initHook(method);
var filters = method['_hooks_'].filters;
if(filters.length > 0){
if(filter != undefined){
for(var i in filters){
if(filters[i] == filter){
delete filters[i];
return;
}
}
}else{
//filters = [];
//有坑啊，不能用filters。应该将method['_hooks_'].filters指向空地址
method['_hooks_'].filters = [];
}
}
}

var _compare = function(hook1, hook2){
return hook1.priority < hook2.priority;
}

var _initHook = function(method){
if(!method['_hooks_']){
method['_hooks_'] = {
actions: [],
filters: []
}
}
}

return {
addAction: addAction,
doActions: doActions,
hasAction: hasAction,
removeAction: removeAction,
addFilter: addFilter,
applyFilters: applyFilters,
hasFilter: hasFilter,
removewFilter: removeFilter
}
})();
</script>

像适配器模式：http://www.cnblogs.com/tomxu/archive/2012/04/11/2435452.html

像观察者模式：http://www.cnblogs.com/TomXu/archive/2012/03/02/2355128.html