# es7-decorator

**Repository Path**: duans/es7-decorator

## Basic Information

- **Project Name**: es7-decorator
- **Description**: 关于es7中装饰器的点滴, 旨在更好的拥抱angular
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-09-22
- **Last Updated**: 2025-01-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 关于es7的decorator装饰器

## 装饰器的介绍

- 装饰器可以帮助我们在调用函数之前改变函数的功能, 在不改变原来函数的基础上, 给函数动态赋予一些能力
- 装饰主要用于修饰类的成员属性和成员方法, 在angular中大量使用到了装饰器:`Component`,`NgModule`

## 兼容器

- 目前大部分浏览器是不支持装饰器语法的
- 所以必须借助babel来解析装饰器语法


## 环境搭建
### bebel所需依赖
- `@babel/plugin-proposal-decorators`
### `.babelrc`配置文件

```json
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy": true
            }
        ],
        "@babel/plugin-proposal-class-properties"
    ]
}
```

## webpack

- `webpack.config.js`

```
const path=require('path');
const HtmlPlugin=require('html-webpack-plugin');
const htmlPlugin=new HtmlPlugin({
    template:path.join(__dirname,'src/index.html'),
    filename:'index.html'
});
module.exports={
    mode:'development',
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'main.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/.less/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test: /\.js|jsx$/,
                use: {
                    loader: 'babel-loader'
                },
                exclude: /node_modules/
            }
        ]
    },
    plugins:[htmlPlugin],
    resolve:{
        extensions:['.jsx','.js','json'],
        alias:{
            '@':path.join(__dirname,'src')
        }
    }
}
```


## package.json

```
{
  "name": "es6-7-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack-dev-server --hot --port 3000 --compress",
    "build": "webpack"
  },
  "devDependencies": {
    "@babel/cli": "^7.6.0",
    "@babel/core": "^7.6.0",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-decorators": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  },
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  }
}
```


## 装饰器语法介绍

### 定义装饰器

```js
// 注意这里的 `target` 是 `Dog.prototype`
function readonly(target, key, descriptor) {
    // console.log(target,key,descriptor);
    descriptor.writable = false;
    return descriptor;
}


// 日志装饰器

function log(msg) {
    return function(target, key, descriptor){
        // 将原来的函数体保存起来
        let value = descriptor.value;
        console.log(msg);
        value();
    }
}
```

## 调用装饰器

```js
class Dog {
    constructor(props) {
        this.name = props.name;
        this.gender = props.gender;
    }
    // 只读装饰器
    @readonly
    static version='v-1.1.1';

    @log('调用了bark方法')
    bark() {
        return 'wang!wang!'
    }
    sayHi = () => {
        console.log('sayHi');
    }

}
```

# 参考文档
[Decorators in ES7-知乎](https://zhuanlan.zhihu.com/p/20139834)