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

外观设计模式

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

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

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

外观模式就好像一个接待员免去了外部人员与各个科室进行交流, 应为各个科室运做流程仍是比较复杂的, 经过一个熟悉业务的外观类能够大大提升医院的效率.设计模式

  • 正常状况
    图片描述
  • 使用外观模式后
    图片描述

外观模式设计两种对象模块化

  • 外观类: 客户端调用这个角色的方法。此角色知晓相关的子系统的功能和责任。正常状况下,本角色会将全部从客户端发来的请求委派到相应的子系统中去.
  • 子系统类:能够同时有一个或者多个子系统。每一个子系统都不是一个单独的类,而是一个类的集合。每个子系统均可以被客户端直接调用,或者被门面角色直接调用。子系统并不知道门面的存在,对于子系统而言,门面仅仅是另外一个客户端而已。
  • 外观模式结构
    客户端正常调用方式
    图片描述

    外观模式调用方式
    图片描述this

实现

  • 未使用外观模式spa

    • 子系统类prototype

      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();
  • 使用外观模式code

    • 子系统类模块化开发

      //同上
    • 外观类

      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();
相关文章
相关标签/搜索