js 技巧整理

Posted 2020-06-15

1、动态脚本元素

var script = document.createElement(‘script‘);
script.type = ‘text/javascript‘;
script.onload = function(){//非IE
    alert(‘script loaded‘);
};
script.onreadystatechange = function(){//IE
    if(script.readyState == ‘loaded‘ || script.readyState == ‘complete‘){
        script.onreadystatechange = null;
        alert(‘script loaded‘);
    }
};
script.src = ‘file1.js‘;
document.getElementsByTagName(‘head‘)[0].appendChild(script);

onreadystatechange 有五个值：如下

uninitialized	初始状态
loading	开始下载
loaded	下载完成
interactive	数据完成下载但尚不可用
complete	所有数据已准备就绪

动态加载脚本的兼容性写法

function loadScript(url,callback){
    var script = document.createElement(‘script‘);
    script.type = ‘text/javascript‘;
    if(script.readyState){//IE
        if(script.readyState == ‘loaded‘ || script.readyState == ‘complete‘){
            script.onreadystatechange = null;
            callback();
        }
    }else{
        script.onload = function(){//非IE
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName(‘head‘)[0].appendChild(script);
}

使用方法如下：

loadScript(‘file1.js‘,function(){
    alert(‘file is loaded!‘);
});

loadScript(‘file1.js‘,function(){
    loadScript(‘file2.js‘,function(){
        loadScript(‘file3.js‘,function(){
            alert(‘all files are loaded!‘);
        });
    });
});

 XMLHttpRequest 脚本注入

var xhr = new XMLHttpRequest();
xhr.open(‘get‘,‘file1.js‘,true);
xhr.onreadystatechange = function(){
    if(readyState == 4){
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            var script = document.createElement(‘script‘);
            script.type = ‘text/javascript‘;
            script.src = xhr.responseText;
            document.body.appendChild(script);
        }
    }
}

通过get请求一个js文件。 http状态码 2xx表示有效响应，304表示从缓存读取
缺点是该代码不支持跨域，针对走cdn的文件不能采用这个方法

动态加载js的通用工具可以在下面地址获取 

https://github.com/rgrove/lazyload/     

使用方法如下：

LazyLoad.js(‘file1.js‘,function(){
    alert(‘file is loaded‘);
});

//按顺序加载多个文件
LazyLoad.js([‘1.js‘,‘2.js‘],function(){
    alert(‘file is loaded‘);
});

第二种

LABjs

http://labjs.com/

用法举例

$LAB.script(‘file.js‘).wait(function(){
    //初始化
});
//lab script方法用来下载文件，wait方法用来指定文件下载并执行完毕后所调用的函数。支持链式调用
$LAB.script(‘1.js‘)
    .script(‘2.js‘)
    .wait(function(){
        //初始化
    });

前面的举例中1.js不一定会保证在2.js前调用。要保证这一点可以这么写

$LAB.script(‘1.js‘).wait()
    .script(‘2.js‘)
    .wait(function(){
        //初始化
    });

以上都是比较好的动态加载js的方式，且不会阻塞浏览器！

例子和说明参考来自《高性能javascript》第一章