钩子函数的运行机理

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

1、什么是钩子

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

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

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

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

gulp 管道流

webpack 生命周期

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

2、钩子的运行机理

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

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

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

简单的事件发布订阅机制

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

天下难事必做于易

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

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

3、Tapable 介绍

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

4、后话

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