javascript设计模式 ? 桥接模式原理与应用实例分析


Posted in Javascript onApril 13, 2020

本文实例讲述了javascript设计模式 ? 桥接模式原理与应用。分享给大家供大家参考,具体如下:

介绍:如果软件系统中某个类存在两个或多个独立变化的维度,可以通过桥接模式将这些维度分离出来,使两者可以独立扩展,让系统更符合单一职责原则。

定义:将抽象部分与其实现部分分离,使他们都可以独立的变化。它是一种对象结构型模式,又称为柄体模式或接口模式。

场景:我们做一个简单的画圆,将圆的半径和颜色这两个维度进行分离,使每一个维度都可以单独扩展,很多同学都说这么简单一个需求我5行代码就实现了。为什么写这么??乱惶住?br /> 我们这里分享的是设计思想,当你的系统足够复杂时需要用什么样的方式进行优化。作为示例,也只是用最小的例子把道理讲明白,不是说所有类似的地方就必须这么写。什么样的场景需要什么样的模式,需不需要用模式需要你自己去考量。

示例:

var CircularColor = {};
CircularColor.redCircular = function(){
  this.getColor = function(){
    return 'red';
  }
}
CircularColor.greenCircular = function(){
  this.getColor = function(){
    return 'green';
  }
}
 
var CircularRadius = {};
CircularRadius.small = function(){
  this.x = this.y = 0;
  this.radius = 5;
  this.color = null;
  this.setColor = function(circularColor){
    this.color = circularColor.getColor();
  }
  this.draw = function(){
    console.log('画一个小圆!颜色:' + this.color + ' 原点坐标:x:' + this.x + ' y:' + this.y + ' 半径:' + this.radius);
  }
}
CircularRadius.big = function(){
  this.x = this.y = 0;
  this.radius = 20;
  this.color = null;
  this.setColor = function(circularColor){
    this.color = circularColor.getColor();
  }
  this.draw = function(){
    console.log('画一个大圆!颜色:' + this.color + ' 原点坐标:x:' + this.x + ' y:' + this.y + ' 半径:' + this.radius);
  }
}
 
var color = new CircularColor.redCircular();
var radius = new CircularRadius.big();
radius.setColor(color);
radius.draw();//画一个大圆!颜色:red 原点坐标:x:0 y:0 半径:20

这节需要说一个点,桥接模式在java的介绍里,独立之后的维度是在抽象层会建立关联关系,js没有抽象层,所以两个独立维度通过一个setColor方法建立关联关系。

桥接模式总结:

优点:

* 桥接模式提高了系统的可扩展性,在两个变化维度中任意扩展一个维度,都不需要修改原有系统,符合开关原则。
* 多数情况下,桥接模式可以取代多层集成方案。
* 分离接口及其实现部分,使得实现可以沿着各自的维度来变化。

缺点:

* 桥接模式的使用会增加系统的理解与设计难度。
* 桥接模式要求正确识别出系统中两个独立变化的维度,因此其使用范围具有一定的局限性。

适用场景:

* 一个类存在两个或多个独立变化的维度,且这些维度都需要独立进行扩展。

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

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

Javascript 相关文章推荐
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
详解JavaScript函数对象
Nov 15 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
详解a++和++a的区别
Aug 30 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 #Javascript
JavaScript创建表格的方法
Apr 13 #Javascript
JavaScript实现捕获鼠标坐标
Apr 12 #Javascript
jquery实现轮播图特效
Apr 12 #jQuery
用jQuery实现抽奖程序
Apr 12 #jQuery
javascript实现画板功能
Apr 12 #Javascript
JS实现随机点名器
Apr 12 #Javascript
You might like
SONY ICF-SW7600的电路分析
2021/03/02 无线电
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
js简易版购物车功能
2017/06/17 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
浅谈python标准库--functools.partial
2019/03/13 Python
详解Python装饰器
2019/03/25 Python
python基于递归解决背包问题详解
2019/07/03 Python
python将图片转base64,实现前端显示
2020/01/09 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
利用python实现汉诺塔游戏
2021/03/01 Python
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
公司承诺书范文
2014/05/19 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年仓库工作总结
2015/04/09 职场文书