浅谈ES6中的装饰器

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

本篇文章给大家带来的内容是关于浅谈ES6中的装饰器，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

Decorator

装饰器主要用于:

装饰类
装饰方法或属性

装饰类

@annotation
class MyClass { }

function annotation(target) {
   target.annotated = true;
}

class MyClass { @readonly method() { } } function readonly(target, name, descriptor) { descriptor.writable = false; return descriptor; }

Babel

安装编译

我们可以在 Babel 官网的 Try it out，查看 Babel 编译后的代码。

不过我们也可以选择本地编译：

npm init

npm install --save-dev @babel/core @babel/cli

npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties新建 .babelrc 文件
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", {"loose": true}]
  ]
}再编译指定的文件
babel decorator.js --out-file decorator-compiled.js装饰类的编译
编译前：
@annotation
class MyClass { }

function annotation(target) {
   target.annotated = true;
}编译后：
var _class;

let MyClass = annotation(_class = class MyClass {})   关键词：浅谈ES6中的装饰器

浅谈ES6中的装饰器

装饰类

装饰方法或属性

Babel

安装编译

装饰类的编译