动态加载js

按照需求动态添加js

1.使用ajax请求去加载
代码：
var xhr = new XMLHttpRequest;
xhr.open('get','file.js',true);
xhr.onreadystatechange = function(){
    if( xhr.readyState == 4 ){
        if( xhr.status >=200 && xhr.status < 300 || xhr.status == 304 ){
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.text = xhr.responseText;
            document.body.appendChild(script);
        }
    }
};
xhr.send(null);


2.【动态创建script来加载-推荐】
function loadJS( url, callback ){
    var script = document.createElement('script'),
        fn = callback || function(){};
    script.type = 'text/javascript';
    //IE
    if(script.readyState){
        script.onreadystatechange = function(){
            if( script.readyState == 'loaded' || script.readyState == 'complete' ){
                script.onreadystatechange = null;
                fn();
            }
        };
    }else{
        //其他浏览器
        script.onload = function(){
            fn();
        };
    }
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}
//用法
loadJS('file.js',function(){
    alert(1);
});

建议大家可以封装成类库，单独引入。

该原理实现的也有很多不错的js类库可以使用，如LazyLoad.js，支持数组的形式引入，打开浏览器在network中可看到js是同步加载的