js异步执行 按需加载 三种方式
js异步执行 按需加载 三种方式
第一种:函数引用 将所需加载方法放在匿名函数中传入
//第一种 函数引用 function loadScript(url,callback){ //创建一个js var script=document.createElement("script"); script.type="text/javascript"; if(script.readyState){ //执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 IE使用 script.onreadystatechange=function(){ if(script.readyState=="conplete"||script.readyState=="loaded"){ callback(); } } }else{ //执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 Chrome Safari Opera Firefox使用 script.onload=function(){ callback(); } } script.src=url; //将js加载到页面上去 document.head.appendChild(script); } loadScript("demo.js",function(){ //函数引用 将需要实现的方法传入 test(); })
第二种:eval 会把字符串当做函数代码来执行 将使用方法以字符串形式传入进去(不推荐)
//第二种 eval function loadScript(url,callback){ //创建一个js var script=document.createElement("script"); script.type="text/javascript"; if(script.readyState){ //执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 IE使用 script.onreadystatechange=function(){ if(script.readyState=="conplete"||script.readyState=="loaded"){ eval(callback); } } }else{ //执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 Chrome Safari Opera Firefox使用 script.onload=function(){ eval(callback); } } script.src=url; //将js加载到页面上去 document.head.appendChild(script); } loadScript("demo.js","test()");
demo.js:
function test(){ console.log("a") }
第三种 与函数库相配合
//第三种 与函数库相配合 function loadScript(url,callback){ //创建一个js var script=document.createElement("script"); script.type="text/javascript"; if(script.readyState){ //执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 IE使用 script.onreadystatechange=function(){ if(script.readyState=="conplete"||script.readyState=="loaded"){ tools[callback](); } } }else{ //执行demo.js中的方法 判断当异步加载完后才执行demo.js中的方法 Chrome Safari Opera Firefox使用 script.onload=function(){ tools[callback](); } } script.src=url; //将js加载到页面上去 document.head.appendChild(script); } loadScript("demo.js","test");
demo.js
var tools={ "test":function(){ console.log("a"); }, "demo":function(){ console.log("b"); } }