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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
JavaScript实现简单的弹窗效果
May 19 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动态创建Flash动画
2006/10/09 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
php获取操作系统语言代码
2013/11/04 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
react基本安装与测试示例
2020/04/27 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
python Django模板的使用方法(图文)
2013/11/04 Python
Python与R语言的简要对比
2017/11/14 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
详解Python多线程下的list
2020/07/03 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
商场总经理岗位职责
2014/02/03 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
Django框架之路由用法
2022/06/10 Python