动态加载js css 插件

简介

动态加载js，css在现在以及将来肯定是很重要的。目前来看前端代码编写的业务量已经远远超过后端编写的。随着对用户体验度逐渐增强，前端业务复杂，加载速度变得很慢很慢。为了解决这个问题，目前出现的两个前端模块加载器为require.js与sea.js，这两款模块加载器都不错。但是呢，有时候我仅仅需要的只是动态加载一个js，不需要把代码模块化，那我们只能自己手写一个加载函数。

简单的加载js

/**
 * HTML动态加载js
 * @path {String} src地址必须带有后缀名.js
 * */
function addJs(path){
       var head = document.getElementsByTagName('head')[0];
       var script = document.createElement('script');
       script.src = path;
       script.type = 'text/javascript';
       head.appendChild(script);
}

这段代码已经满足我们需求，动态加载js。随之问题又来了，假设某一个前端小白不知道你加载了没有，又加载了一次，这样就是浪费流量，时间，还有可能造成一些问题。现在我来优化一下。

次佳的加载js

/**
 * HTML动态加载js
 * @path {String} src地址必须带有后缀名.js
 * */
var cache=[];
function addJs(path){
    var flag=0;//检查是否加载的状态
    for(var i=cache.length;i--;){
        cache[i]==path?flag=1:flag=0;
    }
    if(flag){//如果已经加载则不加载
        return;
    }
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = path;
    script.type = 'text/javascript';
    head.appendChild(script);
    cache.push(path);//把加载过的存起来
}

一天线上又出现bug了，结果一看是因为动态加载的js导致，因为只加载了，由于加载的js文件过大，导致还没加载成功，下边就开始使用了。下面在完善一下。

不错的加载js

/**
 * HTML动态加载js
 * @path {String} src地址必须带有后缀名.js
 * @callback {Function} 加载成功的回掉函数
 * */
var cache=[];
function addJs(path,callback){
    var flag=0;//检查是否加载的状态
    for(var i=cache.length;i--;){
        cache[i]==path?flag=1:flag=0;
    }
    if(flag){//如果已经加载则不加载
        return;
    }
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = path;
    script.type = 'text/javascript';
    head.appendChild(script);
    script.onload = script.onreadystatechange = function() {/*判断是否加载成功*/
    if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) {
        script.onload = script.onreadystatechange = null;
            callback();
        }
    };
    cache.push(path);//把加载过的存起来
}

可以看出现在稍微完善一点，一天技术总监说，首页加载太慢了，js,css都要动态加载。这下我们还需要更改代码，再次优化一下。

推荐使用的动态加载js,css

var addStyleJs = (function(dom) {
    var cache = {}, /*缓存加载过的css或者js*/
    funct;
    /**
     * HTML动态加载css或者js
     * @path {String} src 或 link 地址必须带有后缀名.js或者.css
     * @callback {Function} 加载成功的回掉函数
     * */
    funct = function(path, callback) {
        if(!path) { /*检查路径是否为空*/
            throw new Error("请输入path路径!");
        };
        var fn=Object.prototype.toString.call(callback)=="[object Function]"?callback:function(){};
        if(".js" == path.substr(-3)) { /*检查路径后缀名是否为.js*/
            addJs(path, fn);
        } else if(".css" == path.substr(-4)) { /*检查路径后缀名是否为.css*/
            addCss(path, fn);
        } else {
            throw new Error('请输入正确的path路径!');
        }
    };
    /**
     * HTML 动态添加 CSS
     * @path {String}  link 地址必须带有后缀名.css
     * @callback {Function} 加载成功的回掉函数
     * */
    function addCss(path, callback) {
        if(!checkcache(path)) { /*检查是否加载过*/
            var head = dom.getElementsByTagName('head')[0];
            var link = dom.createElement('link');
            link.href = path;
            link.rel = 'stylesheet';
            link.type = 'text/css';
            head.appendChild(link); /*添加到HTML中*/
            link.onload = link.onreadystatechange = function() { /*判断是否加载成功*/
                if(!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
                    link.onload = link.onreadystatechange = null;
                    callback();
                }
            };
            cache[path] = 1; /*存储加载过的css路径,值设为1*/
        }
    };
    /**
     * HTML动态加载js
     * @path {String} src 地址必须带有后缀名.js
     * @callback {Function} 加载成功的回掉函数
     * */
    function addJs(path, callback) {
        if(!checkcache(path)) { /*检查是否加载过*/
            var head = dom.getElementsByTagName('head')[0];
            var script = dom.createElement('script');
            script.src = path;
            script.type = 'text/javascript';
            head.appendChild(script); /*添加到HTML中*/
            script.onload = script.onreadystatechange = function() { /*判断是否加载成功*/
                if(!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
                    script.onload = script.onreadystatechange = null;
                    callback();
                }
            };
            cache[path] = 1; /*存储加载过的js路径,值设为1*/
        }
    };
    /**
     * 检查是否加载
     * @path {String} 路径
     * */
    function checkcache(path) {
        if(cache[path]) { /*判断是否加载过的js路径*/
            return true;
        } else {
            return false;
            }
    };
    return funct;
}(document));

总结

动态加载js与动态加载css在日常开发中也许会不常用，但是对于我们来说这是必须要会的。代码也许学几天就会写，但是写一段高质量的代码则需要你常常写，常常总结，思考。欢迎大家与我一同进步。如有问题请大家指出哦！