让前端飞前端之拨云见日

js shell 获取文件的创建时间

2017-10-18  本文已影响367人  wIsper

纯前端方式实现手机app里显示当前js代码的版本号。

思路是:通过shell脚本获取js文件的创建时间,以此来标记版本号,无需客户端和服务端的接口,纯前端实现。

难点是:原生js无法获取文件的创建时间,往往需要服务端和客户端协助实现。

解决方案:前端js代码中预定义一个变量存储版本号(默认值),在js代码混淆压缩时,使用shell脚本获取时间,给js预定义的那个版本号的变量重新赋值。在前端代码中呈现此变量的值,即可以实现在手机app里显示当前js代码的版本号。

先准备原料,准备一个记录点击次数的变量和一个显示版本号的方法:

// 记录被点击的次数
var copyrightClickTimes = 0;

// 显示前端代码的版本号
function showVersion(version) {
    $(".desc").prepend('<p class="desc" id="version">当前版本:' + version + '</p>');
}

在需要触发显示逻辑的控件的onclick方法,实现点击超过一定次数之后显示版本号的逻辑:

// 如果已经显示版本号,就不再显示
if (document.getElementById("version")) {
    return;
}

copyrightClickTimes++;

// 如果点击次数大于2次,则显示版本号
if (copyrightClickTimes > 2) {
    showVersion(version);
    copyrightClickTimes= 0;
}

网上找的一段日期格式化的扩展代码:

Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, // 月份
        "d+": this.getDate(), // 日
        "h+": this.getHours(), // 小时
        "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;
};

经过扩展的Date就可以格式化成想要的形式,设置版本号version的默认值,取document.lastModified的值格式化:

var version = new Date(document.lastModified).Format("yyyyMMddhhmmss");

在js代码混淆压缩时,shell脚本中加入获取当前时间赋值给js预定义的那个变量version

# 当前时间设置为版本号
currentTime=`date +%Y%m%d%H%M%S`
echo current_version = $currentTime
echo version = $currentTime';' >> ./js/test.js

混淆压缩后的代码类似如下,其中fe就是之前预定义的变量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文件后面追加的时间。

上一篇下一篇

猜你喜欢

热点阅读