第三方类库加载管理js

49 阅读1分钟

[本文已参与「新人创作礼」活动,一起开启掘金创作之路。]

首先要引入include-lib.js

 
//第三方类库加载管理js,方便切换lib
(function () {
    var r = new RegExp("(^|(.*?\\/))(include-lib\.js)(\\?|$)"),
        s = document.getElementsByTagName('script'), targetScript;
    for (var i = 0; i < s.length; i++) {
        var src = s[i].getAttribute('src');
        if (src) {
            var m = src.match(r);
            if (m) {
                targetScript = s[i];
                break;
            }
        }
    }
 
    //当前版本号,用于清理浏览器缓存
    var cacheVersion = "20190619";
 
    // cssExpr 用于判断资源是否是css
    var cssExpr = new RegExp('\\.css');
 
    function inputLibs(list) {
        if (list == null || list.length == 0) return;
 
        for (var i = 0, len = list.length; i < len; i++) {
            var url = list[i];
            if (cssExpr.test(url)) {
                var css = '<link rel="stylesheet" href="' + url + '?time=' + cacheVersion + '">';
                document.writeln(css);
            } else {
                var script = '<script type="text/javascript" src="' + url + '?time=' + cacheVersion + '"><' + '/script>';
                document.writeln(script);
            }
        }
    }
 
    //加载类库资源文件
    function load() {
        var arrInclude = (targetScript.getAttribute('include') || "").split(",");
        var libpath = (targetScript.getAttribute('libpath') || "");
 
        if (libpath.lastIndexOf('/') != libpath.length - 1)
            libpath += "/";
 
        var libsConfig = {
            'home': [//此处是你需要用到的js和css想用的时候
                    //直接传home就ok了                
                libpath + "js/jquery-1.9.1.min.js",
                libpath + "js/home.js",
                libpath + "css/base.css"
            ],
            'layer': [
                libpath + "layer/theme/default/layer.css",
                libpath + "layer/theme/retina/retina.css",
                libpath + "layer/theme/mars/layer.css",
                libpath + "layer/layer.js"
            ]
 
        };
 
 
 
        for (var i in arrInclude) {
            var key = arrInclude[i];
            inputLibs(libsConfig[key]);
        }
 
    }
 
    load();
})();

在html中引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="lib/js/include-lib.js?time=20190619" libpath="lib/" include="home,layer"></script>
</head>
<body>
<div>
    hello word
</div>
</body>
</html>