JavaScript设计模式之外观模式介绍


Posted in Javascript onDecember 28, 2014

外观模式说明

说明:外观模式是用于由于子系统或程序组成较复杂而提供的一个高层界面接口,使用客户端更容易访问底层的程序或系统接口;

外观模式是我们经常使用遇到的模式,我们经常涉及到的功能,可能需要涉及到几个子接口或子系统,而我们的某个功能,可能只需要这向个多个子接口中的一个或几个组成的顺序封装。如果是业务功能直接对应子接口或子系统的,可能要求开发人员对内部需要相当的了解;你可能需要去了解业务流程是怎么走,他的顺序是什么,等等。这即需要开发员了解业务,也使得客户端编程变得相当的复杂;

这里如果有一层,或是一个类,专门提供好封装好我们要使用的方法,客户端功能只需要与这个中间层类交互,中间层类的相应方法有了解业务的相关开发人员组织封装,那么程序将变得非常的简单,程序员只需要知道他这个功能所需要对应方法是哪个即可,也不用知道内部的逻辑。

这个中间层类就是我们说的外观类,这就是外观模式的思想。

场景实例:

1>. 比如总开关的例子,这个总开关,可以控制家里的大门的一盏灯,大厅的几盏灯,并控制着家电视机,电冰箱等的供电,你把哪个小按钮按上“ON”,哪个就有了电,甚至直接发光输热,你不必知道,这总开关上的按钮是怎么出来电的,或是怎么按制到相关电器的,反正直接压上就来电了。

这些个电灯,电视机等就是我们要使用的接口,小系统;这个总开关就是我们的外观类,我们直接面对它操作即可。

2>. 还好比一个公司,有好几个职能部门,老板哪一天需要各方面工作的执行情况了,他就跑去一个个部门内部,问个员工说这个某某事情办得怎么样了,如果问对人了能直接给老板答案,要是不是这个人负责的,他还会跟老板说,哦,这事是谁谁负责的,老板还得跑去问下那人,多麻烦。

如果每个职能部门设个主管负责人,老板直接去找它了解情况就可以了,老板也不用关心这个负责人是怎么知道这些的,他只要想了解的这么1,2,3件事情的情况跟进展即可。

实例源码

现在按第二个实例场景实现源码:

1. 几个部门职能类:

部门1 (业务部门):

function BusinessDept() {

  this.manager = '陈经理'; //负责人

}

BusinessDept.prototype = {

  MonthSales: function() {

    console.log(this.manager + '说:这个月销售额是xxx');

  },

  NextPlan: function() {

    console.log(this.manager + '说:接下来的计划是这样的,xxxx');

  }

}

部门2(研发部门):

function RDdept() {

  this.manager = '黄经理';

}

RDdept.prototype = {

  progress: function() {

    console.log(this.manager + '说:目前的项目情况跟进展是这样的xxx');

  },

  deptPlan: function() {

    console.log(this.manager + '说:接下来的部门规划是这样的xxx');

  }

}

以上是各部门主管所要回答老板的问题;

接下来建立外观类,用于组织老板想问的问题;

function Facade() {

  this.business = new BusinessDept() ;

  this.rddept = new RDdept();

}

Facade.prototype = {

  DeptSituation: function() {

    this.business.MonthSales(); //销售部经理先说;

    this.rddept.progress();

  },

  deptPlan: function() {

    this.business.NextPlan(); //报告接下来计划;

    this.rddept.deptPlan();

  }

}

接下来老板把两位经理叫到面前,开始问话了:

var facade = new Facade();

console.log('老板问:现在介绍下自己部门的情况?');

facade.DeptSituation();

console.log('老板问:接下来有什么规划?');

facade.deptPlan();

其他说明

使用外观模式,可以使得接口或类之间解耦,使得类之间不必产生依赖,不必要使用时得A包含B,或是B一定得包含A,这违反了关闭修改原则,使用中间层外观类包装,可以使得接口调用变得简单,使用子接口或子系统对象调用变得更加自由可组织。

外观模式经常出现我们的编程中,外观模式经常使用在架构系统的模式定义中出现,我们的系统要使用第三方的接口服务,也经常再加层外观层用于组织可用的业务接口;

Javascript 相关文章推荐
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
如何对react hooks进行单元测试的方法
Aug 14 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 #Javascript
jQuery中removeData()方法用法实例
Dec 27 #Javascript
jQuery中data()方法用法实例
Dec 27 #Javascript
jQuery中index()方法用法实例
Dec 27 #Javascript
jQuery中get()方法用法实例
Dec 27 #Javascript
jQuery的context属性用法实例
Dec 27 #Javascript
jQuery对象的selector属性用法实例
Dec 27 #Javascript
You might like
模仿OSO的论坛(四)
2006/10/09 PHP
给php新手谈谈我的学习心得
2007/02/25 PHP
php生成静态页面的简单示例
2014/04/17 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
CI框架中数据库操作函数$this->db->where()相关用法总结
2016/05/17 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
python保留小数位的三种实现方法
2020/01/07 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
银行会计业务的个人自我评价
2013/11/02 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python