裝飾模式：動(dòng)態(tài)地給一個(gè)對(duì)象添加一些額外的指責(zé)，就增加功能來說，裝飾模式比生成子類更加靈活

「裝飾模式」對(duì)于前端開發(fā)者而言一定是非常熟悉的，什么是「裝飾模式」呢？顧名思義，「裝飾模式」就像是給一個(gè)類穿上一件一件衣服，通過不同的搭配，讓這個(gè)類呈現(xiàn)出不同的特點(diǎn)。那我們?cè)诠ぷ鞯倪^程中，在編寫頁面的時(shí)候，做的好像也是一樣的事情對(duì)吧？比如按鈕組件，他會(huì)有default、primary、hover、active、disabled等等狀態(tài)，我們常用的方式就是通過給button添加不同的class來實(shí)現(xiàn)這種種不同的效果，其實(shí)這種實(shí)現(xiàn)的方式，就是「裝飾模式」的應(yīng)用。只不過今天我們說的是「裝飾模式」在JS中的應(yīng)用而已，我們可以通過CSS的思維來幫助我們理解。

實(shí)例：當(dāng)下我們需要做一套考試系統(tǒng)，一套試卷由一道道試題組成，試題會(huì)有練習(xí)、考試和解析3種狀態(tài)：

• 練習(xí)狀態(tài)下，試題需要顯示題干和選項(xiàng)
• 考試狀態(tài)下，試題需要顯示題干、選項(xiàng)和分?jǐn)?shù)
• 解析狀態(tài)下，題干需要顯示題干、選項(xiàng)、分?jǐn)?shù)和解析

由上我們可以想象出具體的實(shí)現(xiàn)模式就是根據(jù)源數(shù)據(jù)在不同條件下顯示不同的狀態(tài)和內(nèi)容，就可以結(jié)合「裝飾模式」來實(shí)現(xiàn)。

// 試題渲染
class Question {
    constructor(question) {
        this.question = question;
    }
    
    render() {
        console.log(this.question.topic);
        console.log(this.question.options);
    }
}

// 分?jǐn)?shù)渲染裝飾器
class ScoreQuestion {
    constructor(question) {
        this.question = question;
    }
    
    render() {
        this.question.render();
        console.log(this.question.question.score);
    }
}

// 解析渲染裝飾器
class AnalyzeQuestion {
    constructor(question) {
        this.question = question;
    }
    
    render() {
        this.question.render();
        console.log(this.question.question.analyse);
    }
}

const question = {
    topic: '題干',
    options: '選項(xiàng)一、選項(xiàng)二、選項(xiàng)三',
    score: 10,
    analyse: '選項(xiàng)一是正確答案'
};

let instance = new Question(question);
instance.render();
// 題干
// 選項(xiàng)一、選項(xiàng)二、選項(xiàng)三

instance = new ScoreQuestion(instance);
instance.render();
// 題干
// 選項(xiàng)一、選項(xiàng)二、選項(xiàng)三
// 10

instance = new AnalyzeQuestion(instance);
instance.render();
// 題干
// 選項(xiàng)一、選項(xiàng)二、選項(xiàng)三
// 10
// 選項(xiàng)一是正確答案

總結(jié)

如果我們實(shí)現(xiàn)一項(xiàng)功能可以做到將核心指責(zé)與裝飾功能區(qū)分的話，就可以使用「裝飾模式」來實(shí)現(xiàn)?！秆b飾模式」的優(yōu)點(diǎn)就在于把類中的裝飾功能從類中搬移去除，這樣可以簡(jiǎn)化原有的類。

參考

大話設(shè)計(jì)模式 -- 程杰

個(gè)人博客

北落師門的博客