观察者设计模式在前端项目实例

最新推荐文章于 2023-09-25 10:39:30 发布

Small盼盼

最新推荐文章于 2023-09-25 10:39:30 发布

阅读量226

点赞数

分类专栏：总结文章标签：前端

本文链接：https://blog.csdn.net/qq_38086247/article/details/103264160

版权

总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

观察者（Observer）模式的定义：指多个对象间存在一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。这种模式有时又称作发布-订阅模式、模型-视图模式，它是对象行为型模式。

实例场景：在点餐主页面菜单列表与购物车列表都可以对购物车进行增减，点餐页面的计算总金额下拉栏组件、购物车组件、列表组件都用到所选购物车数据，如何在一处操作数据就能各出同时相应？可以使用观察者设计模式思想，封装购物车数据对象，当对象改变时，主动刷新数据

在这里插入图片描述

//购物车列表操作
function shoppingCart(item,type,merge) {
    let shoppingCart = wx.getStorageSync('shoppingCart') || [];
    let index = null ;
    // 不用选择规格，就直接比较id是否相同
    if (item.specCategoryList.length === 0) {
         index = shoppingCart.findIndex((n) =>{
            return item.id === n.id
         });
    }else {
        index = shoppingCart.findIndex((n) =>{
            return item.id === n.id && n.checkoutList && ArrayIsEqual(item.checkoutList,n.checkoutList)
        });
    }
    if(type === 'add') {
        if(index === -1) {
            item.count = 1;
            shoppingCart.push(item)
        }else {
            if(merge) {
                shoppingCart[index].count+= item.count;
            } else {
                shoppingCart[index].count ++;
            }

        }
    }else if(type === 'del') {
        if(index === -1) {
            return;
        }else if(shoppingCart[index].count === 1){
            shoppingCart.splice(index,1)
        }else {
            shoppingCart[index].count --
        }
    }
    wx.setStorageSync('shoppingCart', shoppingCart)
    
}

手动刷新相应处理后的数据

 //处理数据
    handleData (data) {
        let shoppingCart = wx.getStorageSync('shoppingCart') || [];
        data.forEach(item => {
            let count = 0;
            item.records.forEach(record => {
                record.count = 0;
                let list  = shoppingCart.filter((n) =>{
                    return n.id === record.id
                });
                if(!list){
                    record.count = 0

                }else  {
                    for(let i= 0; i<list.length; i++){
                        record.count+= list[i].count
                    }
                }
                count += record.count
            });
            item.checkNumber = count;
        });
        this.setData({
            menuList: data
        });
        this.getTotalPriceAndNum();
    },