js hook技术

简介

hook技术是软件系统设计的常用机制，也称它为钩子，使用好hook能极大的提高开发体验。也是我开发经常使用的东西，在js中通常使用defineProperty进行hook开发。

defineProperty 函数介绍：

图片介绍引用自MDN!

image.png

首先一个简单的例子()：

class hook_test{
    test(){
        console.dir("test")
    }
}

my_hook = new hook_test
Object.defineProperty(my_hook,"test",{
    configurable: true,
    enumerable: true,
    writable: true,
    value: function () {
        console.dir("hook test ok!")
    }
})
my_hook.test()

输出:

hook test ok!

可以看到我们调用my_hook.test 后，原本test 方法被我们成功hook了，只打印出来了
hook test ok!之前的函数内容被丢弃了。

参数介绍

configurable: 表示能否通过delete删除此属性，能否修改属性的特性，或能否修改把属性修改为访问器属性，如果直接使用字面量定义对象，默认值为true
enumerable: 表示该属性是否可枚举，即是否通过for-in循环或Object.keys()返回属性，如果直接使用字面量定义对象，默认值为true
writable: 能否修改属性的值，如果直接使用字面量定义对象，默认值为true
value:该属性对应的值，默认为undefined

使用介绍

仅仅通过上面的例子不足以说明钩子是多么的实用，下面将多种使用方法补充上来。

使用方式一(增加第三方模块功能):

class hook_test{
    test(){
        console.dir("test")
    }
}

my_hook = new hook_test
Object.defineProperty(my_hook,"nihao",{
    configurable: true, 
    enumerable: true, 
    writable: true, 
    value: function () {
        console.dir("nihao")
    }
})
my_hook.nihao()

输出:
nihao
解析: 可以自己给第三方模块新增功能，其实是增加在函数原型上面。

使用方式二(扩展第三方模块功能):

class hook_test{
    test(){
        console.dir("test")
    }
}

my_hook = new hook_test
_test = my_hook.test  //存放修改前的test
Object.defineProperty(my_hook,"test",{
    configurable: true,
    enumerable: true,
    writable: true,
    value: function () {
        console.dir("test  new!")
        return _test()
    }
})
my_hook.test()

输出:
test new!
test

解析: 常用来添加监控点,或函数重封装,如重封装axios实现测试，线上场景区分。

使用方式三(带参数的hook)

class hook_test{
    test(str){
        console.dir("test:" + str)
    }
}

my_hook = new hook_test
_test = my_hook.test
Object.defineProperty(my_hook,"test",{
    configurable: true,
    enumerable: true,
    writable: true,
    value: function () {
        const config = arguments[0] || {};
        return _test(config + " hook ok!")
    }
})
my_hook.test("renran")

输出
test:renran hook ok!
解析:参数要使用arguments来进行获取，它是一个list，多个参数用下标取值。

更多信息

image.png

以上完毕!