JavaScript门面模式详解


Posted in Javascript onOctober 19, 2017

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

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

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门面模式详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
jquery属性,遍历,HTML操作方法详解
Sep 17 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
js实现产品缩略图效果
Mar 10 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
js基于canvas实现时钟组件
Feb 07 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 #Javascript
AngularJS的$location使用方法详解
Oct 19 #Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 #Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 #Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 #jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 #jQuery
浅谈Node Inspector 代理实现
Oct 19 #Javascript
You might like
星际争霸兵种名称对照表
2020/03/04 星际争霸
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
一些实用的jQuery代码片段收集
2011/07/12 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
Vue表单控件绑定图文详解
2019/02/11 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
Python中的装饰器用法详解
2015/01/14 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Python获取当前路径实现代码
2017/05/08 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
EM算法的python实现的方法步骤
2018/01/02 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
python next()和iter()函数原理解析
2020/02/07 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
python 实现单例模式的5种方法
2020/09/23 Python
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
C#笔试题
2015/07/14 面试题
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
2015年党性分析材料
2014/12/19 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis