JavaScript設計模式之裝飾器模式

tangr206 發(fā)布于2019-08-23 13:46 / 3219人閱讀

摘要：原文博客地址裝飾器模式為對象添加新功能不改變其原有的結構和功能。手機殼就是裝飾器，沒有它手機也能正常使用，原有的功能不變，手機殼可以減輕手機滑落的損耗。

原文博客地址: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 作為參數(shù)，返回運行的結果

// 傳參數(shù)
function testDec(isDec) {
  return function(target) { // 這里要 return 一個函數(shù)
    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. 執(zhí)行原來的代碼，并返回
    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);

成熟的裝飾器庫

最后

創(chuàng)建了一個前端學習交流群，感興趣的朋友，一起來嗨呀！

云服務器 GPU云服務器裝飾器模式 Java裝飾器模式裝飾模式裝飾模式介紹

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/99537.html

每天一個設計模式之裝飾者模式

摘要：作者按每天一個設計模式旨在初步領會設計模式的精髓，目前采用和兩種語言實現(xiàn)。誠然，每種設計模式都有多種實現(xiàn)方式，但此小冊只記錄最直截了當?shù)膶崿F(xiàn)方式原文地址是每天一個設計模式之裝飾者模式歡迎關注個人技術博客。作者按：《每天一個設計模式》旨在初步領會設計模式的精髓，目前采用javascript和python兩種語言實現(xiàn)。誠然，每種設計模式都有多種實現(xiàn)方式，但此小冊只記錄最直截了當?shù)膶崿F(xiàn)方式...

brianway 2019-08-23 14:56 評論0 收藏0
每天一個設計模式之裝飾者模式

摘要：作者按每天一個設計模式旨在初步領會設計模式的精髓，目前采用和兩種語言實現(xiàn)。誠然，每種設計模式都有多種實現(xiàn)方式，但此小冊只記錄最直截了當?shù)膶崿F(xiàn)方式原文地址是每天一個設計模式之裝飾者模式歡迎關注個人技術博客。作者按：《每天一個設計模式》旨在初步領會設計模式的精髓，目前采用javascript和python兩種語言實現(xiàn)。誠然，每種設計模式都有多種實現(xiàn)方式，但此小冊只記錄最直截了當?shù)膶崿F(xiàn)方式...

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設計模式之裝飾器模式

摘要：裝飾器模式解決的問題修飾模式，是面向對象編程領域中，一種動態(tài)地往一個類中添加新的行為的設計模式?？梢钥吹剑@樣的模型很具有擴者性，我們可以輕松的添加其他裝飾器給區(qū)域對象，且不需要更改其他類，裝飾器模式解決的問題修飾模式，是面向對象編程領域中，一種動態(tài)地往一個類中添加新的行為的設計模式。就功能而言，修飾模式相比生成子類更為靈活，這樣可以給某個對象而不是整個類添加一些功能。將所有的功...

Olivia 2019-06-27 12:00 評論0 收藏0