成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[設(shè)計(jì)模式][裝飾模式][Javascript]

QiShare / 1717人閱讀

摘要：定義裝飾模式力圖解決的問(wèn)題是過(guò)度使用了繼承來(lái)擴(kuò)展對(duì)象的功能。裝飾模式是類繼承的另外一種選擇，類繼承在編譯時(shí)候增加行為，而裝飾模式是在運(yùn)行時(shí)增加行為。

  
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
定義

裝飾模式力圖解決的問(wèn)題是：過(guò)度使用了繼承來(lái)擴(kuò)展對(duì)象的功能。繼承引入的是靜態(tài)特質(zhì)，這種擴(kuò)展方式缺乏靈活性，并且隨著子類的增多，各種子類的組合會(huì)導(dǎo)致更多的子類膨脹

裝飾模式力圖動(dòng)態(tài)的給一個(gè)對(duì)象添加一些額外的職責(zé)。

裝飾模式是類繼承的另外一種選擇，類繼承在編譯時(shí)候增加行為，而裝飾模式是在運(yùn)行時(shí)增加行為。當(dāng)有幾個(gè)互相獨(dú)立的功能需要擴(kuò)展時(shí)，這個(gè)區(qū)別就變得很重要。

需求

簡(jiǎn)單的用戶登陸框，需求是這樣的：

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

可選部分：頂部的活動(dòng)推薦條和底部的廣告

需求：根據(jù)服務(wù)端的數(shù)據(jù)和類型返回決定顯示Banner和Advertisement，做到可以動(dòng)態(tài)的添加和配置

類圖

角色

Component (LoginPanel) 接口定義

ConcreteComponent (SimpleLoginPanel) 需要?jiǎng)討B(tài)添加功能的具體對(duì)象

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

實(shí)現(xiàn) 
var prototype = require("prototype");

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

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

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

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

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

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

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

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

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

var Main = function () {

  // 聲明一個(gè)簡(jiǎn)單的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來(lái)做的，使用了Prototype.Node，關(guān)于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

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

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

相關(guān)文章

  • JavaScript設(shè)計(jì)模式----裝飾者模式

    摘要：聲明這個(gè)系列為閱讀設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐曾探著一書的讀書筆記裝飾者模式的定義裝飾者模式能夠在不改變對(duì)象自身的基礎(chǔ)上，在程序運(yùn)行期間給對(duì)像動(dòng)態(tài)的添加職責(zé)。與繼承相比，裝飾者是一種更輕便靈活的做法。裝飾者模式的作用就是為對(duì)象動(dòng)態(tài)的加入某些行為。 聲明：這個(gè)系列為閱讀《JavaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐》 ----曾探@著一書的讀書筆記 裝飾者模式的定義： 裝飾者(decorator)模式能...

    rose 評(píng)論0 收藏0

  • 5 分鐘即可掌握的 JavaScript 裝飾者模式與 AOP

    摘要：下裝飾者的實(shí)現(xiàn)了解了裝飾者模式和的概念之后，我們寫一段能夠兼容的代碼來(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 評(píng)論0 收藏0

  • JavaScript設(shè)計(jì)模式七：裝飾者模式

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

    alexnevsky 評(píng)論0 收藏0

  • javascript設(shè)計(jì)模式 --- 裝飾者模式

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

    kumfo 評(píng)論0 收藏0

  • javascript設(shè)計(jì)模式--裝飾者模式

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

    haoguo 評(píng)論0 收藏0

  • 《JavaScript 模式》知識(shí)點(diǎn)小抄本（上）

    摘要：?jiǎn)误w模式有以下優(yōu)點(diǎn)用來(lái)劃分命名空間，減少全局變量數(shù)量。通常我們使用操作符創(chuàng)建單體模式的三種選擇，讓構(gòu)造函數(shù)總返回最初的對(duì)象使用全局對(duì)象來(lái)存儲(chǔ)該實(shí)例不推薦，容易全局污染。實(shí)現(xiàn)該工廠模式并不困難，主要是要找到能夠穿件所需類型對(duì)象的構(gòu)造函數(shù)。 介紹 最近開(kāi)始給自己每周訂個(gè)學(xué)習(xí)任務(wù)，學(xué)習(xí)結(jié)果反饋為一篇文章的輸出，做好學(xué)習(xí)記錄。 這一周(02.25-03.03)我定的目標(biāo)是《JavaScri...

    didikee 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<