快捷導(dǎo)航

js裝飾設(shè)計(jì)模式學(xué)習(xí)心得

更新時(shí)間：2018年02月17日 08:53:20 投稿：laozhang

本片文章給大家分享一下作者學(xué)習(xí)Javascript裝飾設(shè)計(jì)模式后的心得以及要點(diǎn)分享，有興趣的朋友參考下。

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

每種設(shè)都有其獨(dú)特的應(yīng)用場(chǎng)景和解決問題的方式, 裝飾設(shè)計(jì)模式是動(dòng)態(tài)的為對(duì)象添加新的功能, 是一種用于代替繼承的技術(shù)，無需通過繼承增加子類就能擴(kuò)展對(duì)象的新功能。使用對(duì)象的關(guān)聯(lián)關(guān)系代替繼承關(guān)系，更加靈活，同時(shí)避免類型體系的快速膨脹, 這種模式適合新添加的功能不足以用繼承為代價(jià)解決問題的情況時(shí)使用 - 殺雞焉用宰牛刀 ^_^
裝飾設(shè)計(jì)模式: 動(dòng)態(tài)地為一個(gè)對(duì)象添加一些額外的職責(zé)，若要擴(kuò)展一個(gè)對(duì)象的功能，裝飾者提供了比繼承更有彈性的替代方案。

結(jié)構(gòu)圖：

接口

var Bicycle = new Interface('Bicycle', ['assemble', 'wash', 'repair', 'getPrice']);

對(duì)象類

var AcmeComfortCuiser = function(){
  
};
AcmeComfortCuiser.prototype = {
  assemble: function(){
    
  },
  wash: function(){
    
  },
  repair: function(){
    
  },
  getPrice: function(){
    
  }
}

裝飾類

var BicycleDecorator = function(bicycle){
  Interface.ensureImplements(bicycle, Bicycle);
  this.bicycle = bicycle;
};
BicycleDecorator.prototype = {
  assemble: function(){
    return this.bicycle.assemble();
  },
  wash: function(){
    return this.bicycle.wash();
  },
  repair: function(){
    return this.bicycle.repair();
  },
  getPrice: function(){
    return this.bicycle.getPrice();
  }
}

拓展類

  var HeadlightDecorator = function(bicycle){
    BicycleDecorator.call(this, bicycle);
  };
  extend(HeadlightDecorator, BicycleDecorator);
  HeadlightDecorator.prototype.getPrice = function(){
    return this.bicycle.getPrice() + 15.00;
  }

您可能感興趣的文章:

相關(guān)文章

0基礎(chǔ)學(xué)習(xí)前端開發(fā)的一些建議
這篇文章主要介紹了0基礎(chǔ)學(xué)習(xí)前端開發(fā)的一些建議，文中一些建議非常寶貴，希望能幫助想學(xué)前端的你，感興趣的朋友可以了解下
2020-07-07
JavaScript中的Math.E屬性使用詳解
這篇文章主要介紹了JavaScript中的Math.E屬性使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
2015-06-06
Javascript學(xué)習(xí)筆記之函數(shù)篇（三） : 閉包和引用
本系列好久沒更新了，今天重新拿過來，繼續(xù)前面未完成的事項(xiàng)，本文我們就來談?wù)凧avascript 中一個(gè)最重要的特性--閉包的使用引用。
2014-11-11
實(shí)例：用 JavaScript 來操作字符串(一些字符串函數(shù))
實(shí)例：用 JavaScript 來操作字符串(一些字符串函數(shù))...
2007-02-02
JavaScript中用于生成隨機(jī)數(shù)的Math.random()方法
這篇文章主要介紹了JavaScript中用于生成隨機(jī)數(shù)的Math.random()方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
2015-06-06
javascript學(xué)習(xí)筆記（六）數(shù)據(jù)類型和JSON格式
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式，我們稱之為JavaScript對(duì)象表示法。使用JSON進(jìn)行數(shù)據(jù)傳輸?shù)膬?yōu)勢(shì)之一是JSON實(shí)際上就是JavaScript。它基于ECMAScript第3版中JavaScript對(duì)象字面量語法子集的一種文本格式。
2014-10-10
在JavaScript中操作時(shí)間之setYear()方法的使用
這篇文章主要介紹了在JavaScript中操作時(shí)間之setYear()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
2015-06-06
bgsound 背景音樂的一些常用方法及特殊用法小結(jié)
以下的文章是好幾年前收集的，已經(jīng)不記得是從哪里復(fù)制的了；但在這里還是對(duì)原創(chuàng)者表示感謝！
2010-05-05
JavaScript bold方法入門實(shí)例（把指定文字顯示為粗體）
這篇文章主要介紹了JavaScript字符串對(duì)象的bold方法入門實(shí)例,bold方法用于把指定文字顯示為粗體,需要的朋友可以參考下
2014-10-10
php中and 和 &&出坑指南
在邏輯運(yùn)算符中，提到與和或，我們可能立刻想到的是&&、||，在php中還有and、or.然而and和or中有一個(gè)小小的坑,今天我們就來探討下php中and 和 &&
2018-07-07