原創內容，轉載請注明出處！
為了方便資源管理和提升工作效率，常用的js和css文件的加載應該放在一個統一文件里面完成，也方便后續的資源維護。所以我用js寫了以下方法，存放在“sourceController.js”文件內。
/**
* Created by MingChen on 2016/11/3.
*/
function sourceController() {
this.root = "";
this.callfunc = null; // 回調函數
this.css = [];
this.script = [];
// css數量，兼容safari用
var cssCount = document.styleSheets.length;
// timeOut
var tmpTimeOut = [];
// 時間戳
var startTime = null;
/**
* 設置文件根目錄
* @param url 根目錄地址
*/
this.setRoot = function (url) {
this.root = url;
};
/**
* 設置回調函數
* @param func 回調函數
*/
this.setCallBack = function (func) {
this.callfunc = func;
};
/** 添加Script文件 請在addSource錢調用
* @param url script文件路徑
*/
this.addScript = function (url) {
if (url === "" || url == null) return;
this.script.push(url);
};
/**
* 添加CSS文件 請在addSource錢調用
* @param url css文件路徑
*/
this.addCss = function (url) {
if (url === "" || url == null) return;
// console.log("csslength:" + this.css.length);
this.css.push(url);
};
/** 添加常用資源 */
this.addSource = function () {
addMeta([["name", "renderer"], ["content", "ie-comp"]]);
createCss(this);
};
/**
* 添加<link> 默認先加載css
* @param obj 當前對象
*/
function createCss(obj) {
// 如果沒有css文件，不加載
if (obj.css.length <= 0) return;
var url = obj.css.shift();
// console.log(url);
var css = document.createElement("link");
css.setAttribute("rel", "stylesheet");
if (obj.root != "") {
url = obj.root + "/" + url;
}
css.href = url;
// 老版本safari特殊處理，獲取瀏覽器信息的方法請自己添加
if (browserInfo().browser == "safari" && parseInt(browserInfo().version) < 6) {
var timer = setInterval(function () {
// console.log("timer cssCount:" + cssCount + " len:" + document.styleSheets.length);
clearTmpTimeOut();
if (document.styleSheets.length == cssCount && obj.css.length > 0) {
addTask(createCss, 0, obj);
} else if (document.styleSheets.length == cssCount) {
// 如果有js文件，開始加載js
if (obj.script.length > 0) {
addTask(createJs, 0, obj);
} else {
obj.css.length = 0;
if (typeof obj.callfunc == "function") {
obj.callfunc();
}
}
clearInterval(timer);
}
}, 50);
} else {
css.onload = function () {
clearTmpTimeOut();
if (obj.css.length > 0) {
addTask(createCss, 0, obj);
} else {
// 如果有js文件，開始加載js
if (obj.script.length > 0) {
addTask(createJs, 0, obj);
} else {
tmpTimeOut.length = 0;
obj.css.length = 0;
if (typeof obj.callfunc == "function") {
obj.callfunc();
}
}
}
};
}
document.getElementsByTagName("head")[0].appendChild(css);
cssCount++;
}
/**
* 添加<script> js加載完后執行回調函數
* @param obj 當前對象
*/
function createJs(obj) {
// 如果沒有js文件，不加載
if (obj.script.length <= 0) return;
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', (obj.root) ? (obj.root + "/" + obj.script.shift()) : (obj.script.shift()));
script.onload = script.onreadystatechange = function () {
if (script.ready) {
return false;
}
if (!script.readyState || script.readyState == "loaded" || script.readyState == 'complete') {
script.onload = script.onreadystatechange = null;
script.ready = true;
clearTmpTimeOut();
// console.log("time：" + (new Date().getTime() - startTime) + "ms " + script.getAttribute("src"));
if (obj.script.length > 0) {
addTask(createJs, 0, obj);
} else {
tmpTimeOut.length = 0;
obj.script.length = 0;
// 如果有回調函數 執行回調函數
if (typeof obj.callfunc == "function") {
obj.callfunc();
}
}
}
};
startTime = new Date().getTime();
document.getElementsByTagName("body")[0].appendChild(script);
}
/**
*添加一個任務，
* @param {Function} fun 任務函數名
* @param {number} delay 定時時間
* @param {object} params 傳遞到fun中的參數
*/
function addTask(fun, delay) {
var to = null;
if (typeof fun == 'function') {
var argu = Array.prototype.slice.call(arguments, 2);
var f = (function () {
fun.apply(null, argu);
});
to = window.setTimeout(f, delay);
tmpTimeOut.push(to);
return to;
}
to = window.setTimeout(fun, delay);
tmpTimeOut.push(to);
}
// 清空加載計時器
function clearTmpTimeOut() {
while (tmpTimeOut.length > 0){
var tto = tmpTimeOut.shift();
window.clearTimeout(tto);
tmpTimeOut.length = 0;
}
}
}
設置資源路徑管理文件config.js。
/**
* Created by MingChen on 2016/10/25.
*/
var sourcePath = {
"iconfont": "css/iconfont/iconfont.css",
"jquery": 'javascript/libs/jquery/jquery.js',
"pieJS": "javascript/libs/PIEJS/PIE.js",
"data": "javascript/publicData.js",
// jquery-ui
"cjqueryui": "css/jquery-ui.css",
"jqueryui": 'javascript/libs/jquery/jquery-ui-1.11.4.js',
// jqgrid
"cjqgrid": "javascript/libs/jqgrid/ui.jqgrid.css",
"jqgridcn": "javascript/libs/jqgrid/grid.locale-cn.js",
"jqgrid": "javascript/libs/jqgrid/jquery.jqGrid.js",
// common
"ccommon": "css/common.css",
"common": "javascript/common.js",
// header
"cheader": "javascript/libs/headerMenu/css/headerMenu.css",
"header": "javascript/libs/headerMenu/js/headerMenu.js",
// circle
"circle": "javascript/libs/raphael/cycle.js",
"circleBar": "javascript/libs/raphael/raphael.js",
// search
"csearch": "javascript/libs/searchForm/css/searchForm.css",
"search": "javascript/libs/searchForm/js/searchForm.js",
// datePicker
"datePicker": "javascript/libs/My97DatePicker/WdatePicker.js",
// select2
"cselect2": "javascript/libs/select2/css/select2.min.css",
"select2min": "javascript/libs/select2/js/select2.min.js",
"select2Func": "javascript/libs/select2/js/select2Func.js",
// validator
"cvalidator": "javascript/libs/validation/css/jqvForm.css",
"validator": "javascript/libs/validation/js/jquery.validate.js",
// dialog
"cdialog": "javascript/libs/dialogBox/css/dialogBox.css",
"dialog": "javascript/libs/dialogBox/js/dialogBoxUtils.js",
// layer
"clayer": "javascript/libs/layer/skin/layer.css",
"layer": "javascript/libs/layer/layer.js"
};
在需要引入的頁面只需要在<head>加入如下代碼就可以一下子引入所有的常用資源了。為了顯示美觀在所有布局完成之間body設置visibility為hidden，布局完成后顯示出來。
window.onload = function(){
var sc = new sourceController();
sc.setRoot("根目錄地址");
sc.css = [sourcePath.cjqueryui, sourcePath.cjqgrid];
sc.script = [sourcePath.common, sourcePath.jquery, sourcePath.jqueryui, sourcePath.jqgrid];
if(判斷條件) // 根據需要額外添加的文件{
sc.addCss("css/index.css"); // 額外添加的css文件，必須在加載資源之前加入
sc.addScript("javaScript/index.js"); // 額外添加的js文件，必須在加載資源之前加入
}
sc.setCallBack(function(){
document.body.style.display = "block"; // 顯示body
});
sc.addSource(); // 加載常用的js和css文件
};