關於 ES7 提案 Decorator

最新推荐文章于 2021-08-13 16:49:48 发布

VIP文章林cc

最新推荐文章于 2021-08-13 16:49:48 发布

阅读量221

点赞数 1

分类专栏： JavaScript/TypeScript 文章标签： javascript es7 decorator

本文链接：https://blog.csdn.net/weixin_46803507/article/details/117236874

版权

關於 ES7 提案 Decorator

前言
正文
結語
參考

前言

會寫這篇是因為這陣子正在學習 react，因此也學了一個 react 協助狀態管理的庫 MobX，而在 MobX 中就有一個東西叫做 decorators(裝飾器)，覺得這個東西還挺神奇的。後來和超悠閒大老聊天才發現原來 MobX 這個裝飾器的原理就是 es6 提供的 decorators，還是太菜了。所以趕緊來補補這塊還沒掌握的知識點。

正文

在正式進入 decorators 之前，我們是不能直接在 js 文件中使用的，需要借助 babel 的功能，具體是要靠一個核心插件 babel-plugin-transform-decorators-legacy，這個插件我們在 MobX 那篇也提過要用到 React + MobX - 完全上手指南。下面就開始我們的準備工作吧！

decorators 準備工作

要做這些前置工作是因為目前本地 File 協議還不支持 decorator，因為其實 decorator 是 es7 的提案。現在只支持在服務器上或是 localhost。所以下面我們就是要來準備 localhost 環境。

初始化項目

首先我們新建一個文件夾，並且執行 npm init 初始化項目，這時候文件夾下應該會出現一個 package.json 文件了。

安裝依賴

我們先安裝如下依賴，主要目的就是通過 webpack 以及 webpack-dev-server 的配置使我們的 js 文件經過 webpack 處理，並加入所需的 babel 依賴和插件，這樣就可以在我們的 js 文件中使用 decorators，並通過瀏覽器看到效果打印等等。

webpack
webpack-cli
webpack-dev-server
babel-core
babel-loader@7
babel-plugin-transform-decorators-legacy

npm install webpack webpack-cli webpack-dev-server babel-core babel-loader@7 babel-plugin-transform-decorators-legacy --save-dev

不過因為 webpack 的東西版本越來越多，很容易出現不一致的問題，總之上面的依賴直接想跑應該是不行的，會報一個 Error: Cannot find module 'webpack-cli/bin/config-yargs'，就是因為 webpack-cli 和 webpack-dev-server 版本不一致造成。

解決辦法是要降低 webpack-cli 版本：

npm i [email protected] -D

webpack.config.js

在項目文件下新建一個 webpack.config.js 文件，配置 webpack，代碼如下：

const path = require("path");
module.exports = {
   
  entry: path.join(__dirname, "index.js"),
  output: {
   
    path: path.join(__dirname),
    filename: "bundle.js",
  },
  module: {
   
    rules: [
      {
   
        test: /\.js$/,
        loader: "babel-loader",
        exclude: path.join(__dirname, "node_modules"),
        options: {
   
          plugins: ["transform-decorators-legacy"],
        },
      },
    ],
  },
};

index.html

新建一個 index.html 如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>js decorator</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

index.js

隨便寫什麼都可以，不過一定要建，因為 webpack.config.js 中用到這個 index.js 作為入口。

配置 scripts

在 package.json 中配置啟動命令 start，如下：

"scripts": {
   
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --config webpack.config.js"
},

到這邊應該配置安裝等工作都差不多完成了，文件結構如下：

/ src
    / node_modules
    index.html
    index.js
    package-lock.json
    package.json
    webpack-config.js

接下來我們只要在命令行的 /src 下運行 npm run start 就可以訪問 http://localhost:8080/，終於可以開始本文的主角 decorators 了。

類的修飾

其實 decorator 就是裝飾器，其實就是一個函數，用來修改類的行為。而裝飾器對類的修改是發生在編譯期間的，而不是在運行期間。

function testable(target) {

最低0.47元/天解锁文章

林cc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
關於 ES7 提案 Decorator

關於 ES7 提案 Decorator前言正文decorators 準備工作類的修飾方法的修飾函數的修飾core-decorators.js@autobind@readonly@override@deprecate (别名@deprecated)@suppressWarningsMixin 應用decorators 總結結語參考前言會寫這篇是因為這陣子正在學習 react，因此也學了一個 react 協助狀態管理的庫 MobX，而在 MobX 中就有一個東西叫做 decorators(裝飾器)，覺得這個
复制链接

扫一扫