JavaScript 的Decorator 装饰器介绍

简介: Angular大量使用了JS的装饰器特性,先看 ruanyifeng的介绍使用babel转换步骤 :npm install -g babel-clinpm init; npm install --save-dev babel-plugin-t...

Angular大量使用了JS的装饰器特性,先看 ruanyifeng的介绍

使用babel转换
步骤 :

  1. npm install -g babel-cli
  2. npm init; npm install --save-dev babel-plugin-transform-decorators-legacy
  3. babel --plugins transform-decorators-legacy 1.js > 1.es5.js

例1

@eat
class Person {
  constructor() {}
}

function eat(target, key, descriptor) {
  console.log('吃饭');
  console.log(target);
  console.log(key);
  console.log(descriptor);
  target.prototype.act = '我要吃饭';
}

const jack = new Person();
console.log(jack.act);

转换后

var _class;

let Person = eat(_class = class Person {
  constructor() {}
}) || _class;

function eat(target, key, descriptor) {
  console.log('吃饭');
  console.log(target);
  console.log(key);
  console.log(descriptor);
  target.prototype.act = '我要吃饭';
}

const jack = new Person();
console.log(jack.act);

// 吃饭
// [Function: Person]
// undefined
// undefined
// 我要吃饭

例2

function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list);
  };
}


const Foo = {
  foo() { console.log('foo') }
};

@mixins(Foo)
class MyClass {}

let obj = new MyClass();
obj.foo() // "foo"

babel 后

var _dec, _class;

function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list);
  };
}

const Foo = {
  foo() {
    console.log('foo');
  }
};

let MyClass = (_dec = mixins(Foo), _dec(_class = class MyClass {}) || _class);


let obj = new MyClass();
obj.foo(); // "foo"


相关文章
|
18天前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
22 2
|
3月前
|
JavaScript 前端开发
|
4月前
|
Web App开发 JavaScript 前端开发
探索Node.js后端开发之旅深入浅出Python装饰器
【8月更文挑战第29天】在数字化时代,掌握一门后端编程语言变得尤为重要。Node.js作为一种基于JavaScript的服务端平台,因其高性能、轻量级的特性而广受欢迎。本文将引导读者了解Node.js的基本概念、核心模块以及如何利用它来构建一个简易的Web服务器。通过本文的学习,你将获得使用Node.js进行后端开发的初步技能,并理解其在现代Web开发中的应用价值。
|
7月前
|
JavaScript 前端开发
什么是 JavaScript 中的装饰器,怎么用
什么是 JavaScript 中的装饰器,怎么用
115 0
|
缓存 JavaScript 前端开发
《现代Javascript高级教程》装饰器
JavaScript修饰器:简化代码,增强功能 引言 在JavaScript中,修饰器(Decorator)是一种特殊的语法,用于修改类、方法或属性的行为。修饰器提供了一种简洁而灵活的方式来扩展和定制代码功能。本文将详细介绍JavaScript修饰器的概念、语法和应用场景,并提供相关的代码示例。
105 0
index.js:39 错误:修饰类属性失败。请确保提案类属性已启用并设置为使用松散模式。要在规范模式下将提案类属性与修饰器一起使用,请在阶段 2 中等待下一个主要版本的装饰器。 #79
index.js:39 错误:修饰类属性失败。请确保提案类属性已启用并设置为使用松散模式。要在规范模式下将提案类属性与修饰器一起使用,请在阶段 2 中等待下一个主要版本的装饰器。 #79
83 0
|
设计模式 JavaScript 前端开发
JavaScript 装饰器介绍
装饰器是一种包装代码的简单方法,它也是一种设计模式,能够扩展包装代码的功能而不修改它。
|
JavaScript 前端开发 Python
JS 装饰器,一篇就够
更多文章,请在Github blog查看 在 ES6 中增加了对类对象的相关定义和操作(比如 class 和 extends ),这就使得我们在多个不同类之间共享或者扩展一些方法或者行为的时候,变得并不是那么优雅。
1904 0
|
JavaScript 前端开发 存储
Javascript装饰器的妙用
最近新开了一个Node项目,采用TypeScript来开发,在数据库及路由管理方面用了不少的装饰器,发觉这的确是一个好东西。装饰器是一个还处于草案中的特性,目前木有直接支持该语法的环境,但是可以通过 babel 之类的进行转换为旧语法来实现效果,所以在TypeScript中,可以放心的使用@Decorator。
1415 0
|
JavaScript
JS 装饰器解析
随着 ES6 和 TypeScript 中类的引入,在某些场景需要在不改变原有类和类属性的基础上扩展些功能,这也是装饰器出现的原因。 装饰器简介 作为一种可以动态增删功能模块的模式(比如 redux 的中间件机制),装饰器同样具有很强的动态灵活性,只需在类或类属性之前加上 @方法名 就完成了相应的类或类方法功能的变化。
1467 0