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 相关文章推荐
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
js querySelector() 使用方法
Dec 21 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 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
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
PHP培训要多少钱
2017/06/06 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
JavaScript 的继承
2011/10/01 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
对于Python中线程问题的简单讲解
2015/04/03 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
个人校本研修方案
2014/05/26 职场文书
敬老月活动总结
2014/08/28 职场文书
Django实现聊天机器人
2021/05/31 Python