js設(shè)計模式 --- 裝飾設(shè)計模式

zhoutk 發(fā)布于2019-08-26 11:45 / 2548人閱讀

摘要：裝飾設(shè)計模式每種設(shè)都有其獨特的應(yīng)用場景和解決問題的方式裝飾設(shè)計模式是動態(tài)的為對象添加新的功能是一種用于代替繼承的技術(shù)，無需通過繼承增加子類就能擴展對象的新功能。

裝飾設(shè)計模式

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

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

接口

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

對象類

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;
    }

云服務(wù)器 GPU云服務(wù)器 JS設(shè)計模式代碼設(shè)計模式工廠模式模式設(shè)計設(shè)計模式?

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107500.html

相關(guān)文章

JS或Jquery

摘要：大潮來襲前端開發(fā)能做些什么去年谷歌和火狐針對提出了的標準，顧名思義，即的體驗方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的標準讓我們可以使用語言來開發(fā)。 VR 大潮來襲 --- 前端開發(fā)能做些什么去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標準，顧名思義，WebVR 即 web + VR 的體驗方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的 API 標準讓我們可以使用 ...

CatalpaFlat 2019-08-22 11:17 評論0 收藏0
js設(shè)計模式--模板方法模式

摘要：前言本系列文章主要根據(jù)設(shè)計模式與開發(fā)實踐整理而來，其中會加入了一些自己的思考。模板方法模式由兩部分結(jié)構(gòu)組成，第一部分是抽象父類，第二部分是具體的實現(xiàn)子類。前言本系列文章主要根據(jù)《JavaScript設(shè)計模式與開發(fā)實踐》整理而來，其中會加入了一些自己的思考。希望對大家有所幫助。文章系列 js設(shè)計模式--單例模式 js設(shè)計模式--策略模式 js設(shè)計模式--代理模式 js設(shè)計模式--迭...

yuanxin 2019-08-23 14:32 評論0 收藏0
JS設(shè)計模式入門和框架中的實踐

摘要：下面筆者就結(jié)合諸如的的里面的里面的來給大家簡單介紹下設(shè)計模式在這些庫語法和框架中的使用。筆者認為把設(shè)計模式單獨抽象出來探討，就和算法中抽象出來冒泡排序一樣，是為了描述一種常用的。本文為饑人谷講師slashhuang原創(chuàng)文章。在編寫JS代碼的過程中，運用一定的設(shè)計模式可以讓我們的代碼更加優(yōu)雅、靈活。下面筆者就結(jié)合諸如redux的subscribe、ES6的class、vue里面的$...

lmxdawn 2019-08-26 17:15 評論0 收藏0
JS設(shè)計模式入門和框架中的實踐

摘要：下面筆者就結(jié)合諸如的的里面的里面的來給大家簡單介紹下設(shè)計模式在這些庫語法和框架中的使用。筆者認為把設(shè)計模式單獨抽象出來探討，就和算法中抽象出來冒泡排序一樣，是為了描述一種常用的。本文為饑人谷講師slashhuang原創(chuàng)文章在編寫JS代碼的過程中，運用一定的設(shè)計模式可以讓我們的代碼更加優(yōu)雅、靈活。下面筆者就結(jié)合諸如redux的subscribe、ES6的class、vue里面的$d...

ccj659 2019-08-22 13:47 評論0 收藏0
js設(shè)計模式--組合模式

摘要：文章系列設(shè)計模式單例模式設(shè)計模式策略模式設(shè)計模式代理模式設(shè)計模式迭代器模式設(shè)計模式發(fā)布訂閱模式設(shè)計模式命令模式概念組合模式就是用小的子對象來構(gòu)建更大的對象，而這些小的子對象本身也許是由更小的孫對象構(gòu)成的。前言本系列文章主要根據(jù)《JavaScript設(shè)計模式與開發(fā)實踐》整理而來，其中會加入了一些自己的思考。希望對大家有所幫助。文章系列 js設(shè)計模式--單例模式 js設(shè)計模式--策略...

blankyao 2019-08-23 14:31 評論0 收藏0
[譯]理解設(shè)計模式

摘要：例如可以用構(gòu)造函數(shù)實現(xiàn)單例模式。例如當這個構(gòu)造函數(shù)被調(diào)用，它會檢查是否存在。工廠模式工廠模式使用工廠方法創(chuàng)建對象，而不指定所創(chuàng)建對象的確切類或構(gòu)造函數(shù)。雖然了解審設(shè)計模式很重要，但是不要過度使用它們。 By Sukhjinder Arora | Oct 16, 2018 原文當你開始了一個新項目，你不會馬上開始編寫代碼。第一步，你必須定義這個項目解決什么問題和適用范圍，然后列出這個項...

NeverSayNever 2019-08-23 12:36 評論0 收藏0