裝飾者模式：在不改變對(duì)象的基礎(chǔ)上，通過(guò)對(duì)齊進(jìn)行包裝擴(kuò)展（添加屬性或者方法）使原有對(duì)象可以滿足用戶的梗復(fù)雜需求。

裝飾者模式是對(duì)原有功能的一中增強(qiáng)與擴(kuò)展，不需要了解原有功能的基礎(chǔ)上對(duì)功能擴(kuò)展，只是在外部進(jìn)行一次性封裝擴(kuò)展，這是對(duì)原有功能完整性的一種保護(hù)。
與適配器模式不同的是，適配器模式進(jìn)行擴(kuò)展基本是對(duì)對(duì)象內(nèi)部結(jié)構(gòu)的重組，需要了解原有功能。

需求1：
舊需求：以前是當(dāng)用戶點(diǎn)擊輸入框時(shí)，如果如輸入輸入的內(nèi)容有限制，那么其后面顯示用戶輸入內(nèi)容的限制格式的提示文案。
新需求：現(xiàn)在多加一條，默認(rèn)輸入框上班顯示一行提示文案，當(dāng)用戶點(diǎn)擊輸入框時(shí)文案消失。

舊代碼

//輸入框元素
const telInput = document.querySelector('#tel_input');
//輸入格式提示文案
const telWarnText = document.querySelector('#tel_warn_text');
//點(diǎn)擊輸入框顯示輸入框格式提示文案
input.onclick = function(){
    telWarnText.style.display = 'inline-block';
}

新代碼

//輸入框元素
const telInput = document.querySelector('#tel_input');
//輸入框輸入格式提示文案
const telWarnText = document.querySelector('#tel_warn_text');
//輸入框提示輸入文案
const telTipText = document.querySelector('#tel_tip_text');
//點(diǎn)擊輸入框顯示輸入框格式提示文案
input.onclick = function(){
    telWarnText.style.display = 'inline-block';
    telTipText.style.display = 'none';
}

問(wèn)題1：修改了一個(gè)電話輸入框，還有姓名輸入框，地址輸入框等等。難道要找出代碼一個(gè)個(gè)去修改？
優(yōu)化1：裝飾者模式(在原有的功能的基礎(chǔ)上，添加一些功能來(lái)滿足用戶提出的需求)

//裝飾者
const decorator = function(input,fn){
    //獲取事件源
    const input = document.querySelector(input);
    //已綁定過(guò)事件
    if(typeof input.onlick = 'function'){
        //緩存事件源原有回調(diào)函數(shù)
        const oldClickFn = input.onclick;
        //為事件源定以新的事件
        input.onclick = funciton(){
            //事件源原有回調(diào)函數(shù)
            oldClickFn();
            //執(zhí)行時(shí)間源新增回調(diào)函數(shù)
            fn();
        }
    }else{
        //事件源未綁定事件，直接為事件添加回調(diào)函數(shù)
        input.onclick = fn
    }
    //todo other
}

裝飾者函數(shù)不僅可以對(duì)綁定過(guò)事件的輸入框添加新的功能，未綁定過(guò)事件的輸入框同樣可以

//電話輸入框功能裝飾
decorator('tel_input',()=>{
    document.querySelector(`#tel_tip_text`).style.display = 'none'
})
//姓名輸入框功能裝飾
decorator('name_input',()=>{
    document.querySelector(`#name_tip_text`).style.display = 'none'
})
//地址輸入框功能裝飾
decorator('adress_input',()=>{
    document.querySelector(`#adress_tip_text`).style.display = 'none'
})

通過(guò)使用裝飾者對(duì)象方法，物流輸入框是否綁定過(guò)事件，都可以完成增加隱藏提示信息的需求。
裝飾者就是對(duì)原有對(duì)象的屬性和方法的添加。

與適配器模式不同的是，適配器方法是對(duì)原有對(duì)象適配，添加的方法與原有方法功能上大致相似。
但是裝飾者提供的方法與原來(lái)的方法功能項(xiàng)是有一定區(qū)別的。
再有，使用適配器是新增的方法是要調(diào)用原來(lái)的方法的。
在裝飾者模式中，不需要了解對(duì)象原有功能，擯棄對(duì)對(duì)象原有的方法可以原封不動(dòng)地使用。