JavaScript设计模式--桥梁模式引入操作实例分析


Posted in Javascript onMay 23, 2020

本文实例讲述了JavaScript设计模式--桥梁模式引入操作。分享给大家供大家参考,具体如下:

1.使用情况

(1)事件的监控

#1,利用页面的button来选择宠物的例子(思路)

button.addEvent(element,"click",getPetByBame);
  function getPetByBame(e){
    var id = this.id;
    asyncRquest("GET",'pet.action?id='+id,function(pet){
      consols.log("request pet"+pet.resopnseText)
    })
  }

#2,addEvent函数

/*obj:需要增加事件的对象
* type:事件名称
* fn:执行事件的函数
* */
function addEvent(obj,type,fn){//addEvent:为某个文档节点增加事件的方法
  if(obj.addEventListener){//Mozilla中:
    obj.addEventListener(type,fn,false);
  }else if(obj.attachEvent){//IE中:
    obj["e"+type+fn] = fn;
    obj[type+fn] = function(){
      obj["e"+type+fn]()
    }
    obj.attachEvent("on"+type,fn)
  }
}

总结:该种方式对于单元测试很难进行

改进为用简单的桥梁模式来解决

#1,后台中的api

function getPetByBame(id,callBack){
    sayncRquest("GET",'url?id='+id,function(pet){
      callBack(pet)
    })

#2,桥梁

//定义一个桥梁叫抽象和实现相互联系在一起
  addEvent(element,"click",getPetByNameBridge)
  function getPetByNameBridge(){
    getPetByBame(this.id,function(pet){
      consols.log("request pet"+pet.resopnseText);
    })
  }

总结:这种做法使API和展现层完全分离,API和展现层可以灵活的变动。

(2)特权函数

//特权函数
var privilege=function () {
  //信息全封闭,内部业务逻辑复杂,做成一个特权函数,使调用方便
  var complex=function (x,y) {
    //复杂的数学处理
  }

 this.bridge=function () { //提供公共接口,返回一个单体
   return {
     bridgeAdd:function () {
       //处理前
       complex(1,2);
       //处理后
     }

   }
 }
}

(3)多个类的连接

//多个类的连接
var class1=function (a,b) {
  this.a=a;
  this.b=b;
}
  var class2=function (e) {
    this.e=e;
  }
  //桥梁的连接
  var bridgeClass=function () {
    this.one=new Class1(1,2);
    this.two=new Class1(1);
  }
//目的:两个类能独立的修改,而门面的意义在于调用方便

桥梁模式:

JavaScript设计模式--桥梁模式引入操作实例分析

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

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

Javascript 相关文章推荐
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
js添加绑定事件的方法
May 15 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
基于JS实现无缝滚动思路及代码分享
Jun 07 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
原生js实现3D轮播图
Mar 21 Javascript
vue中实现点击变成全屏的多种方法
Sep 27 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 #Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 #Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 #Javascript
微信小程序点击滚动到指定位置的实现
May 22 #Javascript
使用JavaScript通过前端发送电子邮件
May 22 #Javascript
uni-app微信小程序登录授权的实现
May 22 #Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 #jQuery
You might like
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
javascript常见操作汇总
2014/09/03 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
小学教师自我剖析材料
2014/09/29 职场文书
检讨书范文2000字
2015/01/28 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers
全网非常详细的pytest配置文件
2022/07/15 Python