匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。| 时间： | 19,231 views
当我们面对比较复杂的项目时，我们经常会采用模块化的方式来对代码进行解耦，以方便对代码的管理和维护，以下是一个简单的立即执行函数实现的模块化例子：
var Common = (function(){
var func = function(){
// 全局公用方法
func : func
var ModuleA = (function(){
var _count = 1;
var init = function(){
// 独立模块逻辑
var getCount = function(){
init : init,
getCount : getCount
模块只对外暴露外部需要的接口，而外部模块不需要关心其内部的运行逻辑，只需要知道调用接口的方式和返回结果，这样就实现了模块的“低耦合，高内聚”。
看起来很美好，可是当项目的逻辑变的越来越复杂时，比如A模块中某个针对全局公用的逻辑，可能在B模块的某种特定情况下需要进行一些额外的逻辑操作，该怎么办呢？
var Common = (function(){
var func = function(){
// 全局公用方法
if(typeof ModuleA != 'undefined' && ModuleA.getCount() > 0){
// 模块A需要进行的额外逻辑操作
func : func
var ModuleA = (function(){
var _count = 1;
var init = function(){
// 独立模块逻辑
var getCount = function(){
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需要进行的额外逻辑操作
func : func
天哪，简直无法忍受。。
如果。。如果有这么一个钩子（Hook），可以把额外的逻辑代码挂在Common.func上，而Common.func执行的时候顺便把钩子上挂着的代码也执行了，那该多好啊。。这样的话既可以实现特殊的额外操作，又可以保持模块的低耦合和高内聚：
var Common = (function(){
var func = function(){
// 执行挂在这个方法的钩子上的所有额外逻辑代码
Hook.doActions();
// 全局公用方法
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(){
init : init,
getCount : getCount
没有不可能。借鉴了一下的Hook机制，一个基于Script钩子机制模块就实现了。
当然，一个完整的钩子机制需要考虑的并不像上面说的那么简单，具体的实现大家请看代码，或者懒得看的可以自己尝试实现，我就不在赘述了：
* 钩子模块（动作是对方法的逻辑进行补充，过滤器是对方法的返回值进行处理）
* @author Lanfei
* * 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.push({
action : action,
priority : priority || 10
actions.sort(_compare);
var doActions = function(){
var method = Hook.doActions.
_initHook(method);
var actions = method['__hooks__'].
if(arguments.length == 0){
arguments = method.
for(var i in actions){
if(actions[i].action.apply(method, arguments) === false){
var hasAction = function(method, action){
_initHook(method);
var actions = method['__hooks__'].
if(actions.length > 0 && action !== undefined){
for(var i in actions){
if(actions[i].action == action){
return actions.length > 0;
var removeAction = function(method, action){
_initHook(method);
var actions = method['__hooks__'].
if(actions.length > 0){
if(action !== undefined){
for(var i in actions){
if(actions[i].action == action){
delete actions[i];
method['__hooks__'].actions = [];
var addFilter = function(method, filter, priority){
_initHook(method);
var filters = method['__hooks__'].
filters.push({
filter : filter,
priority : priority || 10
filters.sort(_compare);
var applyFilters = function(value){
var method = Hook.applyFilters.
_initHook(method);
var filters = method['__hooks__'].
for(var i in filters){
value = filters[i].filter.call(method, value);
var hasFilter = function(method, filter){
_initHook(method);
var filters = method['__hooks__'].
if(filters.length > 0 && filter !== undefined){
for(var i in filters){
if(filters[i].filter == filter){
return filters.length > 0;
var removeFilter = function(method, filter){
_initHook(method);
var filters = method['__hooks__'].
if(filters.length > 0){
if(filter !== undefined){
for(var i in filters){
if(filters[i].filter == filter){
delete filters[i];
method['__hooks__'].filters = [];
var _compare = function(hook1, hook2){
return hook1.priority < hook2.
var _initHook = function(method){
if(! method['__hooks__']){
method['__hooks__'] = {
actions : [],
filters : []
addAction : addAction,
doActions : doActions,
hasAction : hasAction,
removeAction : removeAction,
addFilter : addFilter,
applyFilters : applyFilters,
hasFilter : hasFilter,
removeFilter : removeFilter
PS：发现我写博客不怎么喜欢用图片，不知道大家看起来会不会不太喜欢= =。。算了，等博客改版重构后再说吧。。
如需转载请注明出处：
爱好：代码、羽毛球请供应商联系我
手机号不能为空
姓名不能为空
请供应商联系我
您对该公司的咨询信息已成功提交请注意接听供应商电话。
您采购的产品：
请输入采购产品
您的手机号码：
请输入手机号码
*采购产品：
请输入采购产品
*采购数量/单位：
请输入采购数量
请选择单位
*采购截止日期：
请输入正确的手机号码
请输入验证码
*短信验证码：
<input id="valid_Code1" maxlength="6" placeholder="请输入验证码" name="VALIDCODE" class="codeInput" onkeyup="this.value=this.value.replace(/\D/g,'')" onkeypress="if(event.keyCode
57) event.returnValue =" type="text">
免费获取验证码
为了安全，请输入验证码，我们将优先处理您的需求！
请输入验证码
发送成功！
慧聪已收到您的需求，我们会尽快通知卖家联系您，同时会派出采购专员1对1为您提供服务，请您耐心等待！
188 ******
联系人：许明需&销售部 法人代表
公司名称：义乌市杰诺电子有限公司
备注：点击关注按钮后才可自动收到卖家电话
请输入正确的手机号码
请输入验证码
*短信验证码：
免费获取验证码
为了安全，请输入验证码，我们将优先处理您的需求！
请输入验证码
按字母分类 ：js之hook - Luffy_ying的博客 - CSDN博客
JavaScript
JS中的钩子：
钩子是将需要执行的函数或者其他一系列动作注册到一个统一的入口，程序通过调用这个钩子来执行这些已经注册的函数，还有就是提供一个可以响应默认流程的机制的时机，像react中生命周期的componentWillMount,componentDidMount等，这些都是钩子函数。有的时候，在相同的页，或者不同的页中我们会写很多重复的代码，比如一些初始化的条件，那最近写过的栗子来说：
在多个js文件中都会用到这样一个函数，而这个函数将作为参数传到另一个b.js文件，在此函数里面重复的代码很多。
getDataList(page = 1,selectPageValue) {
renderPagination = function(page, per_page, total, onclickFuncName, containerSelector,isSelect){ var originFunction = onclickFuncN window.onclickFuncName = function(){
//1. let p = $('.selectPage');
let selectPageValue = '';
for(let i in p){
if(p.eq(i).val()!=''){
selectPageValue = p.eq(i).val();
window[originFunction](page,selectPageValue);
}onclickFuncName便是getDataList,这段代码便是为了在其他那几个js文件中省去从1到9行代码的重复，相当于对原函数做了改造，或者理解下面这个例子：var oriAlert = window.alert；
window.alert = function(txt){
oriAlert(txt);
}oriAlert就是一个钩子函数。在vue中的过滤效果中，附上一张截图：
里面的这些函数也都是钩子函数。
我的热门文章js中的钩子机制(hook)
什么是钩子机制？使用钩子机制有什么好处？
钩子机制也叫hook机制，或者你可以把它理解成一种匹配机制，就是我们在代码中设置一些钩子，然后程序执行时自动去匹配这些钩子；这样做的好处就是提高了程序的执行效率，减少了if else 的使用同事优化代码结构。由于js是单线程的语言，所以程序的运行效率在是比较重要的，在开发中我们秉承如果能用switch case 的地方就不要用if else 可以用hook实现的尽量使用hook机制去实现。
这里我们举一个例子看一下：
例如我们在向后台进行ajax请求的时候，后台经常会返回我们一些常见的错误码，如：001代表用户不存在，002代表用户密码输入错误。003代表用户被锁定。这个时候我们要将错误友好的提示给用户。这个时候我们该怎样实现呢？
一般的写法可能是：
$.ajax(option,function(result){
var errCode = result.errC//错误码
if(errCode){
if(errCode ==&#39;001&#39;){
alert(&用户不存在&)
}else if(errCode ==&#39;002&#39;){
alert(&密码输入错误&)
}else if(errCode ==&#39;003&#39;){
alert(&用户被锁定&)
//登录成功
},function(err){
这样写其实是比较low低，稍微有点经验的可能会使用switch case来实现，但是这个两种写法都无法避免一个问题就是如果我的错误码特别多，那得写多少个if else和case 啊？但是如果使用hook写法的话就会简单好多，
首先我们先声明一个错误码钩子列表
var codeList
&001&:&用户不存在&,
&002&:&密码输入错误&,
&003&:&用户被锁定&
$.ajax(option,function(result){
var errCode = result.errC//错误码
if(!errCode){
alert(codeList[errCode]);
//登录成功
},function(err){
这样写的话代码结构更加清楚明了。这个例子是最简单的应用了的了。在Jquery 中hook机制被大量的使用，这里我们就Jquery中判断变量类型的type方法来具体看一下
通常我们在js中判断一个变量的数据类型？首先会想到type of 和 instanceof
如果是基本类型我们可以直接使用typeof，但是这种方式只能判断基本数据类型，如果是对象，它返回结果都市Object,如果变量是null它返回的也是Object。这个时候我们要准确的判断一般的写法可能会是：
function type(obj){
var type = &&;
if(obj==null){
type = obj.a.constructor.toString().split(&(&)[0].split(& &)[1]
在jquery中的实现是：
var class2type={};
var toString = Object.prototype.toS
jQuery.each(&Boolean Number String Function Array Date RegExp Object Error Symbol&,function(index,name){
class2type[&Object&+& name&]==name.toLowerCase();
type:function(obj){
if(obj==null){
return obj+&&;
return typeof obj ==&Object&||typeof obj ===&function&?class2type[toString.call(obj)]|||&object&:typeof obj
上面代码中
class2type = { &[object Boolean]&: &boolean&, &[object Number]&: &number&, &[object String]&: &string&, &[object Function]&: &function&, &[object Undefined]&: &undefined&, &[object Null]&: &null&, &[object Array]&: &array&, &[object Date]&: &date&, &[object RegExp]&: &regexp&, &[object Object]&: &object&, &[object Error]&: &error&};
设置一个类型钩子对象
toString.call(obj)就是Object.prototype.toString.call(arg)来细致判断obj的类型。在这里则转换成对象对应索引是否在class2type 中存在相应value，若存在则返回value判断，若不存在则返回object类型。
这样就实现了类型的判断。}