[設計模式][裝飾模式][Javascript]

QiShare 發布于2019-08-21 10:18 / 1709人閱讀

摘要：定義裝飾模式力圖解決的問題是過度使用了繼承來擴展對象的功能。裝飾模式是類繼承的另外一種選擇，類繼承在編譯時候增加行為，而裝飾模式是在運行時增加行為。

The Decorator Pattern is a design pattern that allows behavior to be added to an individual object, either statically or dynamically, without affecting the behavior of other objects from the same class.
From http://en.wikipedia.org/wiki/Decorator_pattern

定義

裝飾模式力圖解決的問題是：過度使用了繼承來擴展對象的功能。繼承引入的是靜態特質，這種擴展方式缺乏靈活性，并且隨著子類的增多，各種子類的組合會導致更多的子類膨脹

裝飾模式力圖動態的給一個對象添加一些額外的職責。

裝飾模式是類繼承的另外一種選擇，類繼承在編譯時候增加行為，而裝飾模式是在運行時增加行為。當有幾個互相獨立的功能需要擴展時，這個區別就變得很重要。

需求

簡單的用戶登陸框，需求是這樣的：

固定部分：用戶輸入部分，用戶名輸入和密碼輸入

可選部分：頂部的活動推薦條和底部的廣告

需求：根據服務端的數據和類型返回決定顯示Banner和Advertisement，做到可以動態的添加和配置

類圖

角色

Component (LoginPanel) 接口定義

ConcreteComponent (SimpleLoginPanel) 需要動態添加功能的具體對象

Decorator (LoginPanelDecorator) 擁有Component對象，定義一組與Component一致的接口

實現

var prototype = require("prototype");

var LoginPanel = {
  render: function(){
    throw new Error("method must be override!");
  }
};

var SimpleLoginPanel = prototype.Class.create(LoginPanel, {
  render: function(){
    // @todo 渲染基礎的LoginPanel，加入用戶輸入框
    console.log("渲染用戶輸入框");
  }
});

var LoginPanelDecorator = prototype.Class.create(LoginPanel, {

  initialize: function (panel) {
    this.panel = panel;
  },

  render: function () {
    // @todo 做基礎內容的渲染
    this.panel.render();
  }
});

var BannerDecorator = prototype.Class.create(LoginPanelDecorator, {
  render: function ($super) {
    $super();
    this.setBanner();
  },

  setBanner: function () {
    // @todo 渲染添加的活動Banner
    console.log("渲染添加的活動Banner");
  }
});

var AdvertisementDecorator = prototype.Class.create(LoginPanelDecorator, {
  render: function ($super) {
    $super();
    this.setAd();
  },

  setAd: function () {
    // @todo 渲染廣告
    console.log("渲染廣告");
  }
});

var Main = function () {

  // 聲明一個簡單的LoginPanel
  var simpleLoginPanel = new SimpleLoginPanel();

  // 加入廣告
  var adDecorator = new AdvertisementDecorator(simpleLoginPanel);
  adDecorator.render();

  console.log("--------------------------------")

  // 加入Banner
  var bannerDecorator = new BannerDecorator(adDecorator);
  bannerDecorator.render();

}

Main();

注：繼承采用了PrototypeJS提供的Class來做的，使用了Prototype.Node，關于prototype如何使用參考Prototype Doc

參考

http://en.wikipedia.org/wiki/Decorator_pattern

http://www.cnblogs.com/kid-li/archive/2006/06/26/435966.html

http://www.oodesign.com/decorator-pattern.html

http://tianli.blog.51cto.com/190322/35287

GPU云服務器云服務器裝飾模式裝飾模式介紹裝飾器模式裝飾著模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85276.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設計模式七：裝飾者模式

摘要：裝飾者模式裝飾者模式提供比繼承更有彈性的替代方案。裝飾者用于包裝同接口的對象，用于通過重載方法的形式添加新功能，該模式可以在被裝飾者的前面或后面加上自己的行為以達到特定的目的。簡單的理解給對象動態添加職責的方式稱為裝飾著模式。裝飾者模式裝飾者模式提供比繼承更有彈性的替代方案。裝飾者用于包裝同接口的對象，用于通過重載方法的形式添加新功能，該模式可以在被裝飾者的前面或后面加上自己的行為...

alexnevsky 2019-08-26 11:44 評論0 收藏0
javascript設計模式 --- 裝飾者模式

摘要：設計模式裝飾者模式何為裝飾者，意思就是，在不影響對象主功能的情況下，再添加一些額外的功能，使對象具備更多的功能。與繼承相比，裝飾者是一種更靈活輕便的做法。 javascript設計模式 --- 裝飾者模式何為裝飾者，意思就是，在不影響對象主功能的情況下，再添加一些額外的功能，使對象具備更多的功能。與繼承相比，裝飾者是一種更靈活輕便的做法。下面我們看看javascript里裝飾者模式 ...

kumfo 2019-08-22 16:07 評論0 收藏0
javascript設計模式--裝飾者模式

摘要：裝飾者模式定義裝飾者模式能夠在不改變對象自身的基礎上，在程序運行期間給對像動態的添加職責。與繼承相比，裝飾者是一種更輕便靈活的做法。裝飾者模式定義 : 裝飾者(decorator)模式能夠在不改變對象自身的基礎上，在程序運行期間給對像動態的添加職責。與繼承相比，裝飾者是一種更輕便靈活的做法。在不改變對象自身的基礎上，在程序運行期間給對象動態地添加一些額外職責特點：可以動態的...

haoguo 2019-08-21 16:50 評論0 收藏0
《JavaScript 模式》知識點小抄本（上）

摘要：單體模式有以下優點用來劃分命名空間，減少全局變量數量。通常我們使用操作符創建單體模式的三種選擇，讓構造函數總返回最初的對象使用全局對象來存儲該實例不推薦，容易全局污染。實現該工廠模式并不困難，主要是要找到能夠穿件所需類型對象的構造函數。介紹最近開始給自己每周訂個學習任務，學習結果反饋為一篇文章的輸出，做好學習記錄。這一周(02.25-03.03)我定的目標是《JavaScri...

didikee 2019-08-23 15:37 評論0 收藏0