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 相关文章推荐
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 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集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
python中常用检测字符串相关函数汇总
2015/04/15 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
python 模块导入问题汇总
2021/02/01 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
师范院校学生自荐信范文
2013/12/27 职场文书
党员公开承诺书
2014/03/25 职场文书
优秀党员先进材料
2014/12/18 职场文书
导游词之西递宏村
2019/12/10 职场文书
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技