ES6 装饰器及webpack下配置装饰器语法

怼烎@ 2022-12-02 04:07 282阅读 0赞

## ES6装饰器 ##

> 我们在使用ES6开发是，如使用umijs+dva开发，经常会使用`@connect()`，然后，我们的组件中的属性，就会用`dispacth`方法，同时，也会注入响应的`model`。如何实现的呢？

其实就是ES6的装饰器。在设计模式中，有一种模式叫，`装饰器模式`，那么，ES6中在语法`@`其实就是一种装饰器模式的实现（`@`的本质其实是语法糖），同事，也可以理解AOP(面向切面的编程)的实现

#### @装饰器的本质 ####

ES6中装饰器的本质其实是一个函数，如下：

@myDecorator
    class A { }
    
    // 等同于
    class A { }
    A = myDecorator(A) || A;

也就是定义了一个`myDecorator`的函数，该函数的第一个参数为紧跟在下面的类`A`  
然后将改函数的返回的值重新赋值给A，如果函数没有返回值，则，默认返回`A`本身

那么装饰啥呢？

#### 对类的装饰 ####

通常对类的装饰通常，是添加方法，或修改方法  
如何实现对被装饰类的方法进行修改或添加方法呢？  
主要是通过对象的原型链属性 `prototype`实现，如我们需要对A添加一个打印的方法

function myDecorator(target) { 
    	target.show = function () { 
    		console.log('static function show...')
    	}
    	target.prototype.print = function() { 
    		console.log('hello')
    	}
    }
    
    @myDecorator
    class A { }
    
    const a = new A()
    a.print()  // output>> hello

> 通过prototype添加的`target.prototype.print`与直接添加`target.show`是有却别的，前者，只有实例化后方可使用，后者，其实可以理解为静态方法，可以直接调用的。

如果装饰器需要的配置，可以返回一个方法

function myDecorator(p1,p2) { 
    	return function(target){ 
    		target.prototype.p = p1+p2
    		target.prototype.print = function() {  console.log(this.p)}
    	}
    }
    
    // 使用时
    @myDecorator(12, 22)
    class A { }
    const a = new A()
    a.print() // output>> 34

#### 对属性的装饰 ####

属性修饰器的函数，接受3个参数

class Person { 
      @readonly
      name() {  return `${ this.first} ${ this.last}` }
    }
    
    function readonly(target, name, descriptor){ 
      // descriptor对象原来的值如下
      // { 
      // value: specifiedFunction,
      // enumerable: false,
      // configurable: true,
      // writable: true
      // };
      descriptor.writable = false;
      return descriptor;
    }

上面使用`@readonly`可以等价如下

readonly(Person.prototype, 'name', descriptor);
    // 类似于
    Object.defineProperty(Person.prototype, 'name', descriptor);

对属性的修饰器，经常会使用`call、apply、bind`

## 如何配置开发环境下的@装饰器(webpack下配置装饰器) ##

要想正常使用@装饰函数，还得要进行配置的，如何配置呢？

step.1 首先需要安装`@babel/plugin-proposal-decorators`

yarn add @babel/plugin-proposal-class-properties --dev

step.2 配置`babel.config.js`

module.exports = { 
      presets: [ "@babel/preset-env", "@babel/preset-react" ],
      plugins: [ 
        "@babel/plugin-transform-arrow-functions", 
        ["@babel/plugin-proposal-decorators", { "legacy": true}],  // 这里是关键
        ["@babel/plugin-proposal-class-properties", {  "loose": false }],   // 这个是编译类的方法
      ]
    }

注意 `@babel/plugin-proposal-decorators` 需要排前在 `@babel/plugin-proposal-class-properties` 的前面，否则会如下错

ERROR in ./src/UiReactComponets/BaseSearchBarUI/index.jsx
    Module build failed: SyntaxError: F:\bing_tmp\cim-engine-js\cim-core-js\src\UiReactComponets\BaseSearchBarUI\index.jsx: Decorators are not enabled.
    If you are using ["@babel/plugin-proposal-decorators", {  "legacy": true }], make sure it comes *before* "@babel/plugin-proposal-class-properties" and enable loose mode, like so:
            ["@babel/plugin-proposal-decorators", {  "legacy": true }]
            ["@babel/plugin-proposal-class-properties", {  "loose": true }]

配置正确后就可以正常使用了`@myDecorator`语法了

#### 推荐一些常见的 好用的装饰器 `core-decorators.js` ####

[core-decorators.js][]常用的如下：

@autobind 装饰器使得方法中的this对象，绑定原始对象。
    @readonly 装饰器使得属性或方法不可写。
    @override 装饰器检查子类的方法，是否正确覆盖了父类的同名方法，如果不正确会报错。
    @deprecate或deprecated 装饰器在控制台显示一条警告，表示该方法将废除。

参考资料1: [装饰器][Link 1]  
参考资料2： [简单的装饰器设计][Link 2]  
参考资料3： [装饰配置][Link 3]  
参考资料4：[@babel/plugin-proposal-class-properties][babel_plugin-proposal-class-properties]

[core-decorators.js]: https://github.com/jayphelps/core-decorators
[Link 1]: https://es6.ruanyifeng.com/#docs/decorator
[Link 2]: https://www.cnblogs.com/goloving/p/8001530.html
[Link 3]: https://www.cnblogs.com/m2maomao/p/11411233.html
[babel_plugin-proposal-class-properties]: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties