通过js代码主动添加js，css文件或字符串

1.前提

有些时候可能碰到一些特殊情况，需要临时添加一些js，css文件或代码到当前页面
有些时候某些平台如百度地图之类的依赖需要更新文件验证的
有需要动态加载js方法到当前页面的
我们可以使用js来实现这些需求

2.内容

2.1，将string类型代码加入到页面

        scriptString:function(code){
            var script=document.createElement("script");
            script.type="text/javascript";
            try{
                script.appendChild(document.createTextNode(code));
            }catch(ex){
                script.text=code;
            }
            document.body.appendChild(script);
        }

这个比较直接考虑兼容性使用try catch包含两种添加方法

2.2，动态添加js文件

        //将.js文件加载到body元素
        scriptFile:function(url){
            //规定第一个参数为url必须要有
            var args=arguments;
            var len=args.length;
            if(len){
                //可以通过遍历所有script标签替换掉旧有的script文件，主要用于js文件更新
               if(args[1]&&(typeof args[1]=='string')){
                    //取的所有script标签
                    var old=document.getElementsByTagName("script");
                    //遍历  拿新的uri和所有的uri做比较   统一砍掉.js后面的参数
                    for(var i=0,len=old.length;i<len;i++){
                        if(old.item(i).src.substring(0,old.item(i).src.indexOf(".js")+3)==url.substring(0,url.indexOf(".js")+3)){
                            document.body.removeChild(old.item(i));
                        }
                    }
                }
                var script=document.createElement("script");
                script.type="text/javascript";
                script.src=url;
                //添加onload回调
                if(args[1]&&(typeof args[1]=='function')){
                    script.onload=function(){
                        args[1]();
                    }
                }else{
                    if(args[1]&&(typeof args[1]=='string')&&args[2]&&(typeof args[2]=='function')){
                        script.onload=function(){
                            args[2]();
                        }
                    }
                }
                document.body.appendChild(script);
            }else{
                console.error("必须有参数");
            }
        },

通过".js"来截断url路径可以确保大部分情况下正确对比，但也有特殊情况不正确，需要根据实际情况来考虑
添加onload事件以方便某些代码执行在文件加载完成后

2.3，添加string格式的css代码

        styleString:function(css){
            var style=document.createElement("style");
            style.type='text/css';
            try{
                style.appendChild(document.createTextNode(css));
            }catch(ex){
                style.stylesheet.cssText=css;
            }
            var Head=document.getElementsByTagName("head")[0];
            Head.appendChild(style);
        },

这里使用的是document.getElementsByTagName("head")[0];来获取head标签，实际上也可以使用document.head来获取，就是会有一定的兼容性问题
getElementsByTagName这个方法在很低版本的ie浏览器上也会出现不支持的情况，不过现在一般都不考虑

2.4，添加css文件

        styleFile:function(url){
            var head=document.getElementsByTagName('head').item(0);
            var style=document.createElement("style");
            style.type='text/css';
            style.href=url;
            style.rel='stylesheet';
            head.appendChild(style);
        }

实现原理和js文件类似 不过css文件代码不需要onload事件来支撑功能的实现，加载完成后自动生效

3.后记
vue的样式加载应该用到了类似的加载方式，所有的样式都是通过js文件写入到head头部style标签中

加载网络资源的时候可以使用此类方法切换多个来源以确保稳定，当然一般不会碰到这样的需求