您的位置：首页 > Web前端 > JavaScript

JS框架设计之加载器所在路径的探知一模块加载系统

2017-02-27 15:38 549 查看

1、要加载一个模块,我们需要一个URL作为加载地址,一个script作为加载媒介,但用户在require是都用ID,我们需要一个将ID转换为URL的方法,思路很简单,强加个约定,URL的合成规则是为：

basepath+模块ID+".js"

2、当浏览器自上而下分析DOM,在浏览器解析我们的Javascript文件时(指的是加载器文件)时,他就肯定是DOM树最后一个加入的script标签,因此有下面的方法:

zcLoadJs.js

function getBasePath()
{
var nodes=document.getElementsByTagName("script");
var node=nodes[nodes.length-1];//拿到最后一个加载的script标签对象,也就是加载器
var src=document.querySelector?node.src:node.getAttribute("src",4);
/*
getAttribute（strAttributeName，lFlags）
0
默认。执行不区分大小写的属性搜索，如果找到该属性，则返回内插值。
1
执行区分大小写的属性搜索。为了找到一个匹配，在大写和小写字母strAttributeName必须完全匹配那些在属性名。
2
以String形式返回属性值。此标志不适用于事件属性。
4
将属性值作为完全展开的网址返回。仅适用于网址属性。
*/

return src;
}
alert(getBasePath());

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
document.write('<script src="../../common/jquery1.4.4.js"><\/script>');
document.write('<script src="../加载器/zcLoadJs.js"><\/script>');
document.write('<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"><\/script>');
</script>

</body>
</html>

在IE678中输出:jquery.js的路径

在其它浏览器中输出:zcLoadJs的路径

zcLoadJs为我的加载器,里面执行getBasePath()方法,预期得到zcLoadJs.js的服务器路径,但是在IE678中却返回juqery.js的路径,这个不奇怪,很多的常规方法在IE中都会失效,除了API的差异性外,它本身也存在很多的bug,所以我们需要修改zcLoadJs.js中的getBasePath方法,使其兼容旧版本的IE,代码如下:

//解决了上面的问题
function getBasePath() {
var nodes = document.getElementsByTagName('script'),
node=nodes[nodes.length-1];
if (window.VBArray)//如果是浏览器的IE的情况
{
for(var i=nodes.length;node;node=nodes[--i])
{
//通过readyChange属性,微软在document、image、xhr、script中都使用了这个属性,用来查看加载情况
if(node.readyState === "interactive")
{
break;
}
}
}
else
{
node=nodes[nodes.length-1];
}
var src=document.querySelector? node.src:node.getAttribute('src',4);//一
return src;
}

在解决IE678中的bug之后,想一下程序能否优化,访问DOM比一般的Javascript代码消耗高很多,这是可以可以利用Error对象,来对代码进行效率上的优化:

function getBasePath()
{
try
{
a.b.c();
}
catch(e)
{
if(e.fileName)//firfox,当try中代码异常,通过抛出的e.fileName可以得到发生异常的文件名
{
return e.fileName;
}
else if(e.sourceURL)//safari,当try中代码异常,通过抛出的e.sourceURL可以得到发生异常的文件名
{
return e.sourceURL;
}
}
var nodes = document.getElementsByTagName('script'),
node=nodes[nodes.length-1];
if (window.VBArray)//如果是浏览器的IE的情况
{
//倒序查找更快
for(var i=nodes.length;node;node=nodes[--i])
{
//通过readyChange属性,微软在document、image、xhr、script中都使用了这个属性,用来查看加载情况
if(node.readyState === "interactive")
{
break;
}
}
}
else
{
node=nodes[nodes.length-1];
}
var src=document.querySelector? node.src:node.getAttribute('src',4);//一
return src;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航