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

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

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

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

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

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

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

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ù)， 很多時(shí)候我們?cè)谛薷膭e人的代碼時(shí)，會(huì)改動(dòng)window.onload里的東西，但是直接修改別人的代碼太多，容易出錯(cuò)，所以我們可以用下面這個(gè)方式來修改

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

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

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

Function.prototype.before = function (fn) {
        var self = this // 原函數(shù)
        return function () {  // 返回一個(gè)新函數(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ù)使用的都是一個(gè)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"}

我們添加了一個(gè)obj，可以看到，before里，給obj添加了一個(gè)b屬性，因?yàn)閎efore里的fn和f1用的是同一個(gè)參數(shù)

總結(jié)

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

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

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

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

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

登陸后可評(píng)論

0條評(píng)論

kumfo

男|高級(jí)講師

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

TA的文章

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

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

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

閱讀 1324·2019-08-30 15:44
微前端 —— project2項(xiàng)目（VUE）

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

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

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章