[设计模式][装饰模式][Javascript]

QiShare 发布于2019-08-21 10:18 / 1685人阅读

摘要：定义装饰模式力图解决的问题是过度使用了继承来扩展对象的功能。装饰模式是类继承的另外一种选择，类继承在编译时候增加行为，而装饰模式是在运行时增加行为。

The Decorator Pattern is a design pattern that allows behavior to be added to an individual object, either statically or dynamically, without affecting the behavior of other objects from the same class.
From http://en.wikipedia.org/wiki/Decorator_pattern

定义

装饰模式力图解决的问题是：过度使用了继承来扩展对象的功能。继承引入的是静态特质，这种扩展方式缺乏灵活性，并且随着子类的增多，各种子类的组合会导致更多的子类膨胀

装饰模式力图动态的给一个对象添加一些额外的职责。

装饰模式是类继承的另外一种选择，类继承在编译时候增加行为，而装饰模式是在运行时增加行为。当有几个互相独立的功能需要扩展时，这个区别就变得很重要。

需求

简单的用户登陆框，需求是这样的：

固定部分：用户输入部分，用户名输入和密码输入

可选部分：顶部的活动推荐条和底部的广告

需求：根据服务端的数据和类型返回决定显示Banner和Advertisement，做到可以动态的添加和配置

类图

角色

Component (LoginPanel) 接口定义

ConcreteComponent (SimpleLoginPanel) 需要动态添加功能的具体对象

Decorator (LoginPanelDecorator) 拥有Component对象，定义一组与Component一致的接口

实现

var prototype = require("prototype");

var LoginPanel = {
  render: function(){
    throw new Error("method must be override!");
  }
};

var SimpleLoginPanel = prototype.Class.create(LoginPanel, {
  render: function(){
    // @todo 渲染基础的LoginPanel，加入用户输入框
    console.log("渲染用户输入框");
  }
});

var LoginPanelDecorator = prototype.Class.create(LoginPanel, {

  initialize: function (panel) {
    this.panel = panel;
  },

  render: function () {
    // @todo 做基础内容的渲染
    this.panel.render();
  }
});

var BannerDecorator = prototype.Class.create(LoginPanelDecorator, {
  render: function ($super) {
    $super();
    this.setBanner();
  },

  setBanner: function () {
    // @todo 渲染添加的活动Banner
    console.log("渲染添加的活动Banner");
  }
});

var AdvertisementDecorator = prototype.Class.create(LoginPanelDecorator, {
  render: function ($super) {
    $super();
    this.setAd();
  },

  setAd: function () {
    // @todo 渲染广告
    console.log("渲染广告");
  }
});

var Main = function () {

  // 声明一个简单的LoginPanel
  var simpleLoginPanel = new SimpleLoginPanel();

  // 加入广告
  var adDecorator = new AdvertisementDecorator(simpleLoginPanel);
  adDecorator.render();

  console.log("--------------------------------")

  // 加入Banner
  var bannerDecorator = new BannerDecorator(adDecorator);
  bannerDecorator.render();

}

Main();

注：继承采用了PrototypeJS提供的Class来做的，使用了Prototype.Node，关于prototype如何使用参考Prototype Doc

参考

http://en.wikipedia.org/wiki/Decorator_pattern

http://www.cnblogs.com/kid-li/archive/2006/06/26/435966.html

http://www.oodesign.com/decorator-pattern.html

http://tianli.blog.51cto.com/190322/35287

GPU云服务器云服务器装饰模式装饰模式介绍装饰器模式装饰着模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85276.html

JavaScript设计模式----装饰者模式

摘要：声明这个系列为阅读设计模式与开发实践曾探著一书的读书笔记装饰者模式的定义装饰者模式能够在不改变对象自身的基础上，在程序运行期间给对像动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。装饰者模式的作用就是为对象动态的加入某些行为。声明：这个系列为阅读《JavaScript设计模式与开发实践》 ----曾探@著一书的读书笔记装饰者模式的定义：装饰者(decorator)模式能...

rose 2019-08-21 14:04 评论0 收藏0
5 分钟即可掌握的 JavaScript 装饰者模式与 AOP

摘要：下装饰者的实现了解了装饰者模式和的概念之后，我们写一段能够兼容的代码来实现装饰者模式原函数拍照片定义函数装饰函数加滤镜用装饰函数装饰原函数这样我们就实现了抽离拍照与滤镜逻辑，如果以后需要自动上传功能，也可以通过函数来添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是装饰者模式当我们拍了一张照片准备发朋友...

chunquedong 2019-08-23 18:16 评论0 收藏0
JavaScript设计模式七：装饰者模式

摘要：装饰者模式装饰者模式提供比继承更有弹性的替代方案。装饰者用于包装同接口的对象，用于通过重载方法的形式添加新功能，该模式可以在被装饰者的前面或后面加上自己的行为以达到特定的目的。简单的理解给对象动态添加职责的方式称为装饰着模式。装饰者模式装饰者模式提供比继承更有弹性的替代方案。装饰者用于包装同接口的对象，用于通过重载方法的形式添加新功能，该模式可以在被装饰者的前面或后面加上自己的行为...

alexnevsky 2019-08-26 11:44 评论0 收藏0
javascript设计模式 --- 装饰者模式

摘要：设计模式装饰者模式何为装饰者，意思就是，在不影响对象主功能的情况下，再添加一些额外的功能，使对象具备更多的功能。与继承相比，装饰者是一种更灵活轻便的做法。 javascript设计模式 --- 装饰者模式何为装饰者，意思就是，在不影响对象主功能的情况下，再添加一些额外的功能，使对象具备更多的功能。与继承相比，装饰者是一种更灵活轻便的做法。下面我们看看javascript里装饰者模式 ...

kumfo 2019-08-22 16:07 评论0 收藏0
javascript设计模式--装饰者模式

摘要：装饰者模式定义装饰者模式能够在不改变对象自身的基础上，在程序运行期间给对像动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。装饰者模式定义 : 装饰者(decorator)模式能够在不改变对象自身的基础上，在程序运行期间给对像动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。在不改变对象自身的基础上，在程序运行期间给对象动态地添加一些额外职责特点：可以动态的...

haoguo 2019-08-21 16:50 评论0 收藏0
《JavaScript 模式》知识点小抄本（上）

摘要：单体模式有以下优点用来划分命名空间，减少全局变量数量。通常我们使用操作符创建单体模式的三种选择，让构造函数总返回最初的对象使用全局对象来存储该实例不推荐，容易全局污染。实现该工厂模式并不困难，主要是要找到能够穿件所需类型对象的构造函数。介绍最近开始给自己每周订个学习任务，学习结果反馈为一篇文章的输出，做好学习记录。这一周(02.25-03.03)我定的目标是《JavaScri...

didikee 2019-08-23 15:37 评论0 收藏0