文档章节

简易的js文件加载工具

大朱
 大朱
发布于 2016/06/17 16:17
字数 381
阅读 24
收藏 0
点赞 0
评论 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
博文 15
码字总数 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
用JavaScript实现JavaScript文件的版本管理和加载

受《大公司怎样开发和部署前端代码?》这篇文章的启发,结合自己的项目实践,创建了一套JavaScript文件的版本管理和加载的机制,虽然比较粗糙,但是解决了不少实际的问题。 使用到的主要工具...

zero2hero
2015/04/14
0
0
JS三教九流系列-require.js-网站模块化开发

js开发的模块化就是module处理 简单理解js模块化的开发就是让我们的web项目对js进行分类的处理 我们在开发网站的时候,里面会用要很多的类库,如jquery,还会有到基于jq各种插件,还会有其他...

透笔度
2015/08/19
0
0
Javascript 加载性能优化

浏览器对javascript的处理主要有2部分:下载和执行 下载在有些浏览器中是并行的,有些浏览器中是串行的,如IE8、Firefox3、Chrome2都是串行下载的 执行在所有浏览器中默认都是阻塞的,当js在...

xiahuawuyu
2012/09/19
0
0
原生javascript开发仿微信打飞机小游戏

今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏。。 本来想用html5做的,但是毕竟人家才初学,连jquery都还不...

zaaack
2014/02/04
0
37
JSON,异步加载(学习笔记)

JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信) JSON是静态类(不需要构造),类似于Math,内部...

Mrs_CoCo
04/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

NNS域名系统之域名竞拍

0x00 前言 其实在官方文档中已经对域名竞拍的过程有详细的描述,感兴趣的可以移步http://doc.neons.name/zh_CN/latest/nns_protocol.html#id30 此处查阅。 我这里主要对轻钱包开发中会用到的...

暖冰
今天
0
0
32.filter表案例 nat表应用 (iptables)

10.15 iptables filter表案例 10.16/10.17/10.18 iptables nat表应用 10.15 iptables filter表案例: ~1. 写一个具体的iptables小案例,需求是把80端口、22端口、21 端口放行。但是,22端口我...

王鑫linux
今天
0
0
shell中的函数&shell中的数组&告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析

影夜Linux
今天
0
0
Linux网络基础、Linux防火墙

Linux网络基础 ip addr 命令 :查看网口信息 ifconfig命令:查看网口信息,要比ip addr更明了一些 centos 7默认没安装ifconfig命令,可以使用yum install -y net-tools命令来安装。 ifconfig...

李超小牛子
今天
1
0
[机器学习]回归--Decision Tree Regression

CART决策树又称分类回归树,当数据集的因变量为连续性数值时,该树算法就是一个回归树,可以用叶节点观察的均值作为预测值;当数据集的因变量为离散型数值时,该树算法就是一个分类树,可以很...

wangxuwei
昨天
1
0
Redis做分布式无锁CAS的问题

因为Redis本身是单线程的,具备原子性,所以可以用来做分布式无锁的操作,但会有一点小问题。 public interface OrderService { public String getOrderNo();} public class OrderRe...

算法之名
昨天
10
0
143. Reorder List - LeetCode

Question 143. Reorder List Solution 题目大意:给一个链表,将这个列表分成前后两部分,后半部分反转,再将这两分链表的节点交替连接成一个新的链表 思路 :先将链表分成前后两部分,将后部...

yysue
昨天
1
0
数据结构与算法1

第一个代码,描述一个被称为BankAccount的类,该类模拟了银行中的账户操作。程序建立了一个开户金额,显示金额,存款,取款并显示余额。 主要的知识点联系为类的含义,构造函数,公有和私有。...

沉迷于编程的小菜菜
昨天
1
0
从为什么别的队伍总比你的快说起

在机场候检排队的时候,大多数情况下,别的队伍都要比自己所在的队伍快,并常常懊悔当初怎么没去那个队。 其实,最快的队伍只能有一个,而排队之前并不知道那个队快。所以,如果有六个队伍你...

我是菜鸟我骄傲
昨天
1
0
分布式事务常见的解决方案

随着互联网的发展,越来越多的多服务相互之间的调用,这时候就产生了一个问题,在单项目情况下很容易实现的事务控制(通过数据库的acid控制),变得不那么容易。 这时候就产生了多种方案: ...

小海bug
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部