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

rose 发布于2019-08-21 14:04 / 1654人阅读

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

声明：这个系列为阅读《JavaScript设计模式与开发实践》 ----曾探@著一书的读书笔记

装饰者模式的定义：

装饰者(decorator)模式能够在不改变对象自身的基础上，在程序运行期间给对像动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。

装饰者模式的特点：

可以动态的给某个对象添加额外的职责，而不会影响从这个类中派生的其它对象；

继承的一些缺点：

继承会导致超类和子类之间存在强耦合性，当超类改变时，子类也会随之改变；

超类的内部细节对于子类是可见的，继承常常被认为破坏了封装性；

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

//模拟传统语言的装饰者

//原始的飞机类
var Plan = function () {
};

Plan.prototype.fire = function () {
    console.log("发射普通子弹");
};


//装饰类
var MissileDecorator = function (plan) {
    this.plan = plan;
}

MissileDecorator.prototype.fire = function () {
    this.plan.fire();
    console.log("发射导弹!");
};

var plan = new Plan();
plan = new MissileDecorator(plan);
plan.fire();

2.JavaScript中的装饰者模式

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

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

var missileDecorator= function () {
    console.log("发射导弹!");
};

var fire = Plan1.fire;

Plan1.fire=function () {
    fire();
    missileDecorator();
};

Plan1.fire();

装饰函数

在JavaScript中可以很方便的给某个对象扩展属性和方法，但却很难在不改动某个函数源代码的情况下，给该函数添加一些额外的功能。也就是在代码运行期间，我们很难切入某个函数的执行环境。

1.使用装饰者模式例子

//对window.onload的处理

window.onload=function () {
    console.log("test");
};

var  _onload= window.onload || function () {};

window.onload=function () {
    _onload();
    console.log("自己的处理函数");
};

2.使用AOP（面向切面编程）装饰函数

主要是以为在JavaScript中会存在随着函数的调用，this的指向发生变化，导致执行结果发生变化。

2.1.封装的before函数

在需要执行的函数之前执行某个新添加的功能函数

//是新添加的函数在旧函数之前执行
Function.prototype.before=function (beforefn) {
    var _this= this;                               //保存旧函数的引用
    return function () {                           //返回包含旧函数和新函数的“代理”函数
        beforefn.apply(this,arguments);            //执行新函数,且保证this不被劫持,新函数接受的参数
                                                    // 也会被原封不动的传入旧函数,新函数在旧函数之前执行
        return _this.apply(this,arguments);
    };
};

2.2.封装的after函数

在需要执行的函数之后执行某个新添加的功能函数

//新添加的函数在旧函数之后执行
Function.prototype.after=function (afterfn) {
    var _this=this;
    return function () {
        var ret=_this.apply(this,arguments);
        afterfn.apply(this,arguments);
        return ret;
    };
};

2.3.不污染Function原型的做法

var before=function (fn, before) {
    return function () {
        before.apply(this,arguments);
        return fn.apply(this,arguments);
    };
};

function func1(){console.log("1")}
function func2() {console.log("2")}

var a=before(func1,func2);

// a=before(a,func1);
a();

装饰者模式用法示例： 1.ajax动态添加参数

使用装饰者模式动态的改变ajax函数，传输的参数

//是新添加的函数在旧函数之前执行
Function.prototype.before=function (beforefn) {
    var _this= this;                               //保存旧函数的引用
    return function () {                           //返回包含旧函数和新函数的“代理”函数
        beforefn.apply(this,arguments);            //执行新函数,且保证this不被劫持,新函数接受的参数
        // 也会被原封不动的传入旧函数,新函数在旧函数之前执行
        return _this.apply(this,arguments);
    };
};


var func = function (param) {
    console.log(param);
};

func = func.before(function (param) {
    param.b = "b";
});

func({b:"222"});


//给ajax请求动态添加参数的例子
var ajax=function (type,url,param) {
    console.log(param);
};

var getToken=function () {
    return "Token";
};


ajax=ajax.before(function (type, url, param) {
    param.token=getToken();
});

ajax("get","http://www.jn.com",{name:"zhiqiang"});

2.表单验证并且提交

装饰者模式分离表单验证和提交的函数

Function.prototype.before=function (beforefn) {
    var _this= this;                               //保存旧函数的引用
    return function () {                           //返回包含旧函数和新函数的“代理”函数
        beforefn.apply(this,arguments);            //执行新函数,且保证this不被劫持,新函数接受的参数
        // 也会被原封不动的传入旧函数,新函数在旧函数之前执行
        return _this.apply(this,arguments);
    };
};

var validata=function () {
    if(username.value===""){
        alert("用户名不能为空!")
        return false;
    }
    if(password.value===""){
        alert("密码不能为空!")
        return false;
    }
}

var formSubmit=function () {
    var param={
        username=username.value;
        password=password.value;
    }

    ajax("post","http://www.mn.com",param);
}

formSubmit= formSubmit.before(validata);


submitBtn.onclick=function () {
    formSubmit();
}

总结：

装饰者模式和代理模式的区别：

代理模式的目的是，当直接访问本体不方便或者不符合需要时，为这个本体提供一个代替者。本体定义了关键功能，而代理提供了或者拒绝对他的访问，或者是在访问本体之前做一些额外的事情。

装饰者模式的作用就是为对象动态的加入某些行为。

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

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

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

5 分钟即可掌握的 JavaScript 装饰者模式与 AOP

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

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

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

kumfo 2019-08-22 16:07 评论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