JavaScript设计模式之装饰者模式定义与应用示例

本文实例讲述了JavaScript设计模式之装饰者模式定义与应用。分享给大家供大家参考，具体如下：

在不改变原对象的基础上，通过对其进行包装扩展（添加属性或方法），使原有对象可以满足用户的更复杂需求，满足开闭原则，也不会破坏现有的操作。

适用场景：当遇到新的功能或需求需要对原来的操作做出更改时，若原来的操作比较复杂，可以把原来的操作原封不动地放在装饰者中，然后再添加新功能。

eg1：

function Person() {
}
Person.prototype.sayHello = function() {
  console.log('Hello, Alice!');
};
function Decorator(param) {
  this.person = param;
}
Decorator.prototype.sayHello = function() {
  this.person.sayHello();
  console.log('Hello, Bruce!');
};
Decorator.prototype.sayGoodbye = function() {
  console.log('Bye, everyone!');
};
new Decorator(new Person()).sayHello();
/*
输出：
Hello, Alice!
Hello, Bruce!
*/
new Decorator(new Person()).sayGoodbye();
/*
输出：
Bye, everyone!
*/

没有改变原有的构造函数对象，而是原封不动地拿过来，再添加新的方法。

eg2：

var div = document.getElementById('div');
div.onclick = function() {
  console.log('First click!');
}
var decorator = function() {
  var args = arguments;
  var element = document.getElementById(args[0]);
  if (typeof element.onclick === 'function') {
    var firstClick = element.onclick;
    element.onclick = function() {
      firstClick();
      args[1]();
    }
  }
  else
    element.onclick = args[1];
}
decorator('div', function() {
  console.log('Second click!');
});
/*
输出：
First click!
Second click!
*/

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

赞 (0)

相关推荐

  • JavaScript设计模式之装饰者模式实例详解

    JavaScript设计模式之装饰者模式实例详解

    本文实例讲述了JavaScript设计模式之装饰者模式.分享给大家供大家参考,具体如下: 这里我们通过需求逐渐引出装饰者模式. 下面是一个关于几代汽车的不同逐渐体现装饰者模式的. 首先,我们先引入一个接口文件----目的为检验实现类是否完全实现接口中的方法,代码如下, //定义一个静态方法来实现接口与实现类的直接检验 //静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的 //我们要把静态的函数直接写到类层次上 //定义一个接口类 var Interface=

  • Javascript设计模式之装饰者模式详解篇

    一.前言: 装饰者模式(Decorator Pattern):在不改变原类和继承的情况下动态扩展对象功能,通过包装一个对象来实现一个新的具有原对象相同接口的新的对象. 装饰者模式的特点: 1. 在不改变原对象的原本结构的情况下进行功能添加. 2. 装饰对象和原对象具有相同的接口,可以使客户以与原对象相同的方式使用装饰对象. 3. 装饰对象中包含原对象的引用,即装饰对象是真正的原对象经过包装后的对象. 二.Javascript装饰者模式详解: 描述: 装饰者模式中,可以在运行时动态添加附加功能到对

  • 轻松掌握JavaScript装饰者模式

    在传统的面向对象语言中,给对象添加功能常常使用继承的方式,但继承的方式会带来问题:当父类改变时,他的所有子类都将随之改变. 当JavaScript脚本运行时,在一个对象中(或他的原型上)增加行为会影响该对象的所有实例, 装饰者是一种实现继承的替代方案,它通过重载方法的形式添加新功能,该模式可以在被装饰者前面(before)或者后面(after)加上自己的行为以达到特定的目的. 装饰者模式是为已有功能动态地添加更多功能的一种方式,把每个要装饰的功能放在单独的函数里,然后用该函数包装所要装饰的已有函

  • JavaScript实现AOP详解(面向切面编程,装饰者模式)

    JavaScript实现AOP详解(面向切面编程,装饰者模式)

    什么是AOP? AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计.安全控制.异常处理等.把这些功能抽离出来之后, 再通过"动态织入"的方式掺入业务逻辑模块中. AOP能给我们带来什么好处? AOP的好处首先是可以保持业务逻辑模块的纯净和高内聚性,其次是可以很方便地复用日志统计等功能模块. JavaScript实现AOP的思路? 通常,在 JavaScript 中实现 AOP,都是指把一个函数"动态织入&qu

  • 新手快速入门JavaScript装饰者模式与AOP

    什么是装饰者模式 当我们拍了一张照片准备发朋友圈时,许多小伙伴会选择给照片加上滤镜.同一张照片.不同的滤镜组合起来就会有不同的体验.这里实际上就应用了装饰者模式:是通过滤镜装饰了照片.在不改变对象(照片)的情况下动态的为其添加功能(滤镜). 需要注意的是:由于 JavaScript 语言动态的特性,我们很容易就能改变某个对象(JavaScript 中函数是一等公民).但是我们要尽量避免直接改写某个函数,这会导致代码的可维护性.可扩展性变差,甚至会污染其他业务. 什么是 AOP 想必大家对"餐前洗

  • node.js实现的装饰者模式示例

    本文实例讲述了node.js实现的装饰者模式.分享给大家供大家参考,具体如下: 装饰者模式的实现更强调类的组合而不是通过继承.这样可以增强灵活性.在node.js 中,可以通过call函数实现.call函数可以在一个对象中调用另一个类的成员函数,从这种意义上达成类的组合目的. var util = require('util'); var Beverage = function(){ var description = "Unkown Beverage" this.getDescrip

  • JavaScript设计模式之装饰者模式定义与应用示例

    本文实例讲述了JavaScript设计模式之装饰者模式定义与应用.分享给大家供大家参考,具体如下: 在不改变原对象的基础上,通过对其进行包装扩展(添加属性或方法),使原有对象可以满足用户的更复杂需求,满足开闭原则,也不会破坏现有的操作. 适用场景:当遇到新的功能或需求需要对原来的操作做出更改时,若原来的操作比较复杂,可以把原来的操作原封不动地放在装饰者中,然后再添加新功能. eg1: function Person() { } Person.prototype.sayHello = functi

  • PHP设计模式之装饰器模式定义与用法详解

    本文实例讲述了PHP设计模式之装饰器模式定义与用法.分享给大家供大家参考,具体如下: 什么是装饰器模式 作为一种结构型模式, 装饰器(Decorator)模式就是对一个已有结构增加"装饰". 适配器模式, 是为现在有结构增加的是一个适配器类,.将一个类的接口,转换成客户期望的另外一个接口.适配器让原本接口不兼容的类可以很好的合作. 装饰器模式是将一个对象包装起来以增强新的行为和责任.装饰器也称为包装器(类似于适配器) 有些设计设计模式包含一个抽象类,而且该抽象类还继承了另一个抽象类,这

  • PHP设计模式之装饰器模式定义与用法简单示例

    本文实例讲述了PHP设计模式之装饰器模式定义与用法.分享给大家供大家参考,具体如下: 装饰器模式: 如果已有对象的部分内容或功能性发生改变,但是不需要修改原始对象的结构或不使用继承,动态的扩展一个对象的功能,则应该使用装饰器模式. 简单点说:就是我们不应该去修改已有的类,而是通过创建另外一个装饰器类,通过这个装饰器类去动态的扩展其需要修改的内容,这样做的好处就是---- 1.我们可以保证类的层次不会因过多而发生混乱. 2.当我们需求的修改很小时,不用改变原有的数据结构. 代码引用自<PHP设计模

  • 学习JavaScript设计模式之装饰者模式

    有时我们不希望某个类天生就非常庞大,一次性包含许多职责.那么我们就可以使用装饰着模式. 装饰着模式可以动态地给某个对象添加一些额外的职责,从而不影响这个类中派生的其他对象. 装饰着模式将一个对象嵌入另一个对象之中,实际上相当于这个对象被另一个对象包装起来,形成一条包装链. 一.不改动原函数的情况下,给该函数添加些额外的功能 1. 保存原引用 window.onload = function() { console.log(1); }; var _onload = window.onload ||

  • javascript设计模式之装饰者模式

    在js函数开发中,想要为现有函数添加与现有功能无关的新功能时,按普通思路肯定是在现有函数中添加新功能的代码.这并不能说错,但因为函数中的这两块代码其实并无关联,后期维护成本会明显增大,也会造成函数臃肿. 比较好的办法就是采用装饰器模式.在保持现有函数及其内部代码实现不变的前提下,将新功能函数分离开来,然后将其通过与现有函数包装起来一起执行. 先来看个比较原始的js版装饰器模式实现: var Plane = function(){} Plane.prototype.fire = function(

  • JavaScript设计模式之装饰者模式介绍

    装饰者模式说明 说明:通一个类来动态的对另一个类的功能对象进行前或后的修饰,给它辅加一些额外的功能; 这是对一个类对象功能的装饰,装饰的类跟被装饰的类,要求拥有相同的访问接口方法(功能),这在动态面向对象类里,一般以实现同一个接口(interface)来约束实现:装饰类的要有对被装饰类的引用,用于在装饰类的相应方法,调用相应被装饰类的方法,然后对其进行修饰: 场景举例: 1>. 比如我们生活中的穿衣服, 一件衬衣,一件西装外套,一条裤子,一条领带,一双漂亮的皮鞋; 每多穿一件,都是对前面一件或全

  • JS 设计模式之：工厂模式定义与实现方法浅析

    本文实例讲述了JS 设计模式之:工厂模式定义与实现方法.分享给大家供大家参考,具体如下: 前言 上次我们介绍了单例模式,没看过的小伙伴可以看这个链接: 浅析 JS 设计模式之:单例模式 今天来说一说一种常见的设计模式:工厂模式. 工厂模式是一种创建对象的 创建型模式,遵循 DRY(Don't Repeat Yourself)原则.在该模式下,代码将会根据具体的输入或其他既定规则,自行决定创建哪种类型的对象.简单点儿说就是,动态返回需要的实例对象. 回顾上次的例子 让我们继续使用单例模式中的例子,

  • JavaScript设计模式经典之工厂模式

    一.工厂模式概念 工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类.该模式使一个类的实例化延迟到了子类.而子类可以重写接口方法以便创建的时候指定自己的对象类型(抽象工厂). 这个模式十分有用,尤其是创建对象的流程赋值的时候,比如依赖于很多设置文件等.并且,你会经常在程序里看到工厂方法,用于让子类定义需要创建的对象类型. 二.工厂模式的作用和注意事项 模式作用: 1.对象构建十分复杂--我们穿鞋很简单,但是制作鞋子的过程十分复杂 2.需要依赖具体的环境创建不同的实例--工厂可以

随机推荐