// 如果不用钩子的情况 // 考生分数以及父亲名 function examinee(name, score, fatherName) { return { name: name, score: score, fatherName: fatherName }; } // 审阅考生们 function judge(examinees) { var result = {}; for (var i in examinees) { var curExaminee = examinees[i]; var ret = curExaminee.score; // 判断是否有后门关系 if (curExaminee.fatherName === 'xijingping') { ret += 1000; } else if (curExaminee.fatherName === 'ligang') { ret += 100; } else if (curExaminee.fatherName === 'pengdehuai') { ret += 50; } result[curExaminee.name] = ret; } return result; } var lihao = examinee("lihao", 10, 'ligang'); var xida = examinee('xida', 8, 'xijinping'); var peng = examinee('peng', 60, 'pengdehuai'); var liaoxiaofeng = examinee('liaoxiaofeng', 100, 'liaodaniu'); var result = judge([lihao, xida, peng, liaoxiaofeng]); // 根据分数选取前三名 for (var name in result) { console.log("name:" + name); console.log("score:" + score); }
可以看到，在中间审阅考生这个函数中，运用了很多 else if 来判断是否考生有后门关系，如果现在业务场景发生变化，又多了几名考生，那么 else if 势必越来越复杂，往后维护代码也将越来越麻烦，成本很大，那么这个时候如果使用钩子机制，该如何做呢？
// relationHook 是个钩子函数，用于得到关系得分 var relationHook = { "xijinping": 1000, "ligang": 100, "pengdehuai": 50, // 新的考生只需要在钩子里添加关系分 } // 考生分数以及父亲名 function examinee(name, score, fatherName) { return { name: name, score: score, fatherName: fatherName }; } // 审阅考生们 function judge(examinees) { var result = {}; for (var i in examinees) { var curExaminee = examinees[i]; var ret = curExaminee.score; if (relationHook[curExaminee.fatherName] ) { ret += relationHook[curExaminee.fatherName] ; } result[curExaminee.name] = ret; } return result; } var lihao = examinee("lihao", 10, 'ligang'); var xida = examinee('xida', 8, 'xijinping'); var peng = examinee('peng', 60, 'pengdehuai'); var liaoxiaofeng = examinee('liaoxiaofeng', 100, 'liaodaniu'); var result = judge([lihao, xida, peng, liaoxiaofeng]); // 根据分数选取前三名 for (var name in result) { console.log("name:" + name); console.log("score:" + score); }
可以看到，使用钩子去处理特殊情况，可以让代码的逻辑更加清晰，省去大量的条件判断，上面的钩子机制的实现方式，采用的就是表驱动方式，就是我们事先预定好一张表（俗称打表），用这张表去适配特殊情况。当然 jQuery 的 hook 是一种更为抽象的概念，在不同场景可以用不同方式实现。
看看 jQuery 里的表驱动 hook 实现，$.type 方法：
(function(window, undefined) { var // 用于预存储一张类型表用于 hook class2type = {}; // 原生的 typeof 方法并不能区分出一个变量它是 Array 、RegExp 等 object 类型，jQuery 为了扩展 typeof 的表达力，因此有了 $.type 方法 // 针对一些特殊的对象（例如 null，Array，RegExp）也进行精准的类型判断 // 运用了钩子机制，判断类型前，将常见类型打表，先存于一个 Hash 表 class2type 里边 jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) { class2type["[object " + name + "]"] = name.toLowerCase(); }); jQuery.extend({ // 确定JavaScript 对象的类型 // 这个方法的关键之处在于 class2type[core_toString.call(obj)] // 可以使得 typeof obj 为 "object" 类型的得到更进一步的精确判断 type: function(obj) { if (obj == null) { return String(obj); } // 利用事先存好的 hash 表 class2type 作精准判断 // 这里因为 hook 的存在，省去了大量的 else if 判断 return typeof obj === "object" || typeof obj === "function" ? class2type[core_toString.call(obj)] || "object" : typeof obj; } }) })(window);
相关文章
精彩导读
热门资讯
关注我们
