缺陷分析.png
問(wèn)題描述
在上線新版本sdk的時(shí)候，發(fā)現(xiàn)有的用戶的操作還是調(diào)用的老版本JS里面的內(nèi)容，這樣就造成原來(lái)新的JS里面加上的限制不能限制用戶的操作，從而導(dǎo)致用戶無(wú)法使用新版功能。
問(wèn)題產(chǎn)生原因
如果在用戶之前已經(jīng)訪問(wèn)過(guò)系統(tǒng)，那么瀏覽器中會(huì)緩存該系統(tǒng)的CSS、JS，這些CSS、JS緩存未過(guò)期之前，瀏覽器只會(huì)從緩存中讀取CSS和JS，如果在服務(wù)器上修改了css和js，那么這些修改在用戶的瀏覽器中是不會(huì)有變化的。
解決方案
解決方式一：
用戶按Ctrl + F5強(qiáng)制刷新頁(yè)面或者手動(dòng)清空了瀏覽器的緩存。此時(shí)瀏覽器會(huì)重新向服務(wù)器獲取CSS和JS文件,新的文件便會(huì)生效。
解決方式二：
當(dāng)然我們不可能要求每個(gè)客戶都做清理緩存的操作，于是便從代碼的角度著手解決這個(gè)問(wèn)題。在js后面添加版本號(hào)，讓瀏覽器把這個(gè)JS文件當(dāng)做新的文件重新向服務(wù)器獲取資源。
加版本號(hào)之前：
<pre style="margin: 10px 0px 0px; padding: 0px; font-family: ConfluenceInstalledFont, monospace; color: rgb(51, 51, 51); font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;"><script type="text/javascript" th:src="@{/js/test/index.js}"></script></pre>
加版本號(hào)之后：
<pre style="margin: 10px 0px 0px; padding: 0px; font-family: ConfluenceInstalledFont, monospace; color: rgb(51, 51, 51); font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;"><script type="text/javascript" th:src="@{/js/test/index.js?v=1.0}"></script></pre>
此時(shí)問(wèn)題解決，CSS與上類似。
但是針對(duì)To B的這種業(yè)務(wù)模式，客戶嵌入的js-sdk不能隨意更改名字，因此引申出第三種方法
解決方式三：
<script type="text/javascript" src="/js/common.js?t={{date("Y-m-d")}}" ></script>
使用日期，重新請(qǐng)求服務(wù)器。
<script type="text/javascript" src="/js/common.js?t={{time()}}" ></script> 使用時(shí)間戳
<script type="text/javascript" >loadJs("http://localhost:8081/static/html/convention.js.js?timestamp="+Math.random(),null);</script>
總結(jié)
在遇到諸如更新js的項(xiàng)目需求時(shí)，開發(fā)和測(cè)試要注意此類問(wèn)題的解決，切記不要因小失大。
