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的掌握程度的代码
Dec 09 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
jquery手风琴特效插件
Feb 04 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
微信小程序实现点击生成随机验证码
Sep 09 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
解决cPanel无法安装php5.2.17
2014/06/22 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
详解HTML5新增标签
2017/11/27 HTML / CSS
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
采购主管工作职责
2013/12/12 职场文书
质检员岗位职责
2013/12/17 职场文书
社区七一党员活动方案
2014/01/25 职场文书
请病假条范文
2015/08/17 职场文书
教学反思怎么写
2016/02/24 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
Python 中 Shutil 模块详情
2021/11/11 Python
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏