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

Javascript实战应用篇(3)：动态加载JS和CSS文件

2011-12-12 11:55 731 查看

对于经常设计web页面的技术人员来说，javascript和css是必备的行囊，可能很多人都会运用这门技术。但是，试想一下，对于一个大型的web应用程序，可能包含大量的javascript和css文件，我们都知道加载这些文件需要网络带宽的，而且每个页面都去手动引入很多<script>或<link>等文件，对于开发人员来说可能是件费力不讨好的事情。而且，在项目维护后期，改动一个文件可能会影响到几个页面效果，自己加的文件也许别人在master或其他地方已经加载过，造成多余的文件浪费。因此，我们需要一种机制(或接口)来控制文件的引入，以便我们更方便的维护，以后这些维护工作专门找js人员即可完成，不必再去一个个检查页面。下面，我将这个动态引入的文件展示出来：

不妨给它起一个响亮的名字：JSLoader.js

/*
*JS文件动态加载工具(2011-12-12)
*/
var JSLoader = {
scripts: {
jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
},
browser: {
ie: /msie/.test(window.navigator.userAgent.toLowerCase()),
moz: /gecko/.test(window.navigator.userAgent.toLowerCase()),
opera: /opera/.test(window.navigator.userAgent.toLowerCase()),
safari: /safari/.test(window.navigator.userAgent.toLowerCase())
},
call: (function () {
function hasFile(tag, url) {
var contains = false;
var files = document.getElementsByTagName(tag);
var type = tag == "script" ? "src" : "href";
for (var i = 0, len = files.length; i < len; i++) {
if (files[i].getAttribute(type) == url) {
contains = true;
break;
}
}
return contains;
}
function fileExt(url) {
var att = url.split('.');
var ext = att[att.length - 1].toLowerCase();
return ext;
}
function loadFile(element, callback, parent) {
var p = parent && parent != undefined ? parent : "head";
document.getElementsByTagName(p)[0].appendChild(element);
if (callback) {
//ie
if (JSLoader.browser.ie) {
element.onreadystatechange = function () {
if (this.readyState == 'loaded' || this.readyState == 'complete') {
callback();
}
};
} else if (JSLoader.browser.moz) {
element.onload = function () {
callback();
};
} else {
callback();
}
}
}
function loadCssFile(files, callback) {
var urls = files && typeof (files) == "string" ? [files] : files;
for (var i = 0, len = urls.length; i < len; i++) {
var cssFile = document.createElement("link");
cssFile.setAttribute('type', 'text/css');
cssFile.setAttribute('rel', 'stylesheet');
cssFile.setAttribute('href', urls[i]);
if (!hasFile("link", urls[i])) {
loadFile(cssFile, callback);
}
}
}
function loadScript(files, callback, parent) {
var urls = files && typeof (files) == "string" ? [files] : files;
for (var i = 0, len = urls.length; i < len; i++) {
var script = document.createElement("script");
script.setAttribute('charset', 'gb2312');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', urls[i]);
if (!hasFile("script", urls[i])) {
loadFile(script, callback, parent);
}
}
}
function includeFile(options) {
var r = options;
//如果传入的是文件名列表则转化为对应的对象
if (typeof (options) == "string") {
var cssFiles = [], scripts = [];
var files = options.split(',');
for (var i = 0, len = files.length; i < len; i++) {
var ext = fileExt(files[i]);
switch (ext) {
case "css":
cssFiles.push(files[i]);
break;
case "js":
scripts.push(files[i]);
break;
}
}
r.cssFiles = cssFiles;
r.scripts = scripts;
}
//首先加载css，再次加载script
loadCssFile(r.cssFiles, function () {
//加载预备script
loadScript(JSLoader.scripts.jquery, function () {
//加载页面所需的script
loadScript(r.scripts, null, "body");
});
});
}
return { include: includeFile };
})()
};
/*
* 供外部调用接口
* include("1.css,2.css,3.js,4.css...");
* include({cssFiles:[], scripts:[]})
*/
var include = function (options) {
JSLoader.call.include(options);
}

以下是在页面中如何调用JSLoader.js：

<head id="" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--主加载文件-->
<script src="Scripts/JSLoader.js" type="text/javascript"></script>
<!--加载文件列表-->
<script type="text/javascript">
//建议先加载css文件以便页面渲染，后加载页面所要的js文件
//注意: 这里jQuery已经自动引入，我们放心使用便是
include({
cssFiles:["styles/tree.css", "styles/main.css", "styles/login.css",...],
scripts:["scripts/jquery.extends.js", "scripts/array.extends.js",...]
});
</script>
</head>

对了，顺便说一句，我们是可以通过配置去修改这个文件结构的，我们可以将那些需要的页面文件写到配置文件，然后单独建一个JS文件去调用，然后再将这个JS嵌入页面，尽最大程度与页面代码发生分离。还要记住一个普适原则，css文件一般放在head中，script文件分两种: 页面渲染和预备文件一般放在head中，而页面事件文件一般放在body中(仅是原则供参考)。

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

标签：

相关文章推荐

新的分享

章节导航