文档章节

简易的js文件加载工具

大朱
 大朱
发布于 2016/06/17 16:17
字数 381
阅读 27
收藏 0

 原理大体就是通过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');

 

 

© 著作权归作者所有

共有 人打赏支持
大朱
粉丝 3
博文 20
码字总数 6661
作品 0
南京
高级程序员
手把手教你撸一个简易的 webpack

背景 随着前端复杂度的不断提升,诞生出很多打包工具,比如最先的,。到后来的和。但是目前很多脚手架工具,比如已经帮我们集成了一些构建工具的使用。有的时候我们可能并不知道其内部的实现...

muwoo
06/07
0
0
通过延缓执行 JavaScript 提升网页加载速度

简介 延缓执行 JavaScript 是一个能有效提高网页加载速度以及提升用户阅读体验质量的途径。从实际经验来看,将我们的网站从经济实惠的 VPS 迁移到 Softlayer(美国著名的一个数据中心)独立服...

peterzhu0825
2012/05/23
0
0
15个提高编程技巧的JavaScript工具

JavaScript脚本库是一个预先用JavaScript语言写好的库,它方便了我们开发基于JavaScript的应用程序,特别适合AJAX和其他一些以Web为中心的技术。JavaScript主要用于编写嵌入或者包含在HTML页...

IanSun
2015/03/14
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
前端性能优化:细说JavaScript的加载与执行

本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐...

小白师兄
06/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
今天
1
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
7
3
java -jar运行内存设置

java -Xms64m #JVM启动时的初始堆大小 -Xmx128m #最大堆大小 -Xmn64m #年轻代的大小,其余的空间是老年代 -XX:MaxMetaspaceSize=128m # -XX:CompressedClassSpaceSize=6...

李玉长
今天
4
0
Spring | 手把手教你SSM最优雅的整合方式

HEY 本节主要内容为:基于Spring从0到1搭建一个web工程,适合初学者,Java初级开发者。欢迎与我交流。 MODULE 新建一个Maven工程。 不论你是什么工具,选这个就可以了,然后next,直至finis...

冯文议
今天
2
0
RxJS的另外四种实现方式(四)——性能最高的库(续)

接上一篇RxJS的另外四种实现方式(三)——性能最高的库 上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。 首先,为了弄清楚Most库究竟为何如此快,我必须借...

一个灰
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部