JavaScript设计模式之装饰器模式

栏目: JavaScript · 发布时间: 7年前

内容简介：为对象添加新功能；不改变其原有的结构和功能。

为对象添加新功能；不改变其原有的结构和功能。

手机壳就是装饰器，没有它手机也能正常使用，原有的功能不变，手机壳可以减轻手机滑落的损耗。

代码示例

class Circle {
  draw() {
    console.log('画一个圆形')
  }
}
class Decorator {
  constructor(circle) {
    this.circle = circle
  }
  draw() {
    this.circle.draw()
    this.setRedBorder(circle)
  }
  setRedBorder(circle) {
    console.log('设置红色边框')
  }
}

// 测试
let circle = new Circle()
circle.draw()

let decorator = new Decorator(cicle)
decorator.draw()

ES7装饰器

// 简单的装饰器
@testDec // 装饰器
class Demo {}

function testDec(target){
  target.isDec = true
}
console.log(Demo.isDec) // true

// 装饰器原理
@decorator
class A {}

// 等同于
class A {}
A = decorator(A) || A; // 把A 作为参数，返回运行的结果

// 传参数
function testDec(isDec) {
  return function(target) { // 这里要 return 一个函数
    target.isDec = isDec;
  }
}
@testDec(true)
class Demo {
  // ...
}
alert(Demo.isDec) // true

装饰类

function mixins(...list) {
  return function (target) {
    Object.assign(target.prototype, ...list)
  }
}
const Foo = {
  foo() {
    console.log('foo')
  }
}
@mixins(Foo)
class MyClass{}

let myclass = new MyClass()
myclass.foo() // 'foo'

装饰方法

// 例1 只读
function readonly(target, name, descriptor){
  // descriptor对象原来的值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false, // 可枚举
  //   configurable: true, // 可配置
  //   writable: true // 可写
  // };
  descriptor.writable = false;
  return descriptor;
}

class Person {
  constructor() {
    this.first = 'A'
    this.last = 'B'
  }

  @readonly
  name() { return `${this.first} ${this.last}` }
}

var p = new Person()
console.log(p.name())
p.name = function () {} // 这里会报错，因为 name 是只读属性

// 例2 打印日志
function log(target, name, descriptor) {
  var oldValue = descriptor.value;

  descriptor.value = function() {
    // 1. 先打印日子
    console.log(`Calling ${name} with`, arguments);
    // 2. 执行原来的代码，并返回
    return oldValue.apply(this, arguments);
  };

  return descriptor;
}

class Math {
  @log
  add(a, b) {
    return a + b;
  }
}

const math = new Math();
const result = math.add(2, 4);
console.log('result', result);

成熟的装饰器库

最后

创建了一个前端学习交流群，感兴趣的朋友，一起来嗨呀！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

HTML5+CSS3精致范例辞典

杨东昱 / 清华大学出版社 / 2013-1 / 48.00元

《HTML5+CSS3精致范例辞典(全彩印刷)》是专为希望成为网页设计师的学习者打造的工具书，书中详细说明了设计网页所需的HTML标记语言，对HTML5的网页标签规范作了完整说明，如元素标签的功能、属性以及如何使用等。有了基本网页制作能力，如何让网页更出色，版面更富变化、更易维护管理，那就得靠CSS帮忙了。《HTML5+CSS3精致范例辞典(全彩印刷)》还详细解说了最新CSS3的样式元素，除了说明......一起来看看《HTML5+CSS3精致范例辞典》这本书的介绍吧!

码农工具

在线进制转换器

各进制数互转换器

XML、JSON 在线转换

在线XML、JSON转换工具