Javascript设计模式学习之Decorator(装饰者)模式

Joyven 发布于2019-08-19 17:50 / 3117人阅读

摘要：抽象模式使用的装饰者模式允许我们在运行时或者在随后一个点上动态地将两个或两个以上的对象和它们的属性一起扩展或合并为一个单一对象。定义三个对象目的是为了装饰对象将的额外功能附加到上。

抽象decorator模式 使用jQuery的装饰者模式

jQuery.extend()允许我们在运行时或者在随后一个点上动态地将两个或两个以上的对象(和它们的属性)一起扩展(或合并）为一个单一对象。

定义三个对象: defaults、options、settings,目的是为了装饰defaults对象,将options的额外功能附加到defaults上。

var decoratorApp = decoratorApp || {};
//定义要使用的对象
decoratorApp = {
   defaults: {
      validate: false,
      limit: 5,
      name: "foo",
      welcome: function(){
          console.log("welcome!");
      }
   },

   options:{
       validate: true,
       name: "bar",
       helloWorld: function(){
           console.log("hello,world");
       }
   },

   settings: {},

   printObj: function(obj){
       var arr = [],
           next;
       $.each(obj,function(key,val){
           next = key + ":";
           next += $.isPlainObject(val) ? printObj(val) : val;
           arr.push(next);
       });
       
       return "{" + arr.join(",") + "}";
   }
};

decoratorApp.settings = $.extend({},decoratorApp.defaults,decoratorApp.options);
//打印
decoratorApp.printObj(decoratorApp.settings);

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

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

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

每天一个设计模式之装饰者模式

摘要：作者按每天一个设计模式旨在初步领会设计模式的精髓，目前采用和两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式原文地址是每天一个设计模式之装饰者模式欢迎关注个人技术博客。作者按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript和python两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式...

brianway 2019-08-23 14:56 评论0 收藏0
每天一个设计模式之装饰者模式

摘要：作者按每天一个设计模式旨在初步领会设计模式的精髓，目前采用和两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式原文地址是每天一个设计模式之装饰者模式欢迎关注个人技术博客。作者按：《每天一个设计模式》旨在初步领会设计模式的精髓，目前采用javascript和python两种语言实现。诚然，每种设计模式都有多种实现方式，但此小册只记录最直截了当的实现方式...

shleyZ 2019-07-31 09:59 评论0 收藏0
TS下的装饰者模式(Decorator)

摘要：装饰者模式装饰者模式就是动态的给类或对象增加功能的设计模式。下的实现里的装饰器目前处在建议征集的第二阶段，不被浏览器所支持，如果想要提前使用这个新特性就需要，等工具进行转译。这里介绍下的用法。 1.1、装饰者模式装饰者模式就是动态的给类或对象增加功能的设计模式。在程序运行时动态的给一个具备基础功能的类或对象添加新的功能，并且不会改变会破坏基础类和对象的功能。先提炼出产品的最小可用产品...

SolomonXie 2019-08-23 12:18 评论0 收藏0
5 分钟即可掌握的 JavaScript 装饰者模式与 AOP

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

chunquedong 2019-08-23 18:16 评论0 收藏0
ES7-Decorator-装饰者模式

摘要：装饰者要实现这些相同的方法继承自装饰器对象创建具体的装饰器，也是接收作对参数接下来我们要为每一个功能创建一个装饰者对象，重写父级方法，添加我们想要的功能。装饰模式仅仅包装现有的模块，使之更加华丽，并不会影响原有接口的功能 —— 好比你给手机添加一个外壳罢了，并不影响手机原有的通话、充电等功能；使用 ES7 的 decorator ES7 中增加了一个 decorator 属性...

zhangxiangliang 2019-08-26 13:54 评论0 收藏0