门面模式

门面模式(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. 门面模式的利与弊

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

---

注意

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