动态加载js, layui加载css, html，js 带上版本号

layui demo演示 https://www.layui.com/admin/pro/#/home/homepage1

layui加载css, html，js 带上版本号

这样升级页面的时候用户不用清除浏览器缓存

* common.js

function Script(callback) {
    var js = document.createElement("script");
    this.js = js;
    js.type = "text/javascript";
    document.body.appendChild(js);

    Script.prototype.set = function(url, id) {
        this.js.src = url;
        id && (this.js.id = id);
    };
    if (callback) {
        if (navigator.appName.toLowerCase().indexOf('netscape') === -1) {
            js.onreadystatechange = function() {
                js.readyState === 'complete' && callback(this);
            }
        } else {
            js.onload = function() {
                callback(this);
            }
        }
    }
}

var script = new Script(function() {

    console.log("done");

});

script.set("https://res.layui.com/layui/rc/layui.js");

* layui版本号

layui.cache.version

加载方法：

1. 在模板页面中动态添加script标签

<div class="layadmin-tabsbody-item layui-show" id="LAY-monitor-api">

...

</div>

<!--<script type="text/javascript" src="/dist/script/monitor/api.js"></script>-->
<script>
    !function() {
        var script = document.createElement("script");
        script.src = "/dist/script/monitor/api.js" + "?v=" + layui.cache.version;
        script.type = "text/javascript";
        document.getElementById("LAY-monitor-api").appendChild(script);
    }();

</script>

2. 使用模板标签  ?v={{ layui.cache.version }}

<script type="text/html" template lay-url="./json/menu.json?v={{ layui.cache.version }}"
        lay-done="layui.element.render('nav', 'layadmin-system-side-menu');" id="TPL_layout">

<script type="text/javascript" src="/dist/lib/extend/cookie.js?v={{ layui.cache.version }}"></script>

layui.js 版本号 相关代码

src/front/layui/rc/layui.js

o = function() {this.v = "2.3.0"},

// ...

e.layui = new o

加载js

v.src = h + function() {
                    var e = o.version ? o.version || (new Date()).getTime() : o.v || layui.cache.version;
                    return e ? "?v=" + e : "";
                }();

    o.prototype.use = function(e, fun, l) {
        function s(e, t) {
            var o = "PLaySTATION 3" === navigator.platform ? /^complete$/ : /^(complete|loaded)$/;
            ("load" === e.type || o.test((e.currentTarget || e.srcElement).readyState)) && (n.modules[d] = t, f.removeChild(v), function r() {
                return ++m > 1e3 * n.timeout / 4 ? err(d + " is not a valid module") : void(n.status[d] ? c() : setTimeout(r, 4))
            }())
        }

        function c() {
            l.push(layui[d]);
            e.length > 1 ? y.use(e.slice(1), fun, l) : "function" == typeof fun && fun.apply(layui, l)
        }
        var y = this,
            p = n.dir = n.dir ? n.dir : r,
            f = t.getElementsByTagName("head")[0];

        e = "string" == typeof e ? [e] : e;
        if (window.jQuery && jQuery.fn.on) {
            y.each(e, function (t, n) {
                "jquery" === n && e.splice(t, 1)
            });
            layui.jquery = layui.$ = jQuery;
        }
        var d = e[0],
            m = 0;
        if (l = l || [], n.host = n.host || (p.match(/\/\/([\s\S]+?)\//) || ["//" + location.host + "/"])[0], 0 === e.length || layui["layui.all"] && u[d] || !layui["layui.all"] && layui["layui.mobile"] && u[d]) return c(), y;
        if (n.modules[d]) {
            ! function g() {
                return ++m > 1e3 * n.timeout / 4 ? err(d + " is not a valid module") : void("string" == typeof n.modules[d] && n.status[d] ? c() : setTimeout(g, 4))
            }();
        } else {
            var v = t.createElement("script"),
                h = (u[d] ? p + "lay/" : /^\{\/\}/.test(y.modules[d]) ? "" : n.base || "") + (y.modules[d] || d) + ".js";
            h = h.replace(/^\{\/\}/, "");
            v.async = true;
            v.charset = "utf-8";
            v.src = h + function() {
                    var e = o.version ? o.version || (new Date()).getTime() : o.v || layui.cache.version;
                    return e ? "?v=" + e : "";
                }();
            f.appendChild(v);
            if (!v.attachEvent || v.attachEvent.toString && v.attachEvent.toString().indexOf("[native code") < 0 || i) {
                v.addEventListener("load", function(e) {s(e, h)}, false)
            } else {
                v.attachEvent("onreadystatechange", function(e) {s(e, h)});
            }
            n.modules[d] = h;
        }
        return y
    };

加载css

    o.prototype.link = function(e, w, r) {
        var i = this,
            u = t.createElement("link"),
            l = t.getElementsByTagName("head")[0];
        "string" == typeof w && (r = w);
        var s = (r || e).replace(/\.|\//g, ""),
            c = u.id = "layuicss-" + s,
            y = 0;
        u.rel = "stylesheet";
        u.href = e + "?v=" + (o.debug ? (new Date).getTime() : layui.cache.version);
        u.media = "all";
        t.getElementById(c) || l.appendChild(u);

        if ("function" != typeof w) {
            return i;
        }
        (function p() {
            return ++y > 1e3 * n.timeout / 100 ?
                err(e + " timeout") :
                parseInt(i.getStyle(t.getElementById(c), "width")) ? w() : setTimeout(p, 100)
        })();
        return i;
    }

 u.href = e + "?v=" + (o.debug ? (new Date).getTime() : layui.cache.version);

在首页index.html 配置

layui.config({
    base: './dist/', //指定 layuiAdmin 项目路径
    version: '1.0.1'
}).use('index', function() {
    if (/^http(s*):\/\//.test(location.href) ) {return 1;}

    var layer = layui.layer, admin = layui.admin;
    layer.ready(function() {
        admin.popup({
            content: '请部署到web服务器下根目录下用http://访问',
            area: '300px',
            btnAlign: 'c',
            shade: false
        });
    });
    return 0;
});
// config xhr path
window.CONTEXT_PATH = "http://172.16.0.224:8000";

* layui退出登录

layui.admin.events.logout()