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

来源：互联网发布：唱给自己的歌网络战队编辑：程序博客网时间：2024/06/05 10:41

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设计模式 – 设计原则
JavaScript设计模式–高阶函数
Javascript 设计模式 - 01 - 原型模式
Javascript 设计模式 - 02 - 单例模式
Javascript 设计模式 - 03 - 建造者模式
Javascript 设计模式 - 04 - 工厂模式
Javascript 设计模式 - 05 - 外观模式
Javascript 设计模式 - 06 - 代理模式
Javascript 设计模式 - 07 - 观察者模式（发布订阅模式）
Javascript 设计模式 - 08 - 策略模式
Javascript 设计模式 - 09 - 命令模式
Javascript 设计模式 - 10 - 迭代器模式
Javascript 设计模式 - 11 - 职责链模式
Javascript 设计模式 - 12 - 适配器模式
Javascript 设计模式 - 13 - 模板方法
Javascript 设计模式 - 14 - 组合模式
Javascript 设计模式 - 15 - 享元模式
Javascript 设计模式 - 16 - 中介者模式
Javascript 设计模式 - 17 - 装饰者模式
Javascript 设计模式 - 18 - 状态模式

阅读全文

0 0