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

資訊專(zhuān)欄INFORMATION COLUMN

TS下的裝飾者模式(Decorator)

SolomonXie / 3488人閱讀

摘要：裝飾者模式裝飾者模式就是動(dòng)態(tài)的給類(lèi)或?qū)ο笤黾庸δ艿脑O(shè)計(jì)模式。下的實(shí)現(xiàn)里的裝飾器目前處在建議征集的第二階段，不被瀏覽器所支持，如果想要提前使用這個(gè)新特性就需要，等工具進(jìn)行轉(zhuǎn)譯。這里介紹下的用法。

1.1、裝飾者模式

裝飾者模式就是動(dòng)態(tài)的給類(lèi)或?qū)ο笤黾庸δ艿脑O(shè)計(jì)模式。在程序運(yùn)行時(shí)動(dòng)態(tài)的給一個(gè)具備基礎(chǔ)功能的類(lèi)或?qū)ο筇砑有碌墓δ?，并且不?huì)改變會(huì)破壞基礎(chǔ)類(lèi)和對(duì)象的功能。先提煉出產(chǎn)品的最小可用產(chǎn)品，再通過(guò)快速迭代的方式添加功能。

1.2、Typescript下的實(shí)現(xiàn)

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

首先在全局安裝typescript

npm install typescript -g

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

新建一個(gè)Greeter類(lèi)

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

將ts文件編譯為js運(yùn)行

tsc demo.ts --target ES5 --experimentalDecorators
# 如果本地沒(méi)安裝node可以把demo.js中的代碼復(fù)制到chrome控制臺(tái)測(cè)試
node demo.js

運(yùn)行結(jié)果

hello decorator!

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

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`);

編譯后運(yùn)行結(jié)果
運(yùn)行結(jié)果

hello decorator!
greet successfully!

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

logSuccess(target,key,descriptor)為什么需要傳入這三個(gè)參數(shù)?Decorators的實(shí)現(xiàn)使用了ES5的 Object.defineProperty 方法，這三個(gè)參數(shù)也和這個(gè)方法的參數(shù)一致。裝飾器的本質(zhì)就是一個(gè)函數(shù)語(yǔ)法糖，通過(guò)Object.defineProperty來(lái)修改類(lèi)中一些屬性，descriptor參數(shù)也是一個(gè)對(duì)象，是針對(duì)key屬性的描述符，里面有控制目標(biāo)對(duì)象的該屬性是否可寫(xiě)的writable屬性等。

接下來(lái)我們將該日至系統(tǒng)簡(jiǎn)單完善一下

除了打印該方法執(zhí)行成功，再添加對(duì)其運(yùn)行時(shí)錯(cuò)誤的日志輸出

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`);

這里我們特意使用了一個(gè)未聲明的變量subjects來(lái)觸發(fā)一個(gè)錯(cuò)誤
查看運(yùn)行結(jié)果

greet error : ReferenceError: subjects is not defined

這樣就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的日志系統(tǒng)

1.3 裝飾者模式與工廠函數(shù)

如果想對(duì)不同的對(duì)象應(yīng)用同一個(gè)decorator，但同時(shí)又需要通過(guò)傳參來(lái)控制一些差別（裝飾器器函數(shù)需要保留(target,key,descriptor)三個(gè)參數(shù)）,這時(shí)就需要工廠函數(shù)來(lái)幫我們生成一個(gè)裝飾器函數(shù)。

通過(guò)裝飾器來(lái)使一個(gè)屬性變得只讀

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

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

相關(guān)文章

  • vue + typescript 項(xiàng)目起手式

    摘要：新項(xiàng)目起手式最后更新于，技術(shù)文具有時(shí)效性，請(qǐng)知悉我知道你們?cè)缇拖胗蒙蠌?qiáng)類(lèi)型了還有后續(xù)進(jìn)階篇安裝安裝依賴配置添加添加讓識(shí)別改造文件什么是是的強(qiáng)類(lèi)型版本。是的超集，這意味著他支持所有的語(yǔ)法。與此同時(shí)，也是的超集，的也宣布采用進(jìn)行開(kāi)發(fā)。 vue + typescript 新項(xiàng)目起手式 最后更新于2018-06-30，技術(shù)文具有時(shí)效性，請(qǐng)知悉 我知道你們?cè)缇拖胗蒙?vue + ts 強(qiáng)類(lèi)型...

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

  • 從ES6重新認(rèn)識(shí)JavaScript設(shè)計(jì)模式: 裝飾器模式

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

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

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

    摘要：相關(guān)設(shè)計(jì)模式裝飾者模式和代理模式裝飾者模式關(guān)注再一個(gè)對(duì)象上動(dòng)態(tài)添加方法代理模式關(guān)注再對(duì)代理對(duì)象的控制訪問(wèn)，可以對(duì)客戶隱藏被代理類(lèi)的信息裝飾著模式和適配器模式都叫包裝模式關(guān)于新職責(zé)適配器也可以在轉(zhuǎn)換時(shí)增加新的職責(zé)，但主要目的不在此。 0x01.定義與類(lèi)型 定義：裝飾模式指的是在不必改變?cè)?lèi)文件和使用繼承的情況下，動(dòng)態(tài)地?cái)U(kuò)展一個(gè)對(duì)象的功能。它是通過(guò)創(chuàng)建一個(gè)包裝對(duì)象，也就是裝飾來(lái)包裹真實(shí)的...

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

  • Java 設(shè)計(jì)模式之裝飾者模式

    摘要：裝飾者模式組成結(jié)構(gòu)抽象構(gòu)件給出抽象接口或抽象類(lèi)，以規(guī)范準(zhǔn)備接收附加功能的對(duì)象。裝飾者模式圖解裝飾者模式應(yīng)用場(chǎng)景需要擴(kuò)展一個(gè)類(lèi)的功能，或給一個(gè)類(lèi)添加附加職責(zé)。裝飾者對(duì)象接受所有來(lái)自客戶端的請(qǐng)求。參考資料設(shè)計(jì)模式 一、了解裝飾者模式 1.1 什么是裝飾者模式 裝飾者模式指的是在不必改變?cè)?lèi)文件和使用繼承的情況下，動(dòng)態(tài)地?cái)U(kuò)展一個(gè)對(duì)象的功能。它是通過(guò)創(chuàng)建一個(gè)包裝對(duì)象，也就是裝飾者來(lái)包裹真實(shí)的對(duì)...

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

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

0條評(píng)論

閱讀需要支付1元查看
<