标签：style class blog code java http
内容来源：http://hi.baidu.com/begin/item/df02bd79ca8cc0710d0a078a
加载js的基本原理，就是在DOM里面加载<script>元素，加载这些元素都是异步的过程。所以可以说是无阻塞的加载。
但是如果脚本之间存在依赖的话，就会出现不可预知的错误。根据这个，在加载脚本的时候，需要监听“load”事件，对于IE的特殊性，需要监听“readystatechange”事件。
基于这些，实现两个类，第一个类是，加载单个JS的加载器，第二个类，调用第一个类，实现加载多个js，并可配置，是否是同步加载（存在依赖）。
当然，根据传输方式的不同，可以使用Ajax的方式获取JS的内容，但是，Ajax存在跨域的问题，在此，没有采用。
实现代码如下：
ps. 实现了卸载脚本的方法，但是只能卸载DOM结构，无法实现JS的回收，也就是说浏览器依旧保留原先的脚本。
/*
*
usage:
var loader = new JsLoader()
loader.load("xxx.js");
loader.onsuccess =
function()
{
alert("loaded!");
}
*/
function
JsLoader()
{
this.load =
function(url)
{
this.url =
url;
//获取所有的<script>标记
var ss =
document.getElementsByTagName("script");
//判断指定的文件是否已经包含，如果已包含则触发onsuccess事件并返回
for (i = 0; i < ss.length; i++)
{
if (ss[i].src && ss[i].src.indexOf(url) != -1)
{
this.onsuccess();
return;
}
}
//创建script结点,并将其属性设为外联JavaScript文件
var s =
document.createElement("script");
s.type =
"text/javascript";
s.charset = "utf-8";
s.src = url;
//获取head结点，并将<script>插入到其中
var head =
document.getElementsByTagName("head")[0];
head.appendChild(s);
//获取自身的引用
var self =
this;
//对于IE浏览器，使用readystatechange事件判断是否载入成功
//对于其他浏览器，使用onload事件判断载入是否成功
s.onload = s.onreadystatechange =
function()
{
//在此函数中this指针指的是s结点对象，而不是JsLoader实例,
//所以必须用self来调用onsuccess事件，下同。
if (this.readyState && this.readyState == "loading")
return;
self.onsuccess();
}
s.onerror =
function()
{
head.removeChild(s);
self.onfailure();
}
};
//定义载入成功事件
this.onsuccess =
function()
{
};
//定义失败事件
this.onfailure =
function()
{
};
//卸载脚本
this.removejs =
function(filename)
{
if (!filename)
{
filename = this.url;
}
var allsuspects =
document.getElementsByTagName("script");
for (var i = allsuspects.length; i >= 0; i--)
{
if (allsuspects[i] && allsuspects[i].getAttribute("src") !=
null
&&
allsuspects[i].getAttribute("src").indexOf(filename) != -1)
allsuspects[i].parentNode.removeChild(allsuspects[i]); //remove
element by calling
parentNode.removeChild()
}
}
}
/*
*载入多个依赖脚本或不依赖的脚本
* usage:
* var loaders
= new JssProc();
*
loaders.loads(["xx.js","xx1.js"],true);//同步加载
*
loaders.loaded = function()
*
{
* alert("all loaded!");
* }
*/
function JssProc()
{
//是否同同步加载
this.loads = function(urls, isSyn)
{
var number =
0;
var self = this;
if (!isSyn)
{
for (var i = 0; i < urls.length; i++)
{
var s = new
JsLoader()
s.load(urls[i]);
s.onsuccess =
function()
{
number++;
if (number == urls.length)
{
self.loaded();
}
}
}
}
else
{
//递归方式
var j =
0;
function
load()
{
j++;
if (urls[j])
{
var ss = new
JsLoader();
ss.load(urls[j]);
ss.onsuccess =
load;
}
else
{
self.loaded();
}
}
var s = new
JsLoader();
s.load(urls[j]);
s.onsuccess = load;
}
}
//全部加载完调用的事件
this.loaded =
function()
{
}
//卸载多个脚本
/* * usage: var loader = new JsLoader() loader.load("xxx.js"); loader.onsuccess = function() { alert("loaded!"); } */ function JsLoader() { this.load = function(url) { this.url = url; //获取所有的<script>标记 var ss = document.getElementsByTagName("script"); //判断指定的文件是否已经包含，如果已包含则触发onsuccess事件并返回 for (i = 0; i < ss.length; i++) { if (ss[i].src && ss[i].src.indexOf(url) != -1) { this.onsuccess(); return; } } //创建script结点,并将其属性设为外联JavaScript文件 var s = document.createElement("script"); s.type = "text/javascript"; s.charset = "utf-8"; s.src = url; //获取head结点，并将<script>插入到其中 var head = document.getElementsByTagName("head")[0]; head.appendChild(s); //获取自身的引用 var self = this; //对于IE浏览器，使用readystatechange事件判断是否载入成功 //对于其他浏览器，使用onload事件判断载入是否成功 s.onload = s.onreadystatechange = function() { //在此函数中this指针指的是s结点对象，而不是JsLoader实例, //所以必须用self来调用onsuccess事件，下同。 if (this.readyState && this.readyState == "loading") return; self.onsuccess(); } s.onerror = function() { head.removeChild(s); self.onfailure(); } }; //定义载入成功事件 this.onsuccess = function() { }; //定义失败事件 this.onfailure = function() { }; //卸载脚本 this.removejs = function(filename) { if (!filename) { filename = this.url; } var allsuspects = document.getElementsByTagName("script"); for (var i = allsuspects.length; i >= 0; i--) { if (allsuspects[i] && allsuspects[i].getAttribute("src") != null && allsuspects[i].getAttribute("src").indexOf(filename) != -1) allsuspects[i].parentNode.removeChild(allsuspects[i]); //remove element by calling parentNode.removeChild() } } } /* *载入多个依赖脚本或不依赖的脚本 * usage: * var loaders = new JssProc(); * loaders.loads(["xx.js","xx1.js"],true);//同步加载 * loaders.loaded = function() * { * alert("all loaded!"); * } */ function JssProc() { //是否同同步加载 this.loads = function(urls, isSyn) { var number = 0; var self = this; if (!isSyn) { for (var i = 0; i < urls.length; i++) { var s = new JsLoader() s.load(urls[i]); s.onsuccess = function() { number++; if (number == urls.length) { self.loaded(); } } } } else { //递归方式 var j = 0; function load() { j++; if (urls[j]) { var ss = new JsLoader(); ss.load(urls[j]); ss.onsuccess = load; } else { self.loaded(); } } var s = new JsLoader(); s.load(urls[j]); s.onsuccess = load; } } //全部加载完调用的事件 this.loaded = function() { } //卸载多个脚本 this.unload = function() { for (var i = 0; i < urls.length; i++) { new JsLoader().removejs(urls[j]); } }
this.unload = function()
{
for (var i = 0; i
< urls.length; i++)
{
new
JsLoader().removejs(urls[j]);
}
}
推介的网址：http://www.w3cfuns.com/article-1116-1.html
标签：style class blog code java http
原文地址：http://www.cnblogs.com/yonglong/p/3772632.html
