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");
}
}
