登录  /  注册
首页 > web前端 > js教程 > 正文

js桥接设计模式详解

小云云
发布: 2018-02-23 11:50:39
原创
1217人浏览过

 桥接设计模式是许多其他设计模式的基础,比如装饰模式, 代理模式都或多或少看到他的影子, 在面向对象设计中最重要的一个特点就是继承, 然而作为拓展类的功能的方式有两种 -- 继承和桥接, 桥接用我简单的理解就是放弃使用继承的方式拓展类, 而是采用包含另一个具有一定功能的对象来拓展类, 下面来看两种结构。

首先我们假设有一个需求, 有一个图形接口, 然后有长方形, 正方形, 圆形等图形类, 我们需要各种颜色的图形, 下面用继承和桥接的方式来实现这种需求.

  • 继承

  • 桥接

桥接模式结构

实现

  • 图形抽象类

    let Shape = function(color) {
      this.color = color;
    };
    Shape.prototype.setColor = function(color) {
      this.color = color;
    };
    Shape.prototype.draw = function() {
      new  Error();
    }
    登录后复制
  • 图形类

    let Rectangle = function (color) {
      Shape.call(this, color);
    };
    extend(Rectangle, Shape);
    Rectangle.prototype.draw = function () {
      color.bepaint("长方形");
    };
    
    let Square = function (color) {
      Shape.call(this, color);
    };
    extend(Square, Shape);
    Square.prototype.draw = function () {
      color.bepaint("正方形");
    }
    
    let Circle = function (color) {
      Shape.call(this, color);
    };
    extend(Circle, Shape);
    Circle.prototype.draw = function () {
      color.bepaint("圆型");
    };
    登录后复制
  • 颜色抽象类

    let Color = function() {
    };
    Shape.prototype.bepaint = function() {
      new  Error();
    };
    登录后复制
  • 颜色类

    let Red = function () {
      Color.call(this);
    };
    extend(Red, Color);
    Red.prototype.bepaint = function(shape) {
      console.log("白色的" + shape);
    };
    
    let Green = function () {
      Color.call(this);
    };
    extend(Green, Color);
    Green.prototype.bepaint = function(shape) {
      console.log("绿色的" + shape);
    };
    
    let Blue = function () {
      Color.call(this);
    };
    extend(Blue, Color);
    Blue.prototype.bepaint = function(shape) {
      console.log("蓝色的" + shape);
    };
    登录后复制
  • 使用

    let red = new Red();
    
    //正方形
    let square = new Square();
    //红色的正方形
    square.setColor(red);
    square.draw();
    
    //长方形
    let rectange = new Rectangle();
    //红色长方形
    rectange.setColor(red);
    rectange.draw();
    登录后复制
桥式设计适用于一个类存在两个或多个独立变化的维度,且这两个维度都需要进行扩展,
桥接模式实现了抽象化与实现化的脱耦。他们两个互相独立,不会影响到对方, 对于两个独立变化的维度,使用桥接模式再适合不过了。

相关推荐:

简单介绍js设计模式之结构型享元模式

php设计模式之服务定位器模式实例详解

详解PHP设计模式之委托模式

以上就是js桥接设计模式详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号