详解JavaScript中的before-after-hook钩子函数
before-after-hook
最近看别人的代码，接触到一个插件，before-after-hook，百度搜一圈也没有看到什么地方有教程，看这个字面意思是一个hook，和axios里面的拦截器，vue-router里面的导航守卫类似。插件名字暂且叫它“前后钩子”吧，本文简单介绍这个插件的使用方法。
1.单独的钩子
先看一个简单的例子，代码如下：
import Hook from 'before-after-hook'
const hook = new Hook.Singular()
function getData(options) {
const result = hook(fetchData, options)
}
//设置钩子
hook.before(beforHook)
hook.error(errorHook)
hook.after(afterHook)
getData({id: 123})
function fetchData(options) {
console.log('fetchData', options)
return options
}
function handleData(res) {
}
function handleGetError(e) {
}
function beforHook(e) {
console.log('beforHook', e)
}
function errorHook(e) {
console.log('errorHook', e)
}
function afterHook(e) {
console.log('afterHook', e)
}
输出结果如下图1：
从结果可以看出，在执行fetchData方法的时候，先去执行beforeHook，执行完fetchData语句的时候，又执行了afterHook。如果在执行fetchData的时候抛出一个错误，会触发errorHook，只需在上面的fetchData方法中抛出一个错误，代码如下：
console.log('getData', options)
throw new Error('error')
return options
}
执行结果如下图2:
从执行结果上可以看到当fetchData方法报错的时候会触发errorHook。
before-after-hook简单用法就是先用钩子钩住一个方法，然后再设置这个钩子的处理函数：beforeHook，errorHook，afterHook，对应的在这个方法调用之前，调用出错，调用之后触发相应的钩子函数。
2.Hook collection
Hook.Colleciton和Hook.Singuar本质上没有什么不同，Hook.Collection创建的钩子来处理一些有相同的名称的钩子。对于这两种钩子，他们的执行顺序如下：
- beforeHook
- fecchFromDatabase
- afterHook
- handleData
来看下面的代码
import Hook from 'before-after-hook'
const hookCollection = new Hook.Collection()
function getData(options) {
try {
hookCollection('get', fetchData, options)
handleData(options)
} catch (e) {
handleGetError(e)
}
}
hookCollection.before('get', beforHook)
hookCollection.error('get', errorHook)
hookCollection.after('get', afterHook)
getData({id: 123})
function fetchData(options) {
console.log('getData', options)
return options
}
function beforHook(e) {
console.log('beforHook', e)
}
function errorHook(e) {
console.log('errorHook', e)
}
function afterHook(e) {
console.log('afterHook', e)
}
function handleData(data) {
console.log('handleData', data)
}
function handleGetError(e) {
console.log('handleGetError', e)
}
输出结果如下图3：
beforeHook可以在将请求参数传递给fetchDatabase的时候修改传入的参数。
在beforeHook和fetchFromDatabase的时候如果有错误，触发errorHook。
如果再afterHook里出现错误，会调用handleGetError，而不是afterHook，handleData。
注意他们的名字必须一致，不然会执行不到。
到此这篇关于详解JavaScript中的before-after-hook钩子函数的文章就介绍到这了,更多相关JavaScript before-after-hook钩子函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要是对JS保留两位小数,多位小数的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了js+canvas简单绘制圆圈的方法,涉及JavaScript调用canvas组件实现简单图形绘制的相关技巧,需要的朋友可以参考下2016-01-01
js运动框架_包括图片的淡入淡出效果，需要的朋友可以参考一下2013-05-05
Javascript中的方法链（Method Chaining）介绍
这篇文章主要介绍了Javascript中的方法链（Method Chaining）介绍,本文讲解了Javascript Method Chaining、Method Chaining 使用、Method Chaining VS prototype Chaining等内容,需要的朋友可以参考下2015-03-03
例如处理事件的时候，有时候需要知道当前点击的是第几个子节点，而HTML DOM本身并没有直接提供相应的属性，需要自己来计算。感兴趣的朋友可以了解下本文2013-10-10
这篇文章主要介绍了JavaScript设计模式中的观察者模式，观察者设计模式适用于监听一对多的操作，例如监听对象属性的修改等等，观察者模式能够降低代码耦合度，提升可扩展性2022-06-06
这篇文章主要介绍了JS操作XML的方法,结合实例形式总结分析了JavaScript加载与解析XML文件及字符串的相关技巧,需要的朋友可以参考下2015-12-12
下面小编就为大家带来一篇基于对象合并功能的实现示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
遍历是程序中最常用的语法之一。在JS里，小到数据处理，大到列表渲染，配合ajax对json数据的支持，遍历的使用场景也越来越多2014-12-12
这篇文章主要介绍了JS实现计算小于非负数n的素数的数量算法,可实现针对一定范围内素数个数的统计功能,涉及javascript数值运算相关操作技巧,需要的朋友可以参考下2019-02-02
最新评论