對於經常設計web頁面的技術人員來說，javascript和css是必備的行囊，可能很多人都會運用這門技術。但是，試想一下，對於一個大型的web應用程序，可能包含大量的javascript和css文件，我們都知道加載這些文件需要網絡帶寬的，而且每個頁面都去手動引入很多<script>或<link>等文件，對於開發人員來說可能是件費力不討好的事情。而且，在項目維護後期，改動一個文件可能會影響到幾個頁面效果，自己加的文件也許別人在master或其他地方已經加載過，造成多餘的文件浪費。因此，我們需要一種機制(或接口)來控制文件的引入，以便我們更方便的維護，以後這些維護工作專門找js人員即可完成，不必再去一個個檢查頁面。下面，我將這個動態引入的文件展示出來：
不妨給它起一個響亮的名字：JSLoader.js
/*
*JS文件動態加載工具(2011-12-12)
*/
var JSLoader = {
scripts: {
jquery: "https://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 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 www.aiwalls.com
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 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中(僅是原則供參考)。
作者 hmiinyu