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

     

  • 相关阅读:
    C++获得系统路径
    HDU
    直接插入排序
    《python基础教程(第二版)》学习笔记 函数(第6章)
    《python基础教程(第二版)》学习笔记 语句/循环/条件(第5章)
    《python基础教程(第二版)》学习笔记 字典(第4章)
    《python基础教程(第二版)》学习笔记 字符串(第3章)
    《python基础教程(第二版)》学习笔记 列表/元组(第2章)
    R语言 使用命令行参数运行R程序
    add new row to data.frame/dataframe
  • 原文地址:https://www.cnblogs.com/xiaojianwei/p/12209471.html
Copyright © 2020-2023  润新知