如何动态加载js？

如何动态加载js？
如何使用js实现多个html页面访问同一个常量?
如何不使用框架，只有Html时，动态加载文件？

首先封装一个global.js, 包含：

• 动态加载js的函数，可以挂载到html页面中
• 并且可以回调方法，可以加载后即执行
• 定义路径公共变量global.path.js css image
  再者页面首先引用global.js,然后改造页面的引入文件，<script>这里调用公共方法变量</script>

可以控制加载顺序，异步的话直接并列写，同步有顺序需要在回调里使用

挂载js文件，调用loadscript.js(url,function(){...})

loadscript.js("vue.js",function () {
     loadscript.js("jjxh.js",function () {});
});
var loadscript =
{
    //$$:function(id){return document.getElementById(id)},
    tag:function(element){return document.getElementsByTagName(element)},
    ce:function(element){return document.createElement(element)},
    js:function(url,callback)
    {
        s = loadscript.ce('script');
        s.type = "text/javascript";
        s.onreadystatechange = ready;
        s.onerror = s.onload = callback;
        s.src = url;
        loadscript.tag('head')[0].appendChild(s);
        function ready(){
            if (s.readyState == 'loaded' || s.readyState == 'complete') {
                callback();
            }
        };
    }
}

兼容ie7，ie10版本

var loadscript =
{
    $$: function(id) { return document.getElementById(id); },
    tag: function(element) { return document.getElementsByTagName(element); },
    ce: function(element) { return document.createElement(element); },
    js: function(url, callback) {
        var s = loadscript.ce('script');
        s.type = "text/javascript";
        s.src = url;
        if (document.documentMode == 10 || document.documentMode == 9) {
            s.onerror = s.onload = loaded;
        } else {
            s.onreadystatechange = ready;
            s.onerror = s.onload = loaded;
        }
        loadscript.tag('head')[0].appendChild(s);

        function ready() { /*IE7.0/IE10.0*/
            if (s.readyState == 'loaded' || s.readyState == 'complete') {
                callback();
            }
        }

        function loaded() { /*chrome/IE10.0*/
            callback();
        }
    }
};

挂载css

loadscript.css("loading");
loadscript.css("basicSN");
css:function(url) {
        document.head.appendChild(function () {
            var a = document.createElement("link");
            a.href = global.css + url + "?v=" + global.vision;
            a.type = "text/css";
            a.rel = "styleSheet";
            return a;
        }());
    }

另类挂载js

var path = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
var script1 = '<script type="text/javascript" src="'+path+'/js/jquery.min.js">'+'<'+'/script>';
var script2 = '<script type="text/javascript" src="'+path+'/js/layer.m.js">'+'<'+'/script>';
document.write(script1,script2);

另类挂载css

var path = "";
var link1 = document.createElement('link');
        link1.setAttribute('type', 'text/css');
        link1.setAttribute('rel', 'stylesheet');
        link1.setAttribute('href', path+'/css/main.css');
document.head.appendChild(link1);

同步同时挂载js,css，多个同时

页面如：
appendDependencies([
        "loading.css",
    ],[
        "layer/global.layer.m.js",
        "jquery.min.js"
    ])
方法：
const LIST = [
    'script',
    'css',
]
function appendDependencies(cssList,jsList) {
    const fragment = document.createDocumentFragment();
    // // add css
    _append(cssList, fragment, 'css');
    // add js
    _append(jsList, fragment,'script');

    document.querySelector('head').appendChild(fragment);
}
function _append(obj, root, type) {
    if (!LIST.includes(type)) {
        throw new Error("type must be one of ${LIST.join(',')} !");
    }
    // loop the list to append each child
    if (Array.isArray(obj)) {
        return obj.forEach(function(item){
            _append(item, root, type);
        });
    }
    var _node;
    switch(type) {
        case 'script':
            _node =  document.createElement('script');
            _node.setAttribute('type', 'text/javascript');
            _node.setAttribute("src", global.js + obj);
            break;
        case 'css':
            _node = document.createElement('link');
            _node.setAttribute("href", global.css + obj);
            _node.setAttribute("type","text/css");
            _node.setAttribute("rel","styleSheet");
            break;
    }
    _node.setAttribute("charset", "utf-8");
    root.appendChild(_node);
    return;
}

JS获取当前文件所在的文件夹全路径

1. Google,FF 下获取当前js文件的路径
    `document.currentScript.src`

2. 比较兼容的获取方式（推荐）
var js = document.scripts;//页面解析到当前为止所有的script标签
js = js[js.length - 1].src.substring(0, js[js.length - 1].src.lastIndexOf("/") + 1);

如路径 `http://localhost/ABC/XX/a.js`
得到    `http://localhost/ABC/XX/`

html 页面 img标签路径置换

`loadscript.img("all");`
img:function (str) {
        if(str=="all"){
            var imgs = document.getElementsByTagName('img');
            for(var i=0;i<imgs.length;i++){
                if(imgs[i].attributes.src){
                    console.log(imgs[i].attributes.src.nodeValue)
                    imgs[i].setAttribute('src',global.img + imgs[i].attributes.src.nodeValue);
                }
            }
            /*$("img").each(function () {
                $(this).attr("src",global.img + $(this).attr("src"));
            });*/
        }
    }

参考链接

https://cloud.tencent.com/developer/article/1040410
https://blog.csdn.net/frank_come/article/details/82425353