JavaScript设计模式学习记录（四）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36414265/article/details/81873100

本文深入探讨了软件设计中的三种核心模式：外观模式、参数适配器模式和装饰者模式。通过具体实例，展示了如何利用这些模式解决浏览器兼容性、参数配置及对象扩展等问题。

1.外观模式

个人感觉就是封装监听方法，使之兼容各个浏览器，所以外观模式其实就是封装方法？不知道我理解的对不对

//外观模式实现
function addEvent(dom, type, fn){
    if(dom.addEventListener){
        dom.addEventListener(type, fn, false);
    }else if(dom.attachEvent){
        dom.attachEvent('on' + type, fn);
    }else{
        dom['on' + type] = fn;
    }
}

//调用
var myInput = document.getElementById('myinput');
addEvent(myInput, 'click', function(){
    console,log("绑定一个事件");
});

2.参数适配器模式

插件开发的参数配置也是这么做的，传入的参数不够时，使用的是默认参数。

function doSomeThing(obj){
    var _adapter = {
        name: 'JS设计模式',
        size: 100,
        prize: 50
    }
    for(var i in _adapter){
        _adapter[i] = obj[i] || _adapter[i];
    }
    return _adapter; 
}

3.装饰者模式

特点：在不改变原对象的基础上，通过对其进行包装扩展（添加属性或者方法），使原有对象可以满足用户的更复杂需求。

var decorator = function(input, fn){
    var input = document.getElementById(input);

    if(typeof input.onclick === 'function'){
        var oldClickFn = input.onclick;
        input.onclick = function(){
            oldClickFn();
            fn();
        }
    }else{
        input.onclick = fn;
    }
}

//调用
decorator('tel_input', function(){
    document.getElementById('tel_demo_text').style.display = 'none';
})