JavaScript设计模式(6)-门面模式

门面模式

门面模式(Facade Pattern)：他隐藏了系统的复杂性，并向客户端提供了一个可以访问系统的接口。这种类型的设计模式属于结构性模式。为子系统中的一组接口提供了一个统一的访问接口，这个接口使得子系统更容易被访问或者使用。

1. 作用：

• 简化类的接口
• 消除类与使用它的客户代码之间的耦合

2. 设计一个事件工具

window.DED = window.DED || {};
DED.util = DED.util || {}

DED.util.Event = {
    getEvent: function(e) {
        return e || window.event
    },
    getTarget: function(e) {
        return e.target || e.srcElement
    },
    stopPropagation: function(e) {
        if(e.stopPropagation) {
            e.stopPropagation()
        } else {
            e.cancelBubble = true;
        }
    },
    preventDefault: function(e) {
        if(e.preventDefault) {
            e.preventDefault()
        } else {
            e.returnValue = false;
        }
    },
    stopEvent: function(e) {
        this.stopPropagation(e);
        this.preventDefault(e);
    }
}

function addEvent(el, type, fn) {
    if (window.addEventListener) {
        el.addEventListener(type, fn, false);
    } else if (window.attachEvent) {
        el.attachEvent('on'+ type, fn);
    } else {
        el['on' + type] = fn;
    }
}

// usage
addEvent(document.querySelector('button'), 'click', function(e){
    console.log(DED.util.Event.getEvent(e))
    console.log(DED.util.Event.getTarget(e))
    console.log(DED.util.Event.stopEvent(e))
})

3. 实现门面模式的一般步骤

• 找准自己应用程序中感觉适合使用门面方法的地方
  • 两个函数经常同时出现在一个地方
  • 需要处理跨浏览器的差异问题
• 起一个适合的名字

4. 门面模式的利与弊

• 利：
  • 编写一次组合代码，然后可以反复利用个，节省时间和精力
  • 简化接口
  • 降低对外部代码的依赖程度
  • 可以避免与下层子系统紧密耦合，这样可以对这个系统进行修改而不会影响到客户代码
• 弊：
  • 滥用会带来不必要的负担，有时并不需要使用门面模式

---

注意

转载、引用，但请标明作者和原文地址