在实际开发中,为了实现某种效果或者提升用户体验,往往需要控制何时加载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文件为默认的名字,详细解释见博客。