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 相关文章推荐
关于js注册事件的常用方法
Apr 03 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
js实现移动端轮播图
Dec 21 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 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
PHP并发查询MySQL的实例代码
2017/08/09 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python中的错误处理
2016/04/10 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
模具设计与制造专业求职信
2014/07/19 职场文书
公司离职证明标准格式
2014/11/18 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis