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

最新推荐文章于 2019-12-01 20:24:01 发布

mjzhang1993

最新推荐文章于 2019-12-01 20:24:01 发布

阅读量561

点赞数

分类专栏： javascript设计模式文章标签： javascript 设计模式外观模式

本文链接：https://blog.csdn.net/mjzhang1993/article/details/74965877

版权

javascript设计模式专栏收录该内容

20 篇文章 1 订阅

订阅专栏

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');
    })

文章列表

mjzhang1993

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript设计模式-05-外观模式

Javascript设计模式 - 05 - 外观模式简介外观模式为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口使得这一子系统更加容易使用，他可以将一些复杂的操作封装起来，并创建一个简单的接口用于调用个人理解主要用于接口封装、兼容性封装、遗留代码封装代码 function addEvent(dom, type, fn) { if (d
复制链接

扫一扫