JavaScript设计模式之门面模式原理与实现方法分析


Posted in Javascript onMarch 09, 2020

本文实例讲述了JavaScript设计模式之门面模式原理与实现方法。分享给大家供大家参考,具体如下:

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

门面模式具备如下两个角色:

1. 门面角色

客户端可以调用这个角色方法,此角色中有子系统的应用(知晓相关的(一个或多个)子系统的功能和责任)。本角色会将所有从客户端发来的请求委派到相应的子系统去。

2. 子系统角色

可以同时有一个或多个子系统。每一个子系统都不是一个单独的类,而是一些类的集合。每一个子系统都可以被客户端直接调用(这样客户端代码会多),或被门面角色调用。子系统并不知道门面的存在,对于子系统而言,门面仅仅是另一个客户端而已。

下面我们来看一个可以提现门面模式的简单需求:主人为自己的宠物狗办理的相应的宠物领养证件

从这个简单的需求中我们可以大致分析出我们需要:主人Person类和宠物狗Dog类 的一些相关信息

在下面的例子中国会涉及到接口的验证,现在先将代码贴出来

//(定义一个静态方法来实现接口与实现类的直接检验
//静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的
//我们要把静态的函数直接写到类层次上
//定义一个接口类
var Interface=function (name,methods) {//name:接口名字
  if(arguments.length<2){
    alert("必须是两个参数")
  }
  this.name=name;
  this.methods=[];//定义一个空数组装载函数名
  for(var i=0;i<methods.length;i++){
    if(typeof methods[i]!="string"){
      alert("函数名必须是字符串类型");
    }else {
      this.methods.push( methods[i]);
    }
  }
};
Interface.ensureImplement=function (object) {
  if(arguments.length<2){
    throw new Error("参数必须不少于2个")
    return false;
  }
  for(var i=1;i<arguments.length;i++){
    var inter=arguments[i];
    //如果是接口就必须是Interface类型
    if(inter.constructor!=Interface){
      throw new Error("如果是接口类的话,就必须是Interface类型");
    }
    //判断接口中的方法是否全部实现
    //遍历函数集合
    for(var j=0;j<inter.methods.length;j++){
      var method=inter.methods[j];//接口中所有函数

      //object[method]传入的函数
      //最终是判断传入的函数是否与接口中所用函数匹配
      if(!object[method]||typeof object[method]!="function" ){//实现类中必须有方法名字与接口中所用方法名相同
        throw new Error("实现类中没有完全实现接口中的所有方法")
      }
    }
  }
}

(1)主人类(Person类)

function Person() {
   this.name="测试";
   this.address="居住在中国";
   this.getInfo=function () {
     return "名字"+this.name+" 地址"+this.address;
   };
   this.learn=function () {
     alert("学习的方法");
   }
    this.marray=function () {
      alert("marray");
    }
   //验证接口
    Interface.ensureImplement(this,PersonDao);//验证该类是否全部实现接口中的方法
  }

(2)宠物狗(Dog类)

var DogDao=new Interface("DogDao",["getInfo","call","run"]);

  var Dog=function () {
    this.name="gg";
 this.getInfo=function () {
   return "狗狗的名字"+this.name;
 };
 this.call=function () { };
 this.run=function () {};
 Interface.ensureImplement(this,DogDao);//验证接口
  }

(3)现在可以主人可以给自己的宠物狗办理宠物领养证件了   -----客户端代码

 第一种方法:不用门面的方式客户端的代码如下

function action(person,dog) {
  var r="GG"+new Date().getDay()+Math.floor(Math.random()*11);
  var str="办证成功:编号"+r
   +"<br/>主人信息"+person.getInfo()
  +"<br>狗狗的信息:"+dog.getInfo();
  return str;
}document.write(action(new Person(),new Dog()));

第二种方法:使用门面模式-----将复杂的事交给门面来做,客户端压力可以减小

  #1:门面中进行如下的处理

function facade(person,dog) {
   var r="GG"+new Date().getDay()+Math.floor(Math.random()*11);
   var str="办证成功:编号"+r
     +"<br/>主人信息"+person.getInfo()
     +"<br>狗狗的信息:"+dog.getInfo();
   this.action=function () {//相当于实例的方法
     return str;
   };
 }

#2,客户端负责使用的代码为

function action2(person,dog) {
   document.write(new facade(person,dog).action());
}
action2(new Person(),new Dog());

总结,我们可以看出不适用门面模式的客户端需要处理较为复杂的业务,使用门面后,在门面中处理复杂的东西,而客户端只需要简单的调用即可。

 一个简单理解门面模式的图结构:

JavaScript设计模式之门面模式原理与实现方法分析

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 #Javascript
前端深入理解Typescript泛型概念
Mar 09 #Javascript
js实现无缝轮播图效果
Mar 09 #Javascript
js实现无缝轮播图
Mar 09 #Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 #Javascript
原生js实现瀑布流效果
Mar 09 #Javascript
原生JS实现贪吃蛇小游戏
Mar 09 #Javascript
You might like
一些花式咖啡的配方
2021/03/03 冲泡冲煮
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
php网站被挂木马后的修复方法总结
2014/11/06 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
Javascript面向对象编程
2012/03/18 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
python检测是文件还是目录的方法
2015/07/03 Python
如何用python整理附件
2018/05/13 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
Python csv文件记录流程代码解析
2020/07/16 Python
python反扒机制的5种解决方法
2021/02/06 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
网络教育自我鉴定
2014/02/04 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
小学体育教学随笔
2015/08/14 职场文书