要求:
根據下面的設定檔
module=[
{'name':'jquery','src':'/js/lib/jquery-1.8.3.js'},
{'name':'swfobject','src':'/js/utils/swfobject.js'},
{'name':'fancybox','src':'/js/jquery/jquery.fancybox.js','require':['jquery']},
{'name':'uploadify','src':'/js/utils/uploadify.js','require':['swfobject']},
{'name':'jqform','src':'/js/jquery/jquery.form.js','require':['jquery']},
{'name':'register','src':'/js/page/reg.js','require':['jqform']},
{'name':'login','src':'/js/page/login.js','require':['fancybox','jqform']},
{'name':'upload','src':'/js/page/upload.js','require':['fancybox','jqform','uploadify']}
]
寫一個函數
def getfiles(name)
返回 載入某個name指定的頁面,要載入的js檔案列表,有依賴的要先載入
小菜解法
此題粗看起來很簡單,實則不然。
困難在於依賴模組的載入時機。假如有這樣的依賴關係:A-B&C、B-C,A模組依賴B模組和C模組,同時B模組又依賴了C模組,總不能讓C載入兩次吧!
小菜給出的這個解法,只是一個思路,肯定有比這更好的算法,小菜覺得可以用二叉樹之類的算法解決,但小菜不會呀~~~
此演算法沒有考慮循環依賴的情境。
代碼如下:
/**
* 不考慮循環依賴
* @type {Function}
*/
var loadModule = (function(){
/**
* 業務邏輯封裝
* @type {{chainHead: {}, chainCurrent: {}, srcCache: {}, main: main, load: load, findModule: findModule}}
*/
var logics = {
chainHead: {}, //鍊錶頭
chainCurrent: {}, //鍊錶目前節點
srcCache: {}, //module src 快取
/**
* 對外介面
* @param modules 設定物件
* @param name 模組名稱
* @returns {Array} 依賴模組列表,依照載入先後順序排列
*/
main: function(modules, name){
var nameArray = [], //模組名稱清單
srcArray = [], //依賴模組清單
nameStr = "", //模組名稱字串集
repeatRegex = /(^| )([w] ).*2/, //模組名稱去重正規
i = 0;
//粗略載入所有依賴模組
this.load(modules, name)
//建構模組名稱字串集
this.chainCurrent = this.chainHead;
while(this.chainCurrent.next){
nameArray.push(this.chainCurrent.name);
this.chainCurrent = this.chainCurrent.next;
}
nameStr = nameArray.join(" ") " "; //統一標準,最後請補一個空格
//依賴模組去重物
while(repeatRegex.exec(nameStr)){
nameStr = nameStr.replace(repeatRegex, function(g0, g1, g2){
return g0.substring(0, (g0.length - g2.length));
});
}
nameStr = nameStr.substring(0, (nameStr.length - 1)); //去掉補充的多餘空格
//依賴模組名稱轉換為模組路徑
nameArray = nameStr.split(" ");
for(i = 0; i
srcArray.push(this.srcCache[nameArray[i]]);
}
return srcArray;
},
/**
* 遞歸載入模組
* @param modules 設定物件
* @param name 模組名稱
*/
load: function(modules, name){
var node = {},
module = this.findModule.call(modules, "name", name),
i = 0;
//判斷模組是否存在
if(!module){
throw Error("依賴模組 " name " 未找到");
}
//建構模組依賴鍊錶
node.name = name;
// node.src = module.src;
this.srcCache[name] = module.src;
node.next = this.chainHead;
this.chainHead = node;
//遞歸依賴
if(module.require && module.require.length){
for(i = 0;i
this.load(modules, module.require[i]);
}
}
},
/**
* 依據指定屬性名稱和屬性值來尋找模組
* @param name 屬性名稱
* @param value 屬性值
* @returns {*}
*/
findModule: function(name, value){
var array = this,
item = {},
i = 0;
//遍歷模組
for(i = 0; i
item = array[i];
//取得指定模組
if(item && item[name] === value){
return item;
}
}
//找不到使用null
return null;
}
};
//暴露對外介面
return function(){
return logics.main.apply(logics, arguments);
};
}());
/**
* 測試案例
* @type {*[]}
*/
var 模組=[
{'name':'jquery','src':'/js/lib/jquery-1.8.3.js'},
{'name':'swfobject','src':'/js/utils/swfobject.js'},
{'name':'fancybox','src':'/js/jquery/jquery.fancybox.js','require':['jquery']},
{'name':'uploadify','src':'/js/utils/uploadify.js','require':['swfobject']},
{'name':'jqform','src':'/js/jquery/jquery.form.js','require':['jquery']},
{'name':'register','src':'/js/page/reg.js','require':['jqform']},
{'name':'login','src':'/js/page/login.js','require':['fancybox','jqform']},
{'name':'upload','src':'/js/page/upload.js','require':['fancybox','jqform','login','uploadify']}
];
console.log(loadModule(modules, "上傳"));