進擊的觀察者模式

printempw 發(fā)布于2019-08-23 13:44 / 2110人閱讀

摘要：原文鏈接進擊的觀察者模式商品信息改變帶來的煩惱譯屁話少說放碼過來以下所有代碼參見商品的信息價格折扣顧客信息是否威會員購買數(shù)量總消費購買時間戳總消費計算方式從代碼中很容易看得出來我們就是想實現(xiàn)一個簡單的計費功能可現(xiàn)實中商品的價格可能并不是一成

原文鏈接:進擊的觀察者模式

商品信息改變帶來的煩惱

Talk is cheap. Show me the code. (譯: 屁話少說, 放碼過來)

以下所有代碼參見Design pattern transformation.

    // 商品的信息: 價格 & 折扣
    const data = {
        price: 100,
        discount: 0.8
    }

    // 顧客信息: 是否威會員 & 購買數(shù)量 & 總消費 & 購買時間戳
    const customer = {
        "VIP": true,
        "quantity": 10,
        "total": 0,
    }

    // 總消費計算方式
    total = (info) => {
        if(!info.VIP) {
            info.total = data.price * info.quantity;
        } else {
            info.total = data.price * data.discount * info.quantity;
        }
    }

    total(customer);
    console.log("customer", customer);
    // customer { VIP: true, quantity: 10, total: 800 }

從代碼中很容易看得出來, 我們就是想實現(xiàn)一個簡單的計費功能. 可現(xiàn)實中, 商品的價格可能并不是一成不變的.

data.price = 200

價格變動后, 我們需要及時地獲取總消費, 那么就必須重新調(diào)用下 total計費.

    total(customer);
    console.log("customer", customer);
    // customer { VIP: true, quantity: 10, total: 1600 }

這是一個大數(shù)據(jù)時代, 任何數(shù)據(jù)都有價值. 現(xiàn)在, 我們還想要每次購買時的時間點.

    const customer = {
        "VIP": true,
        "quantity": 10,
        "total": 0,
+       "timeStamp": 0
    }
    // 獲取購買時間
   purchaseTime = (info) => {
        info.timeStamp = Date.now();
   }

于是, 我們需要執(zhí)行的函數(shù)就多了一個.

    total(customer)
    purchaseTime(customer)
    console.log("customer", customer)
    // { VIP: true, quantity: 10, total: 1600, timeStamp: 1542293676297 }

如果我們的需求還有很多, 而且不知一個customer呢. 那么, 每次價格變化我們需要執(zhí)行很多步驟, 每次啊, 麻煩得很.

+    const customer1 = {
+    "VIP": false,
+    "quantity": 8,
+    "total": 0,
+    "timeStamp": 0
+    }

    total(customer)
    purchaseTime(customer)
    func(customer)
    ...
    funcN(customer1)
    total(customer1)
    purchaseTime(customer1)
    func(customer1)
    ...
    funcN(customer)
    ...
    funcN(customerN)

現(xiàn)在我們就對上面的代碼進行觀察者模式改造.

用觀察者模式改造

從上面的例子中

云服務器 GPU云服務器 java的觀察者模式設計模式觀察者模式觀察者模式 php觀察者模式

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

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

進擊JavaScript之（三）玩轉(zhuǎn)閉包

摘要：為了更好的理解，在閱讀此文之前建議先閱讀上一篇進擊之詞法作用域與作用域鏈什么是閉包閉包的含義就是閉合，包起來，簡單的來說，就是一個具有封閉功能與包裹功能的結構。在中函數(shù)構成閉包。為了更好的理解，在閱讀此文之前建議先閱讀上一篇《進擊JavaScript之詞法作用域與作用域鏈》 1.什么是閉包閉包的含義就是閉合，包起來，簡單的來說，就是一個具有封閉功能與包裹功能的結構。所謂的閉包就是...

cyixlq 2019-08-20 10:30 評論0 收藏0
前端進擊的巨人（六）：知否知否，須知this

摘要：有關函數(shù)柯里化的詳解，請回閱前端進擊的巨人五學會函數(shù)柯里化。構造函數(shù)中的通過操作符可以實現(xiàn)對函數(shù)的構造調(diào)用。在了解構造函數(shù)中的前，有必要先了解下實例化對象的過程。 showImg(https://segmentfault.com/img/bVburMp?w=800&h=600); 常見this的誤解指向函數(shù)自身（源于this英文意思的誤解）指向函數(shù)的詞法作用域（部分情況） th...

Andrman 2019-08-26 13:30 評論0 收藏0
進擊的 JavaScript（六）之 this

摘要：綁定為這個數(shù)組五綁定如果使用來創(chuàng)建對象，因為后面跟著的是構造函數(shù)，所以稱它為構造器調(diào)用。為傳進來的構造函數(shù)你這要看懂這步就行。記得剛開始，我理解 this 的時候也是云里霧里的，哈哈，希望通過這篇文章，對你有幫助吧。關于 this 最多的說法，就是：誰調(diào)用它，this就指向誰。這話呢，不能說它錯了，只能說它講的不嚴謹，為什么呢？我們先來了解下 this 的幾種綁定規(guī)則。一...

chemzqm 2019-08-23 10:32 評論0 收藏0
進擊webpack4 （優(yōu)化篇）

摘要：進擊基礎篇一進擊基礎篇二配置一進擊基礎篇三配置二不解析不依賴第三方模塊的模塊有一些第三方模塊，它本身不依賴于其他模塊，比如，，不去編譯這些庫，會使得打包更加快速是個正則或者包含正則的數(shù)組不去解析忽略進擊webpack 4 （基礎篇一）進擊webpack4 （基礎篇二：配置一）進擊webpack4 （基礎篇三：配置二）不解析不依賴第三方模塊的模塊 noParse 有一些第三方模塊...

isaced 2019-08-23 15:30 評論0 收藏0
進擊的 JavaScript（八）之繼承

摘要：也就是說，并不知道，等是屬于哪個對象的哪個構造函數(shù)或者類。構造函數(shù)模式與原型模式相結合的模式。給新建的對象，添加屬性，建立與構造函數(shù)之間的聯(lián)系。另一種就是構造函數(shù)繼承了。前面講完原型鏈，現(xiàn)在來講繼承，加深理解下。一、對象的相關知識什么是對象？就是一些無序的 key : value 集合，這個value 可以是基本值，函數(shù)，對象。(注意 key 和 value 之間是冒號 ...

ddongjian0000 2019-08-22 17:13 評論0 收藏0