Javascript设计模式-05-外观模式

Javascript设计模式 - 05 - 外观模式

简介

外观模式为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口使得这一子系统更加容易使用，他可以将一些复杂的操作封装起来，并创建一个简单的接口用于调用

个人理解

主要用于接口封装、兼容性封装、遗留代码封装

外观模式的作用是对客户屏蔽一组子系统的复杂性，外观模式对客户提供一个简单易用的高层接口，高层接口会把客户的请求转发给子系统来完成具体的功能实现

外观模式与普通的封装

外观模式容易跟普通的封装实现混淆，两者都是封装一些事物，但外观模式的关键是定义一个高层的接口去封装一组 ‘子系统’，这个‘子系统’至少应该是一组函数的集合，这些函数相互协作，可以组成一个系统中相对独立的部分

特点

为一组子系统提供一个简单便利的访问入口
隔离客户与复杂子系统之间的联系，客户不用去了解子系统的细节

代码

    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 btn = document.getElementById('btn');
    addEvent(btn, 'click', function () {
        console.log('btn is click');
    })

Javascript设计模式-05-外观模式

Javascript设计模式 - 05 - 外观模式

简介

个人理解

外观模式与普通的封装

特点

代码

文章列表

悦读