JavaScript设计模式之装饰器模式

tangr206 发布于2019-08-23 13:46 / 3193人阅读

摘要：原文博客地址装饰器模式为对象添加新功能不改变其原有的结构和功能。手机壳就是装饰器，没有它手机也能正常使用，原有的功能不变，手机壳可以减轻手机滑落的损耗。

原文博客地址:https://finget.github.io/2018/11/22/decorator/

装饰器模式

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

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

代码示例

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);

成熟的装饰器库

最后

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

GPU云服务器云服务器装饰器模式 Java装饰器模式装饰模式装饰模式介绍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99537.html

每天一个设计模式之装饰者模式

摘要：作者按每天一个设计模式旨在初步领会设计模式的精髓，目前采用和两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式原文地址是每天一个设计模式之装饰者模式欢迎关注个人技术博客。作者按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript和python两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式...

brianway 2019-08-23 14:56 评论0 收藏0
每天一个设计模式之装饰者模式

摘要：作者按每天一个设计模式旨在初步领会设计模式的精髓，目前采用和两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式原文地址是每天一个设计模式之装饰者模式欢迎关注个人技术博客。作者按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript和python两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式...

shleyZ 2019-07-31 09:59 评论0 收藏0
前端也要学系列：设计模式之装饰者模式

摘要：什么是装饰者模式今天我们来讲另外一个非常实用的设计模式装饰者模式。就增加功能来说，装饰者模式相比生成子类更为灵活。下面，装饰者模式就要正式登场了。下一步，我们可以愉快的去使用装饰者模式啦什么是装饰者模式今天我们来讲另外一个非常实用的设计模式：装饰者模式。这个名字听上去有些莫名其妙，不着急，我们先来记住它的一个别名：包装器模式。我们记着这两个名字来开始今天的文章。首先还是上《设计...

高胜山 2019-08-26 11:54 评论0 收藏0
【设计模式】之装饰器模式

摘要：于是乎，老李家去车行把车进行了改装，车速上去了，媳妇也领到了，皆大欢喜这其实就是一个装饰器的使用案例，原来的车已经没法满足了，所以进行了速度增强，其他功能并没有改变。装饰器设计模式的概念在实际生产中，某个类的行为（它所提供的方法）已经没法满足当前的需要了，但是又需要使用原有的部分功能，因此需要对原有对象进行增强——装饰器设计模式（Decorator Pattern）也叫包装器模式就...

30e8336b8229 2019-08-19 10:13 评论0 收藏0
PHP设计模式之装饰器模式

摘要：装饰器模式解决的问题修饰模式，是面向对象编程领域中，一种动态地往一个类中添加新的行为的设计模式。可以看到，这样的模型很具有扩者性，我们可以轻松的添加其他装饰器给区域对象，且不需要更改其他类，装饰器模式解决的问题修饰模式，是面向对象编程领域中，一种动态地往一个类中添加新的行为的设计模式。就功能而言，修饰模式相比生成子类更为灵活，这样可以给某个对象而不是整个类添加一些功能。将所有的功...

Olivia 2019-06-27 12:00 评论0 收藏0