純前端方式實(shí)現(xiàn)手機(jī)app里顯示當(dāng)前js代碼的版本號(hào)铺根。
思路是：通過shell腳本獲取js文件的創(chuàng)建時(shí)間，以此來標(biāo)記版本號(hào)，無需客戶端和服務(wù)端的接口雷客，純前端實(shí)現(xiàn)。
難點(diǎn)是：原生js無法獲取文件的創(chuàng)建時(shí)間桥狡，往往需要服務(wù)端和客戶端協(xié)助實(shí)現(xiàn)搅裙。
解決方案：前端js代碼中預(yù)定義一個(gè)變量存儲(chǔ)版本號(hào)（默認(rèn)值），在js代碼混淆壓縮時(shí)裹芝，使用shell腳本獲取時(shí)間部逮，給js預(yù)定義的那個(gè)版本號(hào)的變量重新賦值。在前端代碼中呈現(xiàn)此變量的值嫂易，即可以實(shí)現(xiàn)在手機(jī)app里顯示當(dāng)前js代碼的版本號(hào)兄朋。
先準(zhǔn)備原料，準(zhǔn)備一個(gè)記錄點(diǎn)擊次數(shù)的變量和一個(gè)顯示版本號(hào)的方法：
// 記錄被點(diǎn)擊的次數(shù)
var copyrightClickTimes = 0;
// 顯示前端代碼的版本號(hào)
function showVersion(version) {
$(".desc").prepend('<p class="desc" id="version">當(dāng)前版本：' + version + '</p>');
}
在需要觸發(fā)顯示邏輯的控件的onclick方法怜械，實(shí)現(xiàn)點(diǎn)擊超過一定次數(shù)之后顯示版本號(hào)的邏輯：
// 如果已經(jīng)顯示版本號(hào)颅和，就不再顯示
if (document.getElementById("version")) {
return;
}
copyrightClickTimes++;
// 如果點(diǎn)擊次數(shù)大于2次傅事，則顯示版本號(hào)
if (copyrightClickTimes > 2) {
showVersion(version);
copyrightClickTimes= 0;
}
網(wǎng)上找的一段日期格式化的擴(kuò)展代碼：
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, // 月份
"d+": this.getDate(), // 日
"h+": this.getHours(), // 小時(shí)
"m+": this.getMinutes(), // 分
"s+": this.getSeconds(), // 秒
"q+": Math.floor((this.getMonth() + 3) / 3), // 季度
"S": this.getMilliseconds() // 毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
};
經(jīng)過擴(kuò)展的Date就可以格式化成想要的形式，設(shè)置版本號(hào)version的默認(rèn)值峡扩，取document.lastModified的值格式化：
var version = new Date(document.lastModified).Format("yyyyMMddhhmmss");
在js代碼混淆壓縮時(shí)蹭越，shell腳本中加入獲取當(dāng)前時(shí)間賦值給js預(yù)定義的那個(gè)變量version
# 當(dāng)前時(shí)間設(shè)置為版本號(hào)
currentTime=`date +%Y%m%d%H%M%S`
echo current_version = $currentTime
echo version = $currentTime';' >> ./js/test.js
混淆壓縮后的代碼類似如下，其中fe就是之前預(yù)定義的變量version
if(document.getElementById("version"))return;we++,we>2&&(v(fe),we=0)}
var fe=new Date(document.lastModified).Format("yyyyMMddhhmmss");
fe=20171018162538;
fe=20171018162538;就是shell腳本在js文件后面追加的時(shí)間教届。
