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 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
Vue的props父传子的示例代码
May 20 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 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
PHP入门
2006/10/09 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP7 新增功能
2021/03/09 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
python 生成器协程运算实例
2017/09/04 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
python对XML文件的操作实现代码
2020/03/27 Python
详解Python多线程下的list
2020/07/03 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
个人简历自我评价
2014/02/02 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
新闻人物通讯稿
2014/10/09 职场文书
护士医德考评自我评价
2015/03/03 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
python中pandas对多列进行分组统计的实现
2021/06/18 Python
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
tomcat下部署jenkins的方法
2022/05/06 Servers