AngularJS 进阶 (二十八) 解决 AngualrJS 页面刷新导致异常显示问题
一、绪
俗话说，细节决定成败，编程亦是如此。编程过程中我们可能会不自觉的忽视一些细节问题，殊不知，这些细节正是导致页面显示出现问题的地方。今略举一例，与君共勉之。
页面正常加载后，显示如下：
按 F5 刷新之后，页面如下所示:
很明显，页面显示出现了异常。回过头再看看 Chrome 的错误提示，
具体代码如下:
正是以上代码导致了错误的发生。
二、 追根溯源
让我们回顾一下，错误到底是如何发生的。正常加载情况下，页面正常显示很容易理解，程序是按照既定的数据流走的。但是按 F5 刷新之后，$stateParams.uid 已经不存在了，此时再次调用就会出现 undefined 的错误，导致页面加载出现异常。
三、如何解决这类问题呢？
首先应在语句执行之前添加变量判断语句，若变量存在且不为空，则可继续执行其它流程。代码如下:
执行后效果:
四、拓展阅读 AngularJS 项目开发技巧之 localStorage 存储
项目开发完毕，测试阶段发现后台管理端二维码生成有问题，问题在于 localStorage 的存储。
经过测试发现二维码实际存储的是上一次的结果。好熟悉~Bingo,自己做导航栏高亮时就遇到过这个问题，当时就是使用的 localStorage。问题还是出在 localStorage 身上。但是存储时：localStorage.setItem(key,value)，如果 key 存在，则更新 value。问题的根源正是设置好值之后，value 没有更新。这个说法也不对，刷新之后，value 的值确实变了。只不过变的时机不对。
回过头来看看之前二维码的生成，猛然发现原来之前使用 localStorage 生成的二维码也是不对的。必须得加以改进。通过 Chrome 调试，自己还是看出了一些问题，很明显，二维码生成早于获取订单详情信息。如下图所示:
二维码生成端测试语句:
控制器:
既然这样可以正确获取到数据，问题基本上就得到了解决。
以上语句便可生成正确的二维码信息。
现实总是那么的残酷。生成的二维码不对，内容为空！
回过头来还得继续使用 localStorage,但其保存的总是上一次的值，因为二维码页面加载早于父页面，导致 localStorage 的值总是滞后。
经过证实 localStorage.removeItem('billInfo');确实起作用了。好纠结啊！
纠结纠结....
既然子页面加载较早，自己就想是不是可以通过延迟页面加载的方法解决。以下代码实现了子页面方法的延迟执行，结果亮了！
其实以上问题的解决只是绕过了 localStorage,而没有实质性的解决 localStorage 存储问题。本质原因后期进行解决。有关子页面与父页面脚本执行先后顺序，应该是子页面较早执行，若子页面需要利用父页面中的值，则子页面脚本代码需要延迟执行。
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/d46ac574625eaa25f2036cbd1】。文章转载请联系作者。
No Silver Bullet 2021-07-09 加入
岂曰无衣 与子同袍
评论