钩子函数的运行机理

在星球被问到钩子函数的运行机理，感觉非常有必要用一篇专门的文章来阐述一下，OK，咱们快速的来过一下

一、什么是钩子

Vue 当中有钩子函数，Git 的很多命令也有对应的 Hook，Webpack 的插件机制也是基于“钩子”，不知道你第一次听到钩子这个词是在什么地方，如果都有所了解的话，那么更需要来思考一下这之间的联系，我是这么理解的：

钩子（hook）就是一些具有既定生命周期的框架工具，在生命周期的各个阶段预留给用户执行一些特定操作的口子，这其实是一种面向切面编程

这里有两个关键词，既定的生命周期 和 面向切面

只有拥有既定的生命周期的框架工具才需要预留用户自定义操作的口子，举个简单的栗子（对于不了解的同学好像也未必简单）：gulp 的工作方式是定义一个串行的任务管道流，你可以自由的拼接各种任务，这就叫做没有既定的生命周期，这个时候钩子毫无意义；但是 webpack 就不太一样了，它已经定义好了分析、编译、打包、输出的整个工作流程，倘若你想在编译结束之后打包输出之前做一些事情，而 webpack 又不给你任何介入的钩子，那你的任何努力都会白费，这就是钩子的意义所在，还记得下面这两张图出自哪篇文章么？

gulp 管道流

 

webpack 生命周期

 

为什么还要提到面向切面，我第一次听到这个词还是在写 java 的时候，它是 spring 的核心思想之一（不得不说，前端从石器时代发展到今天的工业时代，大量借鉴了后台的编程思想，所谓触类旁通，那个道理就是这么讲来着）。发挥想象力，所谓的钩子，是不是在框架工具的某个阶段，切一刀，插入一个或者多个特定的操作，想不清楚的都面壁思过去~~

二、钩子的运行机理

前面说了，钩子就是在框架工具的某个阶段插一刀，执行一个或者多个特定的操作，那不就是调用一个或者多个用户定义的函数么？

直接一点的，在框架工具生命周期的某个阶段调用约定好的函数，例如 Vue，当组件渲染完毕，调用组件的 mounted 方法，当组件更新完毕，执行组件的 updated 方法

横一点的，实现一套事件机制，在生命周期的某个阶段，触发特定的事件，执行注册在该事件下的所有函数，说到事件，又有人头皮发麻了，so，我又贴心的画了一个图：

 

简单的事件发布订阅机制

事件的发布订阅机制的核心在于 事件池，订阅事件的一方将具体的操作 push 到事件池的某个 key 值下面，发布事件的一方，找到事件池的某个 key 值下订阅的所有函数依次执行（函数之间也有可能有依赖关系），秉承

天下难事必作于易

的信念，如果将上述的事件池通过一个内存中的 hashMap 来表示，你应该就可以轻松的收入囊中了（类比Js的事件循环，其实只是用了独立的线程来维护事件池）

其实很多框架工具的事件机制，还真的不过是一个 hashMap 来维护的那么简单，例如，Webpack 中采用的 Tapable

三、Tapable 介绍

之前在研究 webpack 的时候翻译过 Tabpable 的文档，迄今为止，唯一的翻译作品（尴尬~），由此去

四、后话

菲麦前端 是一个让知识深入原理的知识社群，欢迎加微勾搭：facemagic2014

作者：小虫巨蟹
链接：https://www.jianshu.com/p/442534e385b9
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

 

钩子函数、回调函数、注冊函数。挂钩子这些我们代码中常常涉及到的东西，是否已经困扰你非常久了？它们到底是怎么回事，到底怎么用？以下我来为你一一解答。

什么是钩子函数？

钩子函数也叫回调函数，是通过函数指针来实现的。那我们来看看什么是函数指针。

首先看看下面样例：

int *p;

int a，b。

我们能够让指针p先后指向a, b，这样，p就先后代表了不同变量的地址

p = &a;

p = &b;

相同地。函数的指针能够指向不同的函数，从而完毕不同的功能。

 

比如，定义函数指针：

int (* g_pFun) (int x, int y);

有两个函数：

/*返回两个參数中的最大值*/

int Max(int x, int y)

{

}

/*返回两个參数中的最小值*/

int Min(int x, int y)

{

}

int main(int argc, char* argv[])

{

    int r;

/*我们让函数指针先后指向不同的函数*/   

int a = 10;

    int b = 15;

    g_pFun = Max;

    r= g_pFun(a, b); /*相当于运行函数Max*/

    printf("%d\n", r);

    g_pFun = Min;

    r= g_pFun(a, b); /*相当于运行函数Min*/

    printf("%d\n", r);

    return 0;

}

分别输出：15

          10

这样，相同调用g_fun 。两次却完毕不同的功能，奇妙吧？这就是函数指针的妙用。

Max。Min函数就是钩子函数了，把函数指针g_pFun指向函数Max。Min的过程。就是“挂钩子”的过程，把钩子函数“挂”到函数指针上。非常形象。

有人可能有疑问。那么这里为什么不直接调用Max和Min函数呢？

这是由于。我们在写main函数的时候，可能还不知道它会完毕什么功能。这时候留下函数指针作为接口，能够挂上不同的函数完毕不同的功能，到底运行什么功能由钩子函数的编写者完毕。

 

那我们平时怎么用的呢？

在我们的代码中，经常把挂钩子的过程叫做注冊，会提供一个注冊函数。让使用者把自己编写的钩子函数挂在已经声明的函数指针上，这个注冊函数的參数就是我们的函数指针了。比方，我们能够给刚才的函数指针提供一个注冊函数：

int RegFun( int (* pFun)(int x, int y) ) /*注冊函数的參数是函数指针*/

{

    g_pFun = pFun;

    return 0;

}

调用RegFun(Max)和RegFun(Min),就能够把钩子函数挂上去了。

 

注意：为了便于使用，函数指针往往被声明为全局变量。这也是刚才把函数指针的名字命名为g_pFun的原因。

以下我们来进行一下实战演习，比方，平台部分要运行某一个操作，可是详细的操作还不确定，我们完毕这种代码：

int (* g_pFun) (int x, int y);  /*函数指针*/

int Plat()

{

     int r;

     int a = 10;

     int b = 15;

     r= g_pFun(a, b); /*这里要做一个操作，可是详细的操作还不确定*/

     printf("%d\n", r);

     return 0;

}

另外。平台部分再提供一个注冊函数：

int RegFun(int (* pFun)(int x, int y))

{

       g_pFun = pFun;

       return 0;

}

 

应用模块完毕详细的函数的功能：

int Max(int x, int y)

{

    if(x>y)

        return x;

    else

        return y;

}

int Min(int x, int y)

{

    if(x<y)

       return x;

    else

       return y;

}

由于应用模块无法改动平台的代码。仅仅能调用平台提供的注冊函数：

假设应用模块注冊：

 RegFun(Max);

则执行 main 函数时。输出：15

假设应用模块注冊：

RegFun(Min)

执行 main 函数时，输出：10

这样，平台部分无需改动不论什么代码，仅仅是应用模块注冊了不同的钩子函数，就行完毕不同的功能。这就是钩子函数的妙用。