进击的观察者模式

printempw 发布于2019-08-23 13:44 / 2025人阅读

摘要：原文链接进击的观察者模式商品信息改变带来的烦恼译屁话少说放码过来以下所有代码参见商品的信息价格折扣顾客信息是否威会员购买数量总消费购买时间戳总消费计算方式从代码中很容易看得出来我们就是想实现一个简单的计费功能可现实中商品的价格可能并不是一成

原文链接:进击的观察者模式

商品信息改变带来的烦恼

Talk is cheap. Show me the code. (译: 屁话少说, 放码过来)

以下所有代码参见Design pattern transformation.

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

    // 顾客信息: 是否威会员 & 购买数量 & 总消费 & 购买时间戳
    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 }

从代码中很容易看得出来, 我们就是想实现一个简单的计费功能. 可现实中, 商品的价格可能并不是一成不变的.

data.price = 200

价格变动后, 我们需要及时地获取总消费, 那么就必须重新调用下 total计费.

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

这是一个大数据时代, 任何数据都有价值. 现在, 我们还想要每次购买时的时间点.

    const customer = {
        "VIP": true,
        "quantity": 10,
        "total": 0,
+       "timeStamp": 0
    }
    // 获取购买时间
   purchaseTime = (info) => {
        info.timeStamp = Date.now();
   }

于是, 我们需要执行的函数就多了一个.

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

如果我们的需求还有很多, 而且不知一个customer呢. 那么, 每次价格变化我们需要执行很多步骤, 每次啊, 麻烦得很.

+    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)

现在我们就对上面的代码进行观察者模式改造.

用观察者模式改造

从上面的例子中

GPU云服务器云服务器 java的观察者模式设计模式观察者模式观察者模式 php观察者模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99485.html

进击JavaScript之（三）玩转闭包

摘要：为了更好的理解，在阅读此文之前建议先阅读上一篇进击之词法作用域与作用域链什么是闭包闭包的含义就是闭合，包起来，简单的来说，就是一个具有封闭功能与包裹功能的结构。在中函数构成闭包。为了更好的理解，在阅读此文之前建议先阅读上一篇《进击JavaScript之词法作用域与作用域链》 1.什么是闭包闭包的含义就是闭合，包起来，简单的来说，就是一个具有封闭功能与包裹功能的结构。所谓的闭包就是...

cyixlq 2019-08-20 10:30 评论0 收藏0
前端进击的巨人（六）：知否知否，须知this

摘要：有关函数柯里化的详解，请回阅前端进击的巨人五学会函数柯里化。构造函数中的通过操作符可以实现对函数的构造调用。在了解构造函数中的前，有必要先了解下实例化对象的过程。 showImg(https://segmentfault.com/img/bVburMp?w=800&h=600); 常见this的误解指向函数自身（源于this英文意思的误解）指向函数的词法作用域（部分情况） th...

Andrman 2019-08-26 13:30 评论0 收藏0
进击的 JavaScript（六）之 this

摘要：绑定为这个数组五绑定如果使用来创建对象，因为后面跟着的是构造函数，所以称它为构造器调用。为传进来的构造函数你这要看懂这步就行。记得刚开始，我理解 this 的时候也是云里雾里的，哈哈，希望通过这篇文章，对你有帮助吧。关于 this 最多的说法，就是：谁调用它，this就指向谁。这话呢，不能说它错了，只能说它讲的不严谨，为什么呢？我们先来了解下 this 的几种绑定规则。一...

chemzqm 2019-08-23 10:32 评论0 收藏0
进击webpack4 （优化篇）

摘要：进击基础篇一进击基础篇二配置一进击基础篇三配置二不解析不依赖第三方模块的模块有一些第三方模块，它本身不依赖于其他模块，比如，，不去编译这些库，会使得打包更加快速是个正则或者包含正则的数组不去解析忽略进击webpack 4 （基础篇一）进击webpack4 （基础篇二：配置一）进击webpack4 （基础篇三：配置二）不解析不依赖第三方模块的模块 noParse 有一些第三方模块...

isaced 2019-08-23 15:30 评论0 收藏0
进击的 JavaScript（八）之继承

摘要：也就是说，并不知道，等是属于哪个对象的哪个构造函数或者类。构造函数模式与原型模式相结合的模式。给新建的对象，添加属性，建立与构造函数之间的联系。另一种就是构造函数继承了。前面讲完原型链，现在来讲继承，加深理解下。一、对象的相关知识什么是对象？就是一些无序的 key : value 集合，这个value 可以是基本值，函数，对象。(注意 key 和 value 之间是冒号 ...

ddongjian0000 2019-08-22 17:13 评论0 收藏0