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

 

原文地址:https://www.cnblogs.com/xiaojianwei/p/12209471.html