本文介绍了JavaScript的装饰器概念，它是ES2016的stage-2草案，已经在babel中广泛应用。通过示例展示了如何配置和使用装饰器，包括修饰类、修饰属性和修饰方法。文中提供了一个详细的项目目录，包含相关的HTML、JS文件和babel配置，并阐述了编译和运行过程。
简介：
装饰器是ES2016 stage-2的一个草案，但是在babel的支持下，已被广泛使用，有点类似java里面的注解。
提案地址Class and Property Decorators
用法：
如果我们要在我们项目中使用最新的stage-2的装饰器提案怎么做呢？
Preset: babel-preset-stage-1
Plugins: babel-plugin-transform-decorators, babel-plugin-transform-decorators-legacy
First Pull Request: babel/babylon#587 by @peey
Babylon Label: Spec: Decorators
代码如下：
@frozen class Foo {
@configurable(false) @enumerable(true) method() {
}
}
function frozen(constructor, parent, elements) {
return {
constructor,
elements,
finisher(constructor) {
Object.freeze(constructor.prototype)
Object.freeze(constructor)
}
}
}
function configurable(configurable) {
return decorator;
function decorator(previousDescriptor) {
return {
...previousDescriptor,
descriptor: {
...previousDescriptor.descriptor,
configurable
}
}
}
}
function enumerable(enumerable) {
return decorator;
function decorator(previousDescriptor) {
return {
...previousDescriptor,
descriptor: {
...previousDescriptor.descriptor,
enumerable
}
}
}
}
babel的更多提案大家可以参考：https://github.com/babel/proposals
Demo:
说了那么多，我们直接上代码。
项目目录：
首先我们创建一个叫decorator-demo的项目：
decorator-demo
demo
index.html//demo入口文件
lib //babel编译完毕后的文件
src //工程源文件
demo1.js //demo测试入口
babel.config.js //babel配置文件
package.json //项目清单
index.html：
入口文件引用一个编译好的demo1.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../lib/demo1.js"></script>
</body>
</html>
demo1.js:
利用装饰器修改name属性值为“yasin”
/**
* @author YASIN
* @version [React-Native V01, 2020/6/14]
* @date 2020/6/14
* @description Person
*/
class Person {
@defineName name;
}
function defineName(target, property, descriptor) {
delete descriptor.initializer;
return {
...descriptor,
value: "yasin"
};
}
document.write(new Person().name);
babel.config.js:
babel配置文件，不懂的小伙伴可以查看babel官网，也可以参考我之前写的一篇babel的文章 babel源码解析一
module.exports = {
"presets": [
["@babel/env", {
"modules": false}]
],
"plugins"
最低0.47元/天 解锁文章
扫一扫
990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
