最近接到一个需求，产品经理希望能新增弹窗广告，广告可根据后台配置在应用任意页面弹出展示。当后台改变当前页面广告次数、链接或者目标页后，当前页面数据修改，不影响其他页面数据
例如后台设置“首页”出现广告 1 次，“我的”页面广告出现 3 次，用户进去后关闭了“首页”广告 1 次，关闭了“我的”页面广告 2 次。此时退出应用，后台将“首页”广告设置为 2 次，那么该用户“首页”广告重置为 2 次，“我的”页面广告仍为 1 次（ 3 - 2）
需求分析
后端返回的数据必然是个数组，每个对象中会有目标页（展示的页面），跳转链接，总出现的次数三参数。前端要对数据进行处理：
- 当本地没有数据时（第一次进入），将总出现次数赋值给一参数 firstTotalTimes（记录原总出现次数）
- 当本地有数据（非第一次进入）
- 相等，说明后台数据没有改变，查看你本地存储中的总出现次数是否大于 0 ，大于则展示广告
- 不相等，说明后台修改了数据，这里还要分析，只重置修改处页的，未修改的地方不做处理
- 将本地存储中的 firstTotalTimes 清除，返回值赋值为 removeLocalTotalTimeList
- 将 removeLocalTotalTimeList 与 请求返回的数据 advertisementList 进行对比
笔者用的框架是 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 来排查
双循环在实际项目中用的次数不多，所以对此做记录
