【JavaScript】------- JavaScript 钩子机制（hook）

亦凉 2021-11-15 11:38 499阅读 0赞

> 1. 在 jQuery 2.0.0 之前的版本，对兼容性做了大量的处理，正是这样才让广大开发人员能够忽略不同浏览器的不同特性的专注于业务本身的逻辑。而其中，钩子机制在浏览器兼容方面起了十分巨大的作用。
> 
> 钩子是编程惯用的一种手法，用来解决一种或多种特殊情况的处理。
> 
> 简单来说，钩子就是适配器原理，或者说是表驱动原理，我们预先定义了一些钩子，在正常的代码逻辑中使用钩子去适配一些特殊的属性，样式或事件，这样可以让我们少写很多 else if 语句。
> 
> 如果还是很难懂，看一个简单的例子，举例说明 hook 到底如何使用：
> 
> 现在考公务员，要么靠实力，要么靠关系，但领导肯定也不会弄的那么明显，一般都是暗箱操作，这个场景用钩子实现再合理不过了。

>     // relationHook 是个钩子函数，用于得到关系得分
>     var relationHook = {
>         "xijing": 1000,   
>         "ligang": 100,
>         "pengde": 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, 'xijing');
>     var peng = examinee('peng', 60, 'pengde');
>     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 是一种更为抽象的概念，在不同场景可以用不同方式实现。