javascript設計模式 --- 裝飾者模式

kumfo 發布于2019-08-22 16:07 / 1964人閱讀

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

javascript設計模式 --- 裝飾者模式

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

1.模擬傳統面向對象語言的裝飾者模式

裝飾者模式將一個對象嵌入到另一個對象之中，實際上相當于這個對象被另一個對像包裝起來，形成一條包裝鏈。請求隨著這條包裝鏈依次傳遞到所有的對象，每個對象都有處理這條請求的機會。

var Plan1 = {
    fire: function () {
      console.log("發射普通的子彈")
    }
  }
  var missileDecorator = function () {
    console.log("發射導彈!");
  }
  var fire = Plan1.fire
  Plan1.fire = function () {
    fire()
    missileDecorator()
  };
  Plan1.fire()

裝飾函數， 很多時候我們在修改別人的代碼時，會改動window.onload里的東西，但是直接修改別人的代碼太多，容易出錯，所以我們可以用下面這個方式來修改

    // 別人的代碼
    window.onload = function () {
        console.log("別人的代碼")
    }
 var _onload = window.onload || function() {}
    window.onload = function(){
        _onload()
        console.log("自己的代碼")
    }

通過以上方式，我們可以很輕松的在onload的函數里插入自己的方法，而不會影響別人的方法

面向切面的AOP編程，因為函數在js里是一等對象，所以，我們可以給函數原型添加我們需要執行的方法

Function.prototype.before = function (fn) {
        var self = this // 原函數
        return function () {  // 返回一個新函數，該函數先執行fn函數，再執行原函數
            fn.apply(this, arguments)  // fn函數
            return self.apply(this, arguments)  // 原函數
        }
    }
    var f1 = function () {
        console.log(2)
    }
    var f1 = f1.before(function () {
        console.log(1)
    })
    f1()  // 1   2

仔細觀察上面的方法，我們可以看到，fn函數和原函數使用的都是一個arguments，所以，我們可以在fn函數里修改arguments，使原函數直接使用修改過的arguments，例如

    var obj = {
        a: "a"
    }

    var f1 = function (params) {
        console.log(params)
    }
    var f1 = f1.before(function (params) {
        params.b = "b"  // 給obj添加b屬性
    })
    f1(obj)  // {a: "a", b: "b"}

我們添加了一個obj，可以看到，before里，給obj添加了一個b屬性，因為before里的fn和f1用的是同一個參數

總結

裝飾者模式的作用就是為了在不影響原對象功能的情況下，動態的加入某些行為，從而使對象方法更靈活多變，易于維護

云服務器 GPU云服務器裝飾者模式裝飾模式建造者設計模式策略者模式

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

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

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

haoguo 2019-08-21 16:50 評論0 收藏0
JavaScript設計模式七：裝飾者模式

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

alexnevsky 2019-08-26 11:44 評論0 收藏0
《JavaScript 模式》知識點小抄本（上）

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

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