【js/css】装饰器全解

最新推荐文章于 2023-07-23 19:27:16 发布

当白

最新推荐文章于 2023-07-23 19:27:16 发布

阅读量236

点赞数

分类专栏： js/css 文章标签： js 装饰器 babel ts

本文链接：https://blog.csdn.net/dangbai01_/article/details/118540366

版权

js/css 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

本文介绍了装饰器模式在结构型设计中的应用，重点讲解如何使用TypeScript和Babel进行转译来支持装饰器。通过tsc编译TypeScript代码，或者配置.babelrc文件结合babel-plugin-transform-decorators-legacy插件来转译JavaScript代码，实现装饰器功能。文章适合熟悉这两种工具的开发者阅读。

摘要由CSDN通过智能技术生成

装饰器模式是结构型的设计模式之一；
结构型设计模式的主要特定就是给外挂，尽量不改动原代码；
使用的时候在转译阶段还需要一些操作，
主要有两种方法：

ts
babel

我们这里先分别说下这两种：

使用tsc转译下
npm i typescript -g

tsc flat-1-1-装饰器使用.ts

文件夹出现了flat-1-1-装饰器使用.js
用node运行这个js文件就可以了

babel

npm install babel-preset-env babel-plugin-transform-decorators-legacy --save-dev

在.babelrc中
{
  "presets": ["env"],
  "plugins": ["transform-decorators-legacy"]
}

全局装cli
npm install babel-cli -g

输出转译文本,-o输出前的文件是输入，-o后的是输出文件
babel test.js -o babel_test.js

然后我们就可以用常规手段运行babel_test.js了

todo …