项目实践：任意页面展示弹窗广告

最近接到一个请求，产品经理希望添加弹窗广告，可以根据后台配置在应用的任意页面展示。当后台改变当前页面、链接或目标页面的广告数量时，修改当前页面的数据，不影响其他页面数据。比如后台设置“首页”出现过一次广告，“我的”页面广告出现过3次。用户进入后，关闭。“主页”广告1次，关闭“我的”页面广告2次。此时退出应用，后台会将“首页”广告设置为2次，则用户“首页”广告将重置为2次，“我的”页面广告仍为1次（3-2）需求分析后台返回数据必须是一个数组，每个对象都会有三个参数：目标页面（展示的页面）、跳转链接、总出现次数。前端需要对数据进行处理：当本地没有数据时（第一次进入），将总出现次数赋值给一个参数firstTotalTimes（记录原来的总出现次数）。当本地有数据（不是第一个条目）时，将存储在本地的firstTotalTimes清空，返回值赋值给removeLocalTotalTimeList。比较removeLocalTotalTimeList和请求返回的数据advertisementList是否相等，说明后台数据没有变化。查看你本地存储中出现的总次数是否大于0，如果大于0，则显示的广告不相等，说明后台修改了数据，我们这里需要分析一下。只有修改过的页面会被重置，未修改的部分不会被处理。我使用的框架是umi3，里面有wrappers的概念，是配置路由的高层组件包。在umi.conf添加后，任何页面都要先经过这个过程。关键代码如下：useEffect(()=>{dispatch({type:'common/fetchGetPopUpAdvertisementList'}).then((resData:any)=>{if(resData?.resultCode==="S00000"){if(!localStorage.advertisementList){constaddFirstTotalTimes=resData.advertisementList.map((item:any)=>{item.firstTotalTimes=item.totalTimesreturnitem;})localStorage.advertisementList=JSON.stringify(addFirstTotalTimes);}constlocalAdvertisementList=JSON.parse(localStorage.advertisementList)constcloneLocalAdvertisementList=JSON.parse(JSON.stringify(localAdvertisementList))constremoveLocalTotalTimeList=cloneLocalAdvertisementList.map((item:any)=>{deleteitem.firstTotalTimes返回项})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('不相等')constcloneList=JSON.parse(JSON.stringify(resData.advertisementList));for(leti=0;i{if(item.targetUrl.indexOf(history.location.pathname)>-1){if(item.firstTotalTimes>0){setAdItem(item)setIsShow(true)}}})}}})},[])难点JS中的数据可变性第一个陷阱是JS中的数据是可变的，所以需要对数据进行深拷贝，这样其他数据才不会受到影响。这里我使用最简单的深拷贝：JSON.parse(JSON.stringify)constcloneLocalAdvertisementList=JSON.parse(JSON.stringify(localAdvertisementList),)来判断后台数据修改前面的语句已经说明了当本地存储和请求的数据不一致，需要判断哪些页面应该重置，哪些页面应该保持不变。这需要比较两个数组。最简单的方法是进行双循环(On2)。首先constcloneList=JSON.parse(JSON.stringify(resData.advertisementList));，深拷贝后端返回数据，这样cloneList处理的时候不影响原来的数据。cloneLocalAdvertisementList是本地存储if(_.isEqual(cloneList[i].pkId,cloneLocalAdvertisementList[j].pkId)),pkId是广告的唯一标识，首先标识数组中的每个对象，这是一对一的-一一对应，然后判断if(_.isEqual(cloneList[i],cloneLocalAdvertisementList[j]))，比较对象中的值，如果为真则完全相等，说明后台数据没有变化，然后将本地存储中的firstTotalTimes赋值给cloneList上的firstTotalTimes。如果为false，说明后台修改过，所以将firstTotalTimes重置为拉取数据中的totalTimesconstlocalAdvertisementList=JSON.parse(localStorage.advertisementList)constcloneLocalAdvertisementList=JSON.parse(JSON.stringify(localAdvertisementList))。..constcloneList=JSON.parse(JSON.stringify(resData.advertisementList));for(leti=0;i