项目实战:弹出广告任意页面展示

最近接到一个需求,产品经理希望能新增弹窗广告,广告可根据后台配置在应用任意页面弹出展示。当后台改变当前页面广告次数、链接或者目标页后,当前页面数据修改,不影响其他页面数据

例如后台设置“首页”出现广告 1 次,“我的”页面广告出现 3 次,用户进去后关闭了“首页”广告 1 次,关闭了“我的”页面广告 2 次。此时退出应用,后台将“首页”广告设置为 2 次,那么该用户“首页”广告重置为 2 次,“我的”页面广告仍为 1 次( 3 - 2)

需求分析

后端返回的数据必然是个数组,每个对象中会有目标页(展示的页面),跳转链接总出现的次数三参数。前端要对数据进行处理:

  • 当本地没有数据时(第一次进入),将总出现次数赋值给一参数 firstTotalTimes(记录原总出现次数)
  • 当本地有数据(非第一次进入)

    1. 将本地存储中的 firstTotalTimes 清除,返回值赋值为 removeLocalTotalTimeList
    2. 将 removeLocalTotalTimeList 与 请求返回的数据 advertisementList 进行对比

      • 相等,说明后台数据没有改变,查看你本地存储中的总出现次数是否大于 0 ,大于则展示广告
      • 不相等,说明后台修改了数据,这里还要分析,只重置修改处页的,未修改的地方不做处理

笔者用的框架是 umi3,其中有 wrappers 概念,即一个配置路由的高阶组件封装,在 umi.conf 中加上后,任何页面都要先经过这一道。关键代码如下:

useEffect(() => {
    dispatch({ type: 'common/fetchGetPopUpAdvertisementList' }).then((resData: any) => {
        if (resData?.resultCode === "S00000") {
            if (!localStorage.advertisementList) {
            const addFirstTotalTimes = resData.advertisementList.map((item: any) => {
                item.firstTotalTimes = item.totalTimes
                return item;
            })
            localStorage.advertisementList = JSON.stringify(addFirstTotalTimes);
        }

        const localAdvertisementList = JSON.parse(localStorage.advertisementList)

        const cloneLocalAdvertisementList = JSON.parse(JSON.stringify(localAdvertisementList))

        const removeLocalTotalTimeList = cloneLocalAdvertisementList.map((item: any) => {
            delete item.firstTotalTimes
            return item
        })
        if (_.isEqual(removeLocalTotalTimeList, resData.advertisementList)) {
            console.log('相等')
            localAdvertisementList.filter((item: any) => {
                if (item.targetUrl.indexOf(history.location.pathname) > -1) {
                    if (item.firstTotalTimes > 0) {
                        setAdItem(item)
                    }
                }
            })
        } else {
            console.log('不相等')
            const cloneList = JSON.parse(JSON.stringify(resData.advertisementList));
            for (let i = 0; i < cloneList.length; i++) {
                for (let j = 0; j < cloneLocalAdvertisementList.length; j++) {
                    if (_.isEqual(cloneList[i].pkId, cloneLocalAdvertisementList[j].pkId)) {
                        if (_.isEqual(cloneList[i], cloneLocalAdvertisementList[j])) {
                            cloneList[i].firstTotalTimes = localAdvertisementList[j].firstTotalTimes
                        } else {
                            cloneList[i].firstTotalTimes = cloneList[i].totalTimes
                        }
                    }
                }
            }
            localStorage.advertisementList = JSON.stringify(cloneList);
            cloneList.filter((item: any) => {
                if (item.targetUrl.indexOf(history.location.pathname) > -1) {
                    if (item.firstTotalTimes > 0) {
                        setAdItem(item)
                        setIsShow(true)
                    }
                }
            })
        }
    }
                                                                     })
}, [])

难点

JS 的数据可变性

第一个坑点在 JS 的数据是可变的,所以要对其数据进行深拷贝,才不会影响到其他数据,这里我用了最简单的深拷贝:JSON.parse(JSON.stringify)

const cloneLocalAdvertisementList = JSON.parse(
  JSON.stringify(localAdvertisementList),
)

判断后台那个数据修改

在之前表述中已经表明,当本地存储和请求过来的数据不一致时要判断,哪要做重置,哪些页面则维持原状。这就要对两个数组进行对比,最简单的方法就是做双循环(On2).

const cloneList = JSON.parse(JSON.stringify(resData.advertisementList));,深拷贝后台返回数据,这样对 cloneList 进行处理时就不会影响到原数据。cloneLocalAdvertisementList 则是本地的存储

if (_.isEqual(cloneList[i].pkId, cloneLocalAdvertisementList[j].pkId)) ,pkId 是广告唯一标识,先识别数组中的每一个对象,这是一一对应的,再判断 if (_.isEqual(cloneList[i], cloneLocalAdvertisementList[j])) ,对比对象中的值,如果是 true,即完全相等,说明后台数据没有变化,那就将本地存储中的 firstTotalTimes 赋值给 cloneList 上的 firstTotalTimes 。如果是 false,说明后台已经修改,就把 firstTotalTimes 重置为本次拉取数据中的 totalTimes

const localAdvertisementList = JSON.parse(localStorage.advertisementList)
const cloneLocalAdvertisementList = JSON.parse(JSON.stringify(localAdvertisementList))
 ...
const cloneList = JSON.parse(JSON.stringify(resData.advertisementList));
for (let i = 0; i < cloneList.length; i++) {
    for (let j = 0; j < cloneLocalAdvertisementList.length; j++) {
        if (_.isEqual(cloneList[i].pkId, cloneLocalAdvertisementList[j].pkId)) {
            if (_.isEqual(cloneList[i], cloneLocalAdvertisementList[j])) {
                    cloneList[i].firstTotalTimes = localAdvertisementList[j].firstTotalTimes
                } else {
                    cloneList[i].firstTotalTimes = cloneList[i].totalTimes
            }
        }
    }
}

以上,就是对这次项目的核心代码,当然,还要考虑到 App 端打开和 微信打开的差异,以及当未登录状态下的去登录后数据的更新等等,但这些可以通过监听登录来判断(useEffect 依赖数据)实现

总结

这次被数据可变性坑了,通过 debugger 来排查

双循环在实际项目中用的次数不多,所以对此做记录

317 声望
538 粉丝
0 条评论
推荐阅读
2022年终总结
前言既然这里是技术论讨,那这里只谈论技术方面的年终总结。今年总结前端体系:完成了 《深入浅出JavaScript》 共计 26 篇文章博客写了 32 篇,其中 4 篇非技术文章,28篇技术文章做了三个作品,一个是 nextday ...

山头人汉波2阅读 687

手把手教你写一份优质的前端技术简历
不知不觉一年一度的秋招又来了,你收获了哪些大厂的面试邀约,又拿了多少offer呢?你身边是不是有挺多人技术比你差,但是却拿到了很多大厂的offer呢?其实,要想面试拿offer,首先要过得了简历那一关。如果一份简...

tonychen152阅读 17.8k评论 5

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.5k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.1k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan47阅读 3.3k评论 14

封面图
317 声望
538 粉丝
宣传栏