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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM