資訊專欄INFORMATION COLUMN
摘要：裝飾者模式裝飾者模式就是動態(tài)的給類或?qū)ο笤黾庸δ艿脑O(shè)計模式。下的實現(xiàn)里的裝飾器目前處在建議征集的第二階段，不被瀏覽器所支持，如果想要提前使用這個新特性就需要，等工具進行轉(zhuǎn)譯。這里介紹下的用法。
1.1、裝飾者模式
裝飾者模式就是動態(tài)的給類或?qū)ο笤黾庸δ艿脑O(shè)計模式。在程序運行時動態(tài)的給一個具備基礎(chǔ)功能的類或?qū)ο筇砑有碌墓δ?，并且不會改變會破壞基礎(chǔ)類和對象的功能。先提煉出產(chǎn)品的最小可用產(chǎn)品，再通過快速迭代的方式添加功能。
1.2、Typescript下的實現(xiàn)Javascript里的裝飾器目前處在建議征集的第二階段，不被瀏覽器所支持，如果想要提前使用這個新特性就需要Babel，Typescript等工具進行轉(zhuǎn)譯。這里介紹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中的代碼復(fù)制到chrome控制臺測試 node demo.js
運行結(jié)果
hello decorator!
下面給它加上一個裝飾器，使greet方法能夠在成功執(zhí)行后做一個日志記錄
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`);
編譯后運行結(jié)果
運行結(jié)果
hello decorator! greet successfully!
正如我們所見Greeter的原方法greet()在執(zhí)行完之后執(zhí)行了console.log(`greet successfully!`)
logSuccess(target,key,descriptor)為什么需要傳入這三個參數(shù)?Decorators的實現(xiàn)使用了ES5的 Object.defineProperty 方法，這三個參數(shù)也和這個方法的參數(shù)一致。裝飾器的本質(zhì)就是一個函數(shù)語法糖，通過Object.defineProperty來修改類中一些屬性，descriptor參數(shù)也是一個對象，是針對key屬性的描述符，里面有控制目標(biāo)對象的該屬性是否可寫的writable屬性等。
接下來我們將該日至系統(tǒng)簡單完善一下除了打印該方法執(zhí)行成功，再添加對其運行時錯誤的日志輸出
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來觸發(fā)一個錯誤
查看運行結(jié)果
greet error : ReferenceError: subjects is not defined
這樣就實現(xiàn)了一個簡單的日志系統(tǒng)
1.3 裝飾者模式與工廠函數(shù)如果想對不同的對象應(yīng)用同一個decorator，但同時又需要通過傳參來控制一些差別（裝飾器器函數(shù)需要保留(target,key,descriptor)三個參數(shù)）,這時就需要工廠函數(shù)來幫我們生成一個裝飾器函數(shù)。
通過裝飾器來使一個屬性變得只讀
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98283.html
摘要：新項目起手式最后更新于，技術(shù)文具有時效性，請知悉我知道你們早就想用上強類型了還有后續(xù)進階篇安裝安裝依賴配置添加添加讓識別改造文件什么是是的強類型版本。是的超集，這意味著他支持所有的語法。與此同時，也是的超集，的也宣布采用進行開發(fā)。 vue + typescript 新項目起手式 最后更新于2018-06-30，技術(shù)文具有時效性，請知悉 我知道你們早就想用上 vue + ts 強類型...
摘要：什么是裝飾器模式向一個現(xiàn)有的對象添加新的功能，同時又不改變其結(jié)構(gòu)的設(shè)計模式被稱為裝飾器模式，它是作為現(xiàn)有的類的一個包裝。中的裝飾器模式中有一個的提案，使用一個以開頭的函數(shù)對中的及其屬性方法進行修飾。 1 什么是裝飾器模式 showImg(https://segmentfault.com/img/remote/1460000015970102?w=1127&h=563); 向一個現(xiàn)有的對...
摘要：相關(guān)設(shè)計模式裝飾者模式和代理模式裝飾者模式關(guān)注再一個對象上動態(tài)添加方法代理模式關(guān)注再對代理對象的控制訪問，可以對客戶隱藏被代理類的信息裝飾著模式和適配器模式都叫包裝模式關(guān)于新職責(zé)適配器也可以在轉(zhuǎn)換時增加新的職責(zé)，但主要目的不在此。 0x01.定義與類型 定義：裝飾模式指的是在不必改變原類文件和使用繼承的情況下，動態(tài)地擴展一個對象的功能。它是通過創(chuàng)建一個包裝對象，也就是裝飾來包裹真實的...
摘要：裝飾者模式組成結(jié)構(gòu)抽象構(gòu)件給出抽象接口或抽象類，以規(guī)范準(zhǔn)備接收附加功能的對象。裝飾者模式圖解裝飾者模式應(yīng)用場景需要擴展一個類的功能，或給一個類添加附加職責(zé)。裝飾者對象接受所有來自客戶端的請求。參考資料設(shè)計模式 一、了解裝飾者模式 1.1 什么是裝飾者模式 裝飾者模式指的是在不必改變原類文件和使用繼承的情況下，動態(tài)地擴展一個對象的功能。它是通過創(chuàng)建一個包裝對象，也就是裝飾者來包裹真實的對...
閱讀 1076·2021-11-18 13:23
閱讀 789·2021-11-08 13:16
閱讀 897·2021-10-11 10:58
閱讀 3540·2021-09-22 15:26
閱讀 1775·2021-09-08 10:42
閱讀 1861·2021-09-04 16:45
閱讀 1766·2019-08-30 15:54
閱讀 2594·2019-08-30 13:45
