（-04-10）
对于经常设计web页面的技术人员来说，javascript和css是必备的行囊，可能很多人都会运用这门技术。但是，试想一下，对于一个大型的web应用程序，可能包含大量的javascript和css文件，我们都知道加载这些文件需要网络带宽的，而且每个页面都去手动引入很多<script>或<link>等文件，对于开发人员来说可能是件费力不讨好的事情。而且，在项目维护后期，改动一个文件可能会影响到几个页面效果，自己加的文件也许别人在master或其他地方已经加载过，造成多余的文件浪费。因此，我们需要一种机制(或接口)来控制文件的引入，以便我们更方便的维护，以后这些维护工作专门找js人员即可完成，不必再去一个个检查页面。下面，我将这个动态引入的文件展示出来:
不妨给它起一个响亮的名字:JSLoader.js
/*
*JS文件动态加载工具(-12-12)
*/
var JSLoader = {
scripts: {
jquery: "/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 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) {
//首先加载css，再次加载script
loadCssFile(options.cssFiles, function () {
//加载预备script
loadScript(JSLoader.scripts.jquery, function () {
//加载页面所需的script
loadScript(options.scripts, null, "body");
});
});
}
return { include: includeFile };
})()
};
/*
* 供外部调用接口
* include({cssFiles:[], scripts:[]})
*/
var include = function (options) {
JSLoader.call.include(options);
}
当引入这个文件后，我们页面所有剩下要做的事情就是引入它和其他页面需要的文件列表(注意:我们可以预先引入很多公共js)，大致的文件结构如下:
<head 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中(仅是原则供参考)。
