TS下的裝飾者模式(Decorator)

SolomonXie 發布于2019-08-23 12:18 / 3398人閱讀

摘要：裝飾者模式裝飾者模式就是動態的給類或對象增加功能的設計模式。下的實現里的裝飾器目前處在建議征集的第二階段，不被瀏覽器所支持，如果想要提前使用這個新特性就需要，等工具進行轉譯。這里介紹下的用法。

1.1、裝飾者模式

裝飾者模式就是動態的給類或對象增加功能的設計模式。在程序運行時動態的給一個具備基礎功能的類或對象添加新的功能，并且不會改變會破壞基礎類和對象的功能。先提煉出產品的最小可用產品，再通過快速迭代的方式添加功能。

1.2、Typescript下的實現

Javascript里的裝飾器目前處在建議征集的第二階段，不被瀏覽器所支持，如果想要提前使用這個新特性就需要Babel，Typescript等工具進行轉譯。這里介紹Typescript下的用法。

首先在全局安裝typescript

npm install typescript -g

然后新建一個后綴為.ts的typescript文件,這里我們新建一個demo.ts

新建一個Greeter類

class Greeter {
    constructor() {}
    greet(subject:any) {
        console.log(`hello ${subject}!`);
    }
}
const greet = new Greeter();
greet.greet(`decorator`);

將ts文件編譯為js運行

tsc demo.ts --target ES5 --experimentalDecorators
# 如果本地沒安裝node可以把demo.js中的代碼復制到chrome控制臺測試
node demo.js

運行結果

hello decorator!

下面給它加上一個裝飾器，使greet方法能夠在成功執行后做一個日志記錄

class Greeter {
    constructor() { }
    @logSuccess
    greet(subject: string) {
        console.log(`hello ${subject}!`);
    }
}
function logSuccess(target: any, key: any, descriptor: any) {
    const func = descriptor.value;
    descriptor.value = (...args: any[]) => {
        func.apply(target, args)
        console.log(`greet successfully!`)
    }
}
const greet = new Greeter();
greet.greet(`decorator`);

編譯后運行結果
運行結果

hello decorator!
greet successfully!

正如我們所見Greeter的原方法greet()在執行完之后執行了console.log(`greet successfully!`)

logSuccess(target,key,descriptor)為什么需要傳入這三個參數?Decorators的實現使用了ES5的 Object.defineProperty 方法，這三個參數也和這個方法的參數一致。裝飾器的本質就是一個函數語法糖，通過Object.defineProperty來修改類中一些屬性，descriptor參數也是一個對象，是針對key屬性的描述符，里面有控制目標對象的該屬性是否可寫的writable屬性等。

接下來我們將該日至系統簡單完善一下

除了打印該方法執行成功，再添加對其運行時錯誤的日志輸出

class Greeter {
    constructor() { }
    @log
    greet(subject: string) {
        console.log(`hello ${subjects}!`);
    }
}
function log(target: any, key: any, descriptor: any) {
    const func = descriptor.value;
    descriptor.value = (...args: any[]) => {
        try {
            func.apply(target, args)
            console.log(`greet successfully!`)
        } catch (err) {
            console.log(`greet error : ${err}`)
        }
    }
}
const greet = new Greeter();
greet.greet(`decorator`);

這里我們特意使用了一個未聲明的變量subjects來觸發一個錯誤
查看運行結果

greet error : ReferenceError: subjects is not defined

這樣就實現了一個簡單的日志系統

1.3 裝飾者模式與工廠函數

如果想對不同的對象應用同一個decorator，但同時又需要通過傳參來控制一些差別（裝飾器器函數需要保留(target,key,descriptor)三個參數）,這時就需要工廠函數來幫我們生成一個裝飾器函數。

通過裝飾器來使一個屬性變得只讀

云服務器 GPU云服務器裝飾者模式 jsp 裝飾者裝飾模式策略者模式

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98283.html

vue + typescript 項目起手式

摘要：新項目起手式最后更新于，技術文具有時效性，請知悉我知道你們早就想用上強類型了還有后續進階篇安裝安裝依賴配置添加添加讓識別改造文件什么是是的強類型版本。是的超集，這意味著他支持所有的語法。與此同時，也是的超集，的也宣布采用進行開發。 vue + typescript 新項目起手式最后更新于2018-06-30，技術文具有時效性，請知悉我知道你們早就想用上 vue + ts 強類型...

zhisheng 2019-08-21 17:17 評論0 收藏0
從ES6重新認識JavaScript設計模式: 裝飾器模式

摘要：什么是裝飾器模式向一個現有的對象添加新的功能，同時又不改變其結構的設計模式被稱為裝飾器模式，它是作為現有的類的一個包裝。中的裝飾器模式中有一個的提案，使用一個以開頭的函數對中的及其屬性方法進行修飾。 1 什么是裝飾器模式 showImg(https://segmentfault.com/img/remote/1460000015970102?w=1127&h=563); 向一個現有的對...

wendux 2019-08-23 10:56 評論0 收藏0
設計模式之裝飾者模式

摘要：相關設計模式裝飾者模式和代理模式裝飾者模式關注再一個對象上動態添加方法代理模式關注再對代理對象的控制訪問，可以對客戶隱藏被代理類的信息裝飾著模式和適配器模式都叫包裝模式關于新職責適配器也可以在轉換時增加新的職責，但主要目的不在此。 0x01.定義與類型定義：裝飾模式指的是在不必改變原類文件和使用繼承的情況下，動態地擴展一個對象的功能。它是通過創建一個包裝對象，也就是裝飾來包裹真實的...

chuyao 2019-08-16 18:34 評論0 收藏0
Java 設計模式之裝飾者模式

摘要：裝飾者模式組成結構抽象構件給出抽象接口或抽象類，以規范準備接收附加功能的對象。裝飾者模式圖解裝飾者模式應用場景需要擴展一個類的功能，或給一個類添加附加職責。裝飾者對象接受所有來自客戶端的請求。參考資料設計模式一、了解裝飾者模式 1.1 什么是裝飾者模式裝飾者模式指的是在不必改變原類文件和使用繼承的情況下，動態地擴展一個對象的功能。它是通過創建一個包裝對象，也就是裝飾者來包裹真實的對...

kumfo 2019-08-19 11:14 評論0 收藏0