【web开发 异步加载js】根据需求动态加载js脚本

在实际开发中，为了实现某种效果或者提升用户体验，往往需要控制何时加载js。本文总结了三个场景的js加载需求：在页面加载完成之后加载js，不同条件下动态加载不同的js，项目打包时的异步加载js模块。

一、在页面加载完成之后加载js

由于js的加载需要一定的时间，为了提高用户体验，可以先让页面元素呈现出来，然后在加载js文件。

<script type="text/javascript"> 
$(document).ready(function(){ 
    var userName="xiaoming"; 
    alert(userName); 
}); 
</script> 

或者简写：

$(function(){ 
var userName="xiaoming"; 
alert(userName); 
}); 

二、不同条件下动态加载不同的js

在不同条件下动态加载不同的js，当你的代码将在不同的环境中运行的时候，你需要他加载不同的js，一方面减少js的加载量，另一方面防止加载的两个js相互污染，所以要先判断环境，然后根据不同环境选择加载不同的js。这里举了个不恰当的例子，zepto和jquery，只是做个例子而已。

var loadScript;
if(isHomeEncironment){
    loadJS("https://***/dist/js/public/zepto.min.js");
    loadScript.onload = function() {//加载结束之后执行回调
         loadScript.onload = null;
         callAFun();//回调函数A
    }
}else{
    loadJS("https://***/dist/js/public/jquery.js"); 
    loadScript.onload = function() {//加载结束之后执行回调
         loadScript.onload = null;
         callBFun();  //回调函数B
    }                 
}
function loadJS(url) {//加载js
    loadScript = document.createElement("script");
    loadScript.type = "text/javascript";
    loadScript.src = url;
    document.body.appendChild(loadScript);
}
function callBFun(){//zepto方法}  
function callBFun(){//jquery方法} 

三、项目打包时的异步加载js模块

在commonjs中有一个Modules/Async/A规范，里面定义了require.ensure语法。webpack实现了它，作用是可以在打包的时候进行代码分片，并异步加载分片后的代码。用法如下：

require.ensure([], function(require){
    var list = require('./list');
    list.show();
}, 'list');

此时list.js会被打包成一个单独的chunk文件 list.fb874860b35831bc96a8.js。

require.ensure方法有三个参数，关于第一个参数，上例中传了空数组，如果传模块名称，则可以实现预加载懒执行，即当执行到这里时，js文件会加载到浏览器但是不会执行，真正执行的是list = require(‘./list’)list = require(‘./list’)。关于第三个参数，用于定义成成的js文件的名称，该参数不是必须的，如果没有第三个参数，那么生成的js文件为默认的名字，详细解释见博客。