js设计模式 --- 外观设计模式

saucxs 发布于2019-08-26 11:47 / 1597人阅读

摘要：外观设计模式外部与一个子系统的通信必须通过一个统一的门面对象进行，这就是门面模式。此角色知晓相关的子系统的功能和责任。外观模式结构客户端正常调用方式外观模式调用方式实现未使用外观模式子系统类客户端调用使用外观模式子系统类同上外观类客户端调用

外观设计模式

外部与一个子系统的通信必须通过一个统一的门面(Facade)对象进行，这就是门面模式。

外观模式为子系统提供了统一的界面, 屏蔽了子类的不同

现代大型软件发展到一定程度会非常复杂, 于是就需要对软件进行模块化开发, 将系统分成各个模块, 有利于维护和拓展,但即使这样在我们调用的时候依然要和许多类打交道, 依然很复杂, 于是外观设计模式应运而生. 外观设计模式就是为多个子系统提供一个统一的外观类来简化外部人员操作, 下面是使用外观模式前后的的医院案例

外观模式就好像一个接待员免去了外部人员与各个科室进行交流, 应为各个科室运作流程还是比较复杂的, 通过一个熟悉业务的外观类可以大大提高医院的效率.

正常情况

使用外观模式后

外观模式设计两种对象

外观类: 客户端调用这个角色的方法。此角色知晓相关的子系统的功能和责任。正常情况下，本角色会将所有从客户端发来的请求委派到相应的子系统中去.

子系统类:可以同时有一个或者多个子系统。每个子系统都不是一个多带带的类，而是一个类的集合。每一个子系统都可以被客户端直接调用，或者被门面角色直接调用。子系统并不知道门面的存在，对于子系统而言，门面仅仅是另一个客户端而已。

外观模式结构
客户端正常调用方式

外观模式调用方式

实现

未使用外观模式

子系统类

let Light = function () {  
};
Light.prototype.turnOn = function () {
  console.log("Light turn on");
};
Light.prototype.turnOff = function () {
  console.log("Light turn off");
};

let TV = function () { 
};
TV.prototype.turnOn = function () {
  console.log("TV turn on");
};
TV.prototype.turnOff = function () {
  console.log("TV turn off");
};

let Computer = function () {
};
Computer.prototype.turnOn = function () {
  console.log("Computer turn on");
};
Computer.prototype.turnOff = function () {
  console.log("Computer turn off");
};

客户端调用

let light = new Light();
let tv = new TV();
let computer = new Computer();

light.turnOn();
tv.turnOn();
computer.turnOn();

light.turnOff();
tv.turnOff();
computer.turnOff();

使用外观模式

子系统类

//同上

外观类

let Facade = function () {
  this.light = new Light();
  this.tv = new TV();
  this.computer = new Computer();
}
Facade.prototype.turnOn = function () {
  light.turnOn();
  tv.turnOn();
  computer.turnOn();
}
Facade.prototype.turnOff = function () {
  light.turnOff();
  tv.turnOff();
  computer.turnOff();
}

客户端调用

let facade = new Facade();

facade.turnOn();
facade.turnOff();

服务器托管云服务器 JS设计模式代码设计模式工厂模式模式设计设计模式?

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107557.html

JS或Jquery

摘要：大潮来袭前端开发能做些什么去年谷歌和火狐针对提出了的标准，顾名思义，即的体验方式，我们可以戴着头显享受沉浸式的网页，新的标准让我们可以使用语言来开发。 VR 大潮来袭 --- 前端开发能做些什么去年谷歌和火狐针对 WebVR 提出了 WebVR API 的标准，顾名思义，WebVR 即 web + VR 的体验方式，我们可以戴着头显享受沉浸式的网页，新的 API 标准让我们可以使用 ...

CatalpaFlat 2019-08-22 11:17 评论0 收藏0
JS 外观模式

摘要：外观模式在中常常用于解决浏览器兼容性问题。实现外观模式不仅简化类中的接口，而且对接口与调用者也进行了解耦。外观模式的优势是易于使用，而且本身也比较轻量级。 1. 简介外观模式（Facade）为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口值得这一子系统更加容易使用。外观模式在JS中常常用于解决浏览器兼容性问题。 2. 实现外观模式不仅简化类中的接口，而且...

BothEyes1993 2019-08-22 11:18 评论0 收藏0
js设计模式--模板方法模式

摘要：前言本系列文章主要根据设计模式与开发实践整理而来，其中会加入了一些自己的思考。模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。前言本系列文章主要根据《JavaScript设计模式与开发实践》整理而来，其中会加入了一些自己的思考。希望对大家有所帮助。文章系列 js设计模式--单例模式 js设计模式--策略模式 js设计模式--代理模式 js设计模式--迭...

yuanxin 2019-08-23 14:32 评论0 收藏0
JS设计模式之Facade（外观）模式

摘要：概念模式为更大的代码提供了一个方便的高层次接口，能够隐藏其底层的真是复杂性。参考设计模式设计模式系列文章设计模式之模块模式揭示模块模式设计模式之单例模式设计模式之外观模式概念 Facade模式为更大的代码提供了一个方便的高层次接口，能够隐藏其底层的真是复杂性。可以把它想成是简化API来展示给其他开发人员。优缺点优点简化接口使用者与代码解耦易于使用缺点存在隐性成本，性...

xiaodao 2019-08-23 13:57 评论0 收藏0
JS设计模式之Module（模块）模式、Revealing Module（揭示模块）模式

摘要：模块模式概念模式最初被定义为一种在传统软件工程中为类提供私有和共有封装的方法。应用将暴露的公有指针指向到私有函数和属性上参考设计模式设计模式系列文章设计模式之工厂模式设计模式之单例模式设计模式之外观模式设计模式之模块模式揭示模块模式 Module（模块）模式概念 Module模式最初被定义为一种在传统软件工程中为类提供私有和共有封装的方法。通过这种方式，能够使一个单独的对象拥有共有...

xavier 2019-08-23 14:40 评论0 收藏0
JS设计模式--Factory(工厂)模式

摘要：对解耦是很有用对。设计模式系列文章设计模式之观察者模式发布订阅模式设计模式之工厂模式设计模式之单例模式设计模式之外观模式设计模式之模块模式揭示模块模式工厂模式提供一个通用的接口来创建对象示例 //Car构造函数 function Car(option) { this.doors = option.doors || 4 this.color = option...

UsherChen 2019-08-26 13:35 评论0 收藏0