介紹

• 為對象添加新功能
• 不改變其原有的結(jié)構(gòu)和功能

實例

• 手機殼(只是增加裝飾苫昌、防摔功能)

UML

image

• 通過Decortor為Circle新增setRedBorder()方法

代碼演示

    //圓
    class Circle{
        draw(){
            console.log('畫一個圓')
        }
    }
    //裝飾器
    class Decorator{
        constructor(circle){
            this.circle = circle
        }
        draw(){
            this.circle.draw()
            this.setRedBorder(circle)
        }
        setRedBorder(circle){
            console.log('設(shè)置了紅色邊框')
        }
    }

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

    let dec = new Decorator(circle)

    dec.draw()

• result

  
  
  image

場景

• es7裝飾器
• code-decorators

es7裝飾器

• 配置環(huán)境
• 裝飾類
• 裝飾方法

配置環(huán)境

• 安裝插件

 npm install babel-plugin-transform-decorator-legacy --save-dev

• 修改.babelrc

    {
        "plugins":["transform-decorator-legacy"]
    }

裝飾類

• 普通裝飾類

    //裝飾類
    @testDec
    class Demo{
            // ...
    }
    function testDec(target) {
        target.isDec = true
    }
     alert(Demo.isDec) //true

1. @testDec為Class增加了一個裝飾器`
2. target其實就是Demo

• 帶參數(shù)

        @testDec
        @testDecParams(false)
        class Demo{
            // ...
        }
        //裝飾類 不帶參數(shù)
        function testDec(target) {
            target.isDec = true
        }

        alert(Demo.isDec) //true

        //裝飾類 帶參數(shù)
        function testDecParams(isDec) {
            return function (target) {
                target.isDec = isDec
            }
        }

• mixins實例

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

    }

    let obj = new MyClass()
    obj.foo()

裝飾方法

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

        //裝飾方法
        @readOnly
        name(){
            return this.first +'-' + this.last
        }
    }
    function readOnly(target,name,descriptor) {
        //descriptor 屬性描述對象
        // {
        //     value:specifiedFunction,
        //     enmerable:false,
        //     configurable:true,
        //     writable:true
        // }
        descriptor.writable = false
        return descriptor
    }

    const  p = new Person()
    console.log(p.name())
    //p.name = function(){} //報錯  只讀

• 定義一個只讀方法啦撮，修改屬性描述對象中的是否可寫

場景

• core-decorators 提供常用的裝飾器

原文:https://www.ahwgs.cn/javascriptshejim…zhuangshiqimoshi.html
代碼:https://github.com/ahwgs/design-pattern-learning/tree/master/6.JavaScript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B9%8B%E8%A3%85%E9%A5%B0%E5%99%A8%E6%A8%A1%E5%BC%8F