正常操作，正常分析，大家好，我是D1n910。

今天繼續(xù)來學(xué)習(xí) 《JavaScript 設(shè)計(jì)模式》的第三篇 結(jié)構(gòu)型設(shè)計(jì)模式

這是一個(gè)連續(xù)的讀書筆記，所以如果你之前的內(nèi)容沒有看的話，可以去看看。

下面是第十章的展覽，里面其實(shí)鏈接好了所有1～10的專欄內(nèi)容，所以直接戳下面的專欄鏈接就可以快速到達(dá)啦。

這里再次感謝 《Javascript 設(shè)計(jì)模式》及其作者 張榮銘，專欄內(nèi)容是在它的基礎(chǔ)上生成的。

其實(shí)學(xué)到現(xiàn)在，會(huì)發(fā)現(xiàn)自己已經(jīng)用到過這里面很多種設(shè)計(jì)模式了，這些都是上學(xué)上課、平時(shí)學(xué)習(xí)以及看之前大佬的代碼耳濡目染的。

所以會(huì)有比較多的熟悉感，大家看到對(duì)應(yīng)的模式的話，可以多思考一下平常自己是怎么用的，具體場景是怎么使用的。

第三篇 結(jié)構(gòu)型設(shè)計(jì)模式

結(jié)構(gòu)型設(shè)計(jì)模式關(guān)注于如何將類或者對(duì)象組合成更大、更復(fù)雜的結(jié)構(gòu)，以簡化設(shè)計(jì)。

第 12 章 房子裝修——裝飾者模式（P85）

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

下面是介紹了裝飾者的使用場景之一。作者舉的例子其實(shí)有點(diǎn)怪，不過可以看到思路。

12.1、為輸入框的新需求

現(xiàn)在的需求是在姓名輸入框里點(diǎn)擊輸入框以后顯示輸入內(nèi)容提示：

var nameInput = document.getElementById('nameInput');

var nameWarnInput = document.getElementById('nameWarn');

nameInput.onclick = function () {

? ?nameWarnInput.style.display = 'inline-block'

};

現(xiàn)在希望加需求是點(diǎn)擊輸入框之前，提示“請輸入”，點(diǎn)擊輸入框后不顯示“請輸入”。

看起來很簡單啊，于是啪得一下就寫下面的代碼。

var nameInput = document.getElementById('nameInput');

var nameWarnInput = document.getElementById('nameWarn');

var nameTipsInput = document.getElementById('nameTips');

nameInput.onclick = function () {

? ?nameWarnInput.style.display = 'inline-block'

? ?nameTipsInput.style.display = 'none'

};

這里改name OK，但是有好多輸入框怎么處理呢，比如原來的電話輸入框、性別輸入框……那么在這里我們就可以用裝飾者模式來裝飾我們原有的方法。

12.2、裝飾已有的功能對(duì)象

考慮我們可以用原來對(duì)象上綁定的方法，又可以無損添加新的方法，可以這么寫我們的裝飾器方法。

（是可以用事件綁定器，不過這里主要是講了裝飾器的應(yīng)用場景）

var decorator = function (even, fn) {

? ?// 獲取事件源

? ?var dom = document.getElementById(even);

? ?

? ?// 如果已有事件

? ?if (typeof dom.onclick === 'function') {

? ? ? ?var oldOnclick = dom.onclick;

? ? ? ?dom.onclick = function() {

? ? ? ? ? ?oldOnclick();

? ? ? ? ? ?fn()

? ? ? ?}

? ?} else {

? ? ? ?dom.onclick = fn

? ?}

}

12.3、為輸入框添磚加瓦

用法如下：

decorator('nameInput', function() {

? ?var nameTipsInput = document.getElementById('nameTips');

? ?nameTipsInput.style.display = 'none';

})

本章 End，學(xué)習(xí)進(jìn)度 11/40，加油加油

D1n910 于2021年02月19日 21:08?在福永