Javascript設(shè)計(jì)模式學(xué)習(xí)之Decorator(裝飾者)模式

Joyven 發(fā)布于2019-08-19 17:50 / 3126人閱讀

摘要：抽象模式使用的裝飾者模式允許我們?cè)谶\(yùn)行時(shí)或者在隨后一個(gè)點(diǎn)上動(dòng)態(tài)地將兩個(gè)或兩個(gè)以上的對(duì)象和它們的屬性一起擴(kuò)展或合并為一個(gè)單一對(duì)象。定義三個(gè)對(duì)象目的是為了裝飾對(duì)象將的額外功能附加到上。

抽象decorator模式 使用jQuery的裝飾者模式

jQuery.extend()允許我們?cè)谶\(yùn)行時(shí)或者在隨后一個(gè)點(diǎn)上動(dòng)態(tài)地將兩個(gè)或兩個(gè)以上的對(duì)象(和它們的屬性)一起擴(kuò)展(或合并）為一個(gè)單一對(duì)象。

定義三個(gè)對(duì)象: defaults、options、settings,目的是為了裝飾defaults對(duì)象,將options的額外功能附加到defaults上。

var decoratorApp = decoratorApp || {};
//定義要使用的對(duì)象
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);

云服務(wù)器 GPU云服務(wù)器裝飾者模式裝飾模式建造者設(shè)計(jì)模式策略者模式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78883.html

相關(guān)文章

每天一個(gè)設(shè)計(jì)模式之裝飾者模式

摘要：作者按每天一個(gè)設(shè)計(jì)模式旨在初步領(lǐng)會(huì)設(shè)計(jì)模式的精髓，目前采用和兩種語(yǔ)言實(shí)現(xiàn)。誠(chéng)然，每種設(shè)計(jì)模式都有多種實(shí)現(xiàn)方式，但此小冊(cè)只記錄最直截了當(dāng)?shù)膶?shí)現(xiàn)方式原文地址是每天一個(gè)設(shè)計(jì)模式之裝飾者模式歡迎關(guān)注個(gè)人技術(shù)博客。作者按：《每天一個(gè)設(shè)計(jì)模式》旨在初步領(lǐng)會(huì)設(shè)計(jì)模式的精髓，目前采用javascript和python兩種語(yǔ)言實(shí)現(xiàn)。誠(chéng)然，每種設(shè)計(jì)模式都有多種實(shí)現(xiàn)方式，但此小冊(cè)只記錄最直截了當(dāng)?shù)膶?shí)現(xiàn)方式...

brianway 2019-08-23 14:56 評(píng)論0 收藏0
每天一個(gè)設(shè)計(jì)模式之裝飾者模式

摘要：作者按每天一個(gè)設(shè)計(jì)模式旨在初步領(lǐng)會(huì)設(shè)計(jì)模式的精髓，目前采用和兩種語(yǔ)言實(shí)現(xiàn)。誠(chéng)然，每種設(shè)計(jì)模式都有多種實(shí)現(xiàn)方式，但此小冊(cè)只記錄最直截了當(dāng)?shù)膶?shí)現(xiàn)方式原文地址是每天一個(gè)設(shè)計(jì)模式之裝飾者模式歡迎關(guān)注個(gè)人技術(shù)博客。作者按：《每天一個(gè)設(shè)計(jì)模式》旨在初步領(lǐng)會(huì)設(shè)計(jì)模式的精髓，目前采用javascript和python兩種語(yǔ)言實(shí)現(xiàn)。誠(chéng)然，每種設(shè)計(jì)模式都有多種實(shí)現(xiàn)方式，但此小冊(cè)只記錄最直截了當(dāng)?shù)膶?shí)現(xiàn)方式...

shleyZ 2019-07-31 09:59 評(píng)論0 收藏0
TS下的裝飾者模式(Decorator)

摘要：裝飾者模式裝飾者模式就是動(dòng)態(tài)的給類或?qū)ο笤黾庸δ艿脑O(shè)計(jì)模式。下的實(shí)現(xiàn)里的裝飾器目前處在建議征集的第二階段，不被瀏覽器所支持，如果想要提前使用這個(gè)新特性就需要，等工具進(jìn)行轉(zhuǎn)譯。這里介紹下的用法。 1.1、裝飾者模式裝飾者模式就是動(dòng)態(tài)的給類或?qū)ο笤黾庸δ艿脑O(shè)計(jì)模式。在程序運(yùn)行時(shí)動(dòng)態(tài)的給一個(gè)具備基礎(chǔ)功能的類或?qū)ο筇砑有碌墓δ?，并且不?huì)改變會(huì)破壞基礎(chǔ)類和對(duì)象的功能。先提煉出產(chǎn)品的最小可用產(chǎn)品...

SolomonXie 2019-08-23 12:18 評(píng)論0 收藏0
5 分鐘即可掌握的 JavaScript 裝飾者模式與 AOP

摘要：下裝飾者的實(shí)現(xiàn)了解了裝飾者模式和的概念之后，我們寫(xiě)一段能夠兼容的代碼來(lái)實(shí)現(xiàn)裝飾者模式原函數(shù)拍照片定義函數(shù)裝飾函數(shù)加濾鏡用裝飾函數(shù)裝飾原函數(shù)這樣我們就實(shí)現(xiàn)了抽離拍照與濾鏡邏輯，如果以后需要自動(dòng)上傳功能，也可以通過(guò)函數(shù)來(lái)添加。 showImg(https://segmentfault.com/img/bVbueyz?w=852&h=356); 什么是裝飾者模式當(dāng)我們拍了一張照片準(zhǔn)備發(fā)朋友...

chunquedong 2019-08-23 18:16 評(píng)論0 收藏0
ES7-Decorator-裝飾者模式

摘要：裝飾者要實(shí)現(xiàn)這些相同的方法繼承自裝飾器對(duì)象創(chuàng)建具體的裝飾器，也是接收作對(duì)參數(shù)接下來(lái)我們要為每一個(gè)功能創(chuàng)建一個(gè)裝飾者對(duì)象，重寫(xiě)父級(jí)方法，添加我們想要的功能。裝飾模式僅僅包裝現(xiàn)有的模塊，使之更加華麗，并不會(huì)影響原有接口的功能 —— 好比你給手機(jī)添加一個(gè)外殼罷了，并不影響手機(jī)原有的通話、充電等功能；使用 ES7 的 decorator ES7 中增加了一個(gè) decorator 屬性...

zhangxiangliang 2019-08-26 13:54 評(píng)論0 收藏0