[设计模式]JavaScript钩子机制的应用场景与实现

杰拉斯 | 时间：2013-10-29, Tue | 32,060 views
前端开发　

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

var Common = (function(){
	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(){
	var func = function(){
		// 执行挂在这个方法的钩子上的所有额外逻辑代码
		Hook.doActions();
		// 全局公用方法
	}
	return {
		func : func
	}
})();

var ModuleA = (function(){
	var _count = 1;
	var init = function(){
		// 用钩子把额外的逻辑挂到Common.func上
		Hook.addAction(Common.func, function(){
			if(_count > 0){
				// 增加的额外逻辑操作
				console.log('看看执行到没？');
			}
		});
		// 独立模块逻辑
	}
	var getCount = function(){
		return _count;
	}
	return {
		init : init,
		getCount : getCount
	}
})();

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

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

/**
 * 钩子模块（动作是对方法的逻辑进行补充，过滤器是对方法的返回值进行处理）
 *
 * @author Lanfei
 * @date 2013.10.28
 * 
 * function handler(num1, num2){ 
 *     Hook.doActions();
 *     var value = num1 + num2;
 *     return Hook.applyFilters(value);
 * }
 * console.log('before hook:');
 * console.log(handler(1, 2));
 * function action(num1, num2){
 *     console.log('the numbers are ' + num1 + ' and ' + num2 + '.');
 * }
 * function filter(value){
 *     return 'the result is ' + value + '.';
 * }
 * Hook.addAction(handler, action);
 * Hook.addFilter(handler, filter);
 * console.log('after hook: ');
 * console.log(handler(1, 2));
 * 
 */

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;
		_initHook(method);
		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){
				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.length > 0;
		}
	}

	var removeAction = function(method, action){
		_initHook(method);
		var actions = method['__hooks__'].actions;
		if(actions.length > 0){
			if(action !== 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 == 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 == filter){
						delete filters[i];
						return;
					}
				}
			}else{
				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,
		removeFilter : removeFilter
	};
})();

PS：发现我写博客不怎么喜欢用图片，不知道大家看起来会不会不太喜欢= =。。算了，等博客改版重构后再说吧。。

如需转载请注明出处：杰拉斯的博客