简易的js文件加载工具
博客专区 > 大朱 的博客 > 博客详情
简易的js文件加载工具
大朱 发表于1年前
简易的js文件加载工具
  • 发表于 1年前
  • 阅读 21
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 之前看nodejs直接require就能加载js感觉很神奇,后来看看大体了解通过eval可以简单实现

 原理大体就是通过ajax加载指定路径的js文件,在将其加载到内存中

(function(win){
	
	var ajax = function(){
		
		//js获取项目根路径                http://localhost:8080/uploader
		var getRootPath = function(){
		    //获取当前网址               http://localhost:8080/uploader/.....
		    var cur3wPath=window.document.location.href;
		    //获取主机地址之后的目录                    uploader/....
		    var pathName=window.document.location.pathname;
		    var pos=cur3wPath.indexOf(pathName);
		    //获取主机地址                        http://localhost:8080
		    var localhostPaht=cur3wPath.substring(0,pos);
		    //获取带"/"的项目名            /uploader
		    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
		    return(localhostPaht+projectName);
		};
		
		//初始化目录
		var URI = getRootPath();
		var initURI = function(uri){
			URI = uri;
		};
		
		//获取XMLHttpRequest 对象
		var _xmlhttp = null;
		var getXMLHttpRequest=function(){
			if(_xmlhttp!=null){
				return _xmlhttp;
			}
			if(win.XMLHttpRequest){
				return new XMLHttpRequest();
			}else{
				return new ActiveXObject("Microsoft.XMLHTTP");
			}
		};
		_xmlhttp = getXMLHttpRequest();
		
		//去除头尾空格
		var _trim = function(data){return null==data?"":(data+"").replace(/(^\s*)|(\s*$)/g,"");};
		//全局对象转换
		var _globalEval = function(data){data&&_trim(data)&&(window.execScript||function(data){window.eval.call(window,data);})(data);};
		
		//ajax请求获取文件内容
		var getText = function(fileName){
			var url=URI+"/"+fileName;
			
			console.log("开始加载"+url);
			
			_xmlhttp.open("GET",url, false);
			_xmlhttp.send();
			if(_xmlhttp.readyState==4 && _xmlhttp.status==200){
				return _xmlhttp.responseText;
			}else if(_xmlhttp.readyState==4){
				throw new Error("加载文件 "+url+" 失败!");
			}
			
			console.log("加载"+url+"成功!");
		};
		
		//将文件内容转换为js对象
		var evalObj = function(text){
			_globalEval(text);//将文件内容转换为js对象
		};
		
		//加载文件
		var load = function(fileName){
			var _text = getText(fileName);
			//对象转换
			evalObj(_text);
		};
		
		//返回自定义ajax对象
		return {
			uri:URI,
			initURI:initURI,
			getText:getText,
			load:load
		};
		
	};
	
	//   "/js/allen.js"
	win.Loader = ajax();
	win.load = win.Loader.load;
	
	console.log("Loader 初始化完毕....");
	
})(window);

可以通过  Loader.load('/js/xxx.js');或者load('/js/xxx.js');

 

 

共有 人打赏支持
粉丝 4
博文 12
码字总数 5606
×
大朱
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: