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 固定悬浮效果实现思路代码
Aug 02 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
js实现select下拉框选择
Jan 11 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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
关于svn冲突的解决方法
2013/06/21 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
原生js实现随机点名
2020/07/05 Javascript
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
用Python写王者荣耀刷金币脚本
2017/12/21 Python
python3 flask实现文件上传功能
2020/03/20 Python
Python正则表达式和元字符详解
2018/11/29 Python
对python中的装包与解包实例详解
2019/08/24 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
关于国庆节的广播稿
2015/08/19 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android
分析Java中Map的遍历性能问题
2021/06/26 Java/Android