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

kumfo 發(fā)布于2019-08-22 16:07 / 1973人閱讀

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

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

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

1.模擬傳統(tǒng)面向?qū)ο笳Z言的裝飾者模式

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

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

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

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

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

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

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

仔細(xì)觀察上面的方法，我們可以看到，fn函數(shù)和原函數(shù)使用的都是一個arguments，所以，我們可以在fn函數(shù)里修改arguments，使原函數(shù)直接使用修改過的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用的是同一個參數(shù)

總結(jié)

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

云服務(wù)器 GPU云服務(wù)器裝飾者模式裝飾模式建造者設(shè)計模式策略者模式

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

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

發(fā)表評論

登陸后可評論

0條評論

kumfo

男|高級講師

我要關(guān)注我要私信

TA的文章

搬瓦工，CN2 GIA-E 限量版套餐補貨，$84/年，可隨意切換為美國cn2 gia、日本軟銀、荷

閱讀 3721·2021-10-18 13:34
raksmart：I3-2120物理機$30/月甩賣，爆款VPS僅月付$1.99，此外洛杉磯/韓國/

閱讀 2415·2021-08-11 11:15
關(guān)于vertical-align

閱讀 1209·2019-08-30 15:44
微前端 —— project2項目（VUE）

閱讀 702·2019-08-26 10:32
React 328道最全面試題(持續(xù)更新)

閱讀 998·2019-08-26 10:13
事件訂閱廣播組件

閱讀 2072·2019-08-23 18:36
【Vue原理】Event - 白話版

閱讀 1784·2019-08-23 18:35
Git Bash常見命令

閱讀 532·2019-08-23 17:10

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章