亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

JavaScript設(shè)計(jì)模式之裝飾器模式

tangr206 / 3264人閱讀

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

原文博客地址:https://finget.github.io/2018/11/22/decorator/
裝飾器模式 
為對(duì)象添加新功能；不改變其原有的結(jié)構(gòu)和功能。

手機(jī)殼就是裝飾器，沒有它手機(jī)也能正常使用，原有的功能不變，手機(jī)殼可以減輕手機(jī)滑落的損耗。

代碼示例 
class Circle {
  draw() {
    console.log("畫一個(gè)圓形")
  }
}
class Decorator {
  constructor(circle) {
    this.circle = circle
  }
  draw() {
    this.circle.draw()
    this.setRedBorder(circle)
  }
  setRedBorder(circle) {
    console.log("設(shè)置紅色邊框")
  }
}

// 測(cè)試
let circle = new Circle()
circle.draw()

let decorator = new Decorator(cicle)
decorator.draw()
ES7裝飾器 
// 簡(jiǎn)單的裝飾器
@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ù)，返回運(yùn)行的結(jié)果
// 傳參數(shù)
function testDec(isDec) {
  return function(target) { // 這里要 return 一個(gè)函數(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對(duì)象原來的值如下
  // {
  //   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 () {} // 這里會(huì)報(bào)錯(cuò)，因?yàn)?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)建了一個(gè)前端學(xué)習(xí)交流群，感興趣的朋友，一起來嗨呀！

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99537.html

相關(guān)文章

  • 每天一個(gè)設(shè)計(jì)模式之裝飾者模式

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

    brianway 評(píng)論0 收藏0

  • 每天一個(gè)設(shè)計(jì)模式之裝飾者模式

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

    shleyZ 評(píng)論0 收藏0

  • 前端也要學(xué)系列：設(shè)計(jì)模式之裝飾者模式

    摘要：什么是裝飾者模式今天我們來講另外一個(gè)非常實(shí)用的設(shè)計(jì)模式裝飾者模式。就增加功能來說，裝飾者模式相比生成子類更為靈活。下面，裝飾者模式就要正式登場(chǎng)了。下一步，我們可以愉快的去使用裝飾者模式啦 什么是裝飾者模式 今天我們來講另外一個(gè)非常實(shí)用的設(shè)計(jì)模式：裝飾者模式。這個(gè)名字聽上去有些莫名其妙，不著急，我們先來記住它的一個(gè)別名：包裝器模式。 我們記著這兩個(gè)名字來開始今天的文章。 首先還是上《設(shè)計(jì)...

    高勝山 評(píng)論0 收藏0

  • 【設(shè)計(jì)模式】之裝飾器模式

    摘要：于是乎，老李家去車行把車進(jìn)行了改裝，車速上去了，媳婦也領(lǐng)到了，皆大歡喜這其實(shí)就是一個(gè)裝飾器的使用案例，原來的車已經(jīng)沒法滿足了，所以進(jìn)行了速度增強(qiáng)，其他功能并沒有改變。 裝飾器設(shè)計(jì)模式的概念 在實(shí)際生產(chǎn)中，某個(gè)類的行為（它所提供的方法）已經(jīng)沒法滿足當(dāng)前的需要了，但是又需要使用原有的部分功能，因此需要對(duì)原有對(duì)象進(jìn)行增強(qiáng)——裝飾器設(shè)計(jì)模式（Decorator Pattern）也叫包裝器模式就...

    30e8336b8229 評(píng)論0 收藏0

  • PHP設(shè)計(jì)模式之裝飾器模式

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

    Olivia 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<