钩子函数的运行机理

在星球被问到钩子函数的运行机理，感觉非常有必要用一篇专门的文章来阐述一下，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