JavaScript进阶：设计者模式——装饰者模式

1、前言

装饰者模式：在不改原有对象的基础上，对其包装进行拓展(添加属性或方法)，使原有对象可以满足用户的需求。

2、示例

应用场景：在之前的用户需求中，用户点击输入框添加一条边框，失焦后，输入框的边框重置为默认的颜色。
但是后续用户又针对这一输入框的体验，提出了不同的需求，比如：点击输入框，需要加上淡淡的背景色加以区分，以及输入的字体也要修改颜色，移除后重置。
因此，针对这一需求，可以直接去修改原有的代码，加几行代码就完事了，但是如果需要改的地方非常多的话，这样处理就不太恰当了。

<div id="container"><i>用户名：</i><input type="text" name="" id="input" value="" placeholder="请输入用户名"/></div>


// 获取输入框的dom元素
var input = document.querySelector('#input');

input.onclick = function() {
    input.style.border = '1px solid rgba(228,243,255,0.58)';
}

input.onblur = function() {
    input.style.border = '1px solid #F0F0F0';
}

3、使用装饰者模式修改代码

可以使用装饰者模式，完善上述的应用场景，装饰者模式的本质就是不会去改变他原有的代码。

// 获取输入框的dom元素
var input = document.querySelector('#input');

input.onclick = function() {
    input.style.border = '1px solid rgba(228,243,255,0.58)';
}

input.onblur = function() {
    input.style.border = '1px solid #F0F0F0';
}

// 装饰者模式
var decorator = function(dom, type, fn) {
    // 获取事件源
    let element = dom;      
    // 判断事件源是否已经绑定了事件
    if(typeof element['on'+type] === 'function') {
        // 缓存绑定的对象事件
        var cacheFn = element['on'+type];
        element['on'+type] = function() {
            cacheFn();
            fn();
        }
    } else {
        element['on'+type] = fn;
    }
}

// 点击输入框时对同一个DOM元素添加背景颜色以及修改字体颜色
decorator(input, 'click', function() {
    input.style.background = 'rgba(228,243,255,0.58)';
    input.style.color = 'rgba(114, 108, 108, 0.8)';
})

// 失焦输入框时对同一个DOM元素移除背景颜色以及修改字体颜色
decorator(input, 'blur', function() {
    input.style.background = 'rgb(255,255,255)';
    input.style.color = 'rgb(0,0,0)';
})

4、多个输入框配合循环解决需求

某个模块下有非常多的用户输入框需要修改，搭建一个装饰器去解决输入框的不同事件的问题。

<div id="container">
    <i>用户1：</i><input type="text" name="" class="input" value="" placeholder="请输入用户名"/>
    <i>用户2：</i><input type="text" name="" class="input" value="" placeholder="请输入用户名"/>
    <i>用户3：</i><input type="text" name="" class="input" value="" placeholder="请输入用户名"/>
    <i>用户4：</i><input type="text" name="" class="input" value="" placeholder="请输入用户名"/>
    <i>用户5：</i><input type="text" name="" class="input" value="" placeholder="请输入用户名"/>
    <i>用户6：</i><input type="text" name="" class="input" value="" placeholder="请输入用户名"/>
</div>

// 装饰者模式
var decorator = function(dom, type, fn) {
    // 获取事件源
    let element = dom;      
    // 判断事件源是否已经绑定了点击事件
    if(typeof element['on'+type] === 'function') {
        var cacheFn = element['on'+type];
        element['on'+type] = function() {
            cacheFn();
            fn();
        }
    } else {
        element['on'+type] = fn;
    }
}

// 获取container下的input集合
var inputs = document.querySelectorAll('.input');

for (let iter of inputs) {
    // 点击输入框时对同一个DOM元素添加背景颜色以及修改字体颜色
    decorator(iter, 'click', function() {
        iter.style.background = 'rgba(228,243,255,0.58)';
        iter.style.color = 'rgba(114, 108, 108, 0.8)';
    })
    
    // 失焦输入框时对同一个DOM元素移除背景颜色以及修改字体颜色
    decorator(iter, 'blur', function() {
        iter.style.background = 'rgb(255,255,255)';
        iter.style.color = 'rgb(0,0,0)';
    })
}

这样在不改变原有对象的基础上，进行装饰，无论该元素是否绑定过事件，都能够去调用。