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

kumfo 发布于2019-08-22 16:07 / 1943人阅读

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

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

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

1.模拟传统面向对象语言的装饰者模式

装饰者模式将一个对象嵌入到另一个对象之中，实际上相当于这个对象被另一个对像包装起来，形成一条包装链。请求随着这条包装链依次传递到所有的对象，每个对象都有处理这条请求的机会。

var Plan1 = {
    fire: function () {
      console.log("发射普通的子弹")
    }
  }
  var missileDecorator = function () {
    console.log("发射导弹!");
  }
  var fire = Plan1.fire
  Plan1.fire = function () {
    fire()
    missileDecorator()
  };
  Plan1.fire()

装饰函数， 很多时候我们在修改别人的代码时，会改动window.onload里的东西，但是直接修改别人的代码太多，容易出错，所以我们可以用下面这个方式来修改

    // 别人的代码
    window.onload = function () {
        console.log("别人的代码")
    }
 var _onload = window.onload || function() {}
    window.onload = function(){
        _onload()
        console.log("自己的代码")
    }

通过以上方式，我们可以很轻松的在onload的函数里插入自己的方法，而不会影响别人的方法

面向切面的AOP编程，因为函数在js里是一等对象，所以，我们可以给函数原型添加我们需要执行的方法

Function.prototype.before = function (fn) {
        var self = this // 原函数
        return function () {  // 返回一个新函数，该函数先执行fn函数，再执行原函数
            fn.apply(this, arguments)  // fn函数
            return self.apply(this, arguments)  // 原函数
        }
    }
    var f1 = function () {
        console.log(2)
    }
    var f1 = f1.before(function () {
        console.log(1)
    })
    f1()  // 1   2

仔细观察上面的方法，我们可以看到，fn函数和原函数使用的都是一个arguments，所以，我们可以在fn函数里修改arguments，使原函数直接使用修改过的arguments，例如

    var obj = {
        a: "a"
    }

    var f1 = function (params) {
        console.log(params)
    }
    var f1 = f1.before(function (params) {
        params.b = "b"  // 给obj添加b属性
    })
    f1(obj)  // {a: "a", b: "b"}

我们添加了一个obj，可以看到，before里，给obj添加了一个b属性，因为before里的fn和f1用的是同一个参数

总结

装饰者模式的作用就是为了在不影响原对象功能的情况下，动态的加入某些行为，从而使对象方法更灵活多变，易于维护

GPU云服务器云服务器装饰者模式装饰模式建造者设计模式策略者模式

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

转载请注明本文地址：https://www.ucloud.cn/yun/94071.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设计模式--装饰者模式

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

haoguo 2019-08-21 16:50 评论0 收藏0
JavaScript设计模式七：装饰者模式

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

alexnevsky 2019-08-26 11:44 评论0 收藏0
《JavaScript 模式》知识点小抄本（上）

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

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