在上一篇文章中晌梨，我們的AMD模塊加載器基本已經(jīng)能夠使用了中跌，但是還不夠宦焦，因?yàn)槲覀儧](méi)有允許匿名模塊发钝，以及沒(méi)有依賴(lài)等情況。實(shí)際上在amd的規(guī)范中規(guī)定的就是define函數(shù)的前兩個(gè)參數(shù)是可選的波闹，當(dāng)沒(méi)有id（模塊名）的時(shí)候也就意味著不會(huì)有模塊依賴(lài)于這個(gè)模塊酝豪。很顯然，我們的define函數(shù)的每個(gè)參數(shù)的類(lèi)型是不同的精堕，因此我們需要一些函數(shù)來(lái)做類(lèi)型判斷孵淘，如下：
function isFun(f) {
return Object.prototype.toString.call(f).toLowerCase().indexOf('function') > -1;
}
function isArr(arr) {
return Array.isArray(arr);
}
function isStr(str) {
return typeof str === 'string';
}
將這些類(lèi)型判斷函數(shù)運(yùn)用在define函數(shù)，判斷這個(gè)模塊是否有依賴(lài)歹篓，是否為匿名模塊瘫证，這是一個(gè)比較簡(jiǎn)單的工作，修改define函數(shù)如下：
function define(name, deps, callback) {
if(!isStr(name)) {
callback = deps;
deps = name;
name = null;
}
if(!isArr(deps)) {
callback = deps;
deps = [];
}
if(moduleMap[name]) {
name=moduleMap[name]
}
name = replaceName(name);
deps = deps.map(function(ele, i) {
return replaceName(ele);
});
modMap[name] = modMap[name] || {};
modMap[name].deps = deps;
modMap[name].status = 'loaded';
modMap[name].callback = callback;
modMap[name].oncomplete = modMap[name].oncomplete || [];
}
進(jìn)行一次測(cè)試滋捶，不過(guò)在測(cè)試之前痛悯，我們需要知道的是余黎，我們將匿名模塊的name修改為了null重窟，而后面有一個(gè)replaceName方法是做name替換的，這里沒(méi)有判斷name是否為null的情況惧财，因此需要在開(kāi)頭做一次判斷巡扇，增加如下代碼：
function replaceName(name) {
if(name===null) {
return name;
}
// ......
}
測(cè)試代碼如下：
loadjs.config({
baseUrl:'./static',
paths: {
app: './app'
}
});
loadjs.define('cc',['a'], function(a) {
console.log(1);
console.log(a.add(1,2));
});
loadjs.define('ab', function() {
console.log('ab');
});
loadjs.define(function() {
console.log('unknow');
});
loadjs.use(['ab','cc'],function() {
console.log('main');
});
測(cè)試結(jié)果如下：
image
說(shuō)明正確扭仁。此時(shí)我們的一個(gè)簡(jiǎn)單的amd模塊加載器就這樣寫(xiě)完了，刪除console增加注釋就可以比較好的使用了厅翔，最后整理一下代碼如下：
(function(root){
var modMap = {};
var moduleMap = {};
var cfg = {
baseUrl: location.href.replace(/(\/)[^\/]+$/g, function(s, s1){
return s1
}),
path: {
}
};
// 完整網(wǎng)址
var fullPathRegExp = /^[(https?\:\/\/) | (file\:\/\/\/)]/;
// 局對(duì)路徑
var absoPathRegExp = /^\//;
// 以./開(kāi)頭的相對(duì)路徑
var relaPathRegExp = /^\.\//;
// 以../開(kāi)頭的的相對(duì)路徑
var relaPathBackRegExp = /^\.\.\//;
function isFun(f) {
return Object.prototype.toString.call(f).toLowerCase().indexOf('function') > -1;
}
function isArr(arr) {
return Array.isArray(arr);
}
function isStr(str) {
return typeof str === 'string';
}
function merge(obj1, obj2) {
if(obj1 && obj2) {
for(var key in obj2) {
obj1[key] = obj2[key]
}
}
}
function outputPath(baseUrl, path) {
if (relaPathRegExp.test(path)) {
if(/\.\.\//g.test(path)) {
var pathArr = baseUrl.split('/');
var backPath = path.match(/\.\.\//g);
var joinPath = path.replace(/[(^\./)|(\.\.\/)]+/g, '');
var num = pathArr.length - backPath.length;
return pathArr.splice(0, num).join('/').replace(/\/$/g, '') + '/' +joinPath;
} else {
return baseUrl.replace(/\/$/g, '') + '/' + path.replace(/[(^\./)]+/g, '');
}
} else if (fullPathRegExp.test(path)) {
return path;
} else if (absoPathRegExp.test(path)) {
return baseUrl.replace(/\/$/g, '') + path;
} else {
return baseUrl.replace(/\/$/g, '') + '/' + path;
}
}
function replaceName(name) {
if(name===null) {
return name;
}
if(fullPathRegExp.test(name) || absoPathRegExp.test(name) || relaPathRegExp.test(name) || relaPathBackRegExp.test(name)) {
return outputPath(cfg.baseUrl, name);
} else {
var prefix = name.split('/')[0] || name;
if(cfg.paths[prefix]) {
if(name.split('/').length === 0) {
return cfg.paths[prefix];
} else {;
var endPath = name.split('/').slice(1).join('/');
return outputPath(cfg.paths[prefix], endPath);
}
} else {
return outputPath(cfg.baseUrl, name);
}
}
}
function fixUrl(name) {
return name.split('/')[name.split('/').length-1]
}
function config(obj) {
if(obj){
if(obj.baseUrl) {
obj.baseUrl = outputPath(cfg.baseUrl, obj.baseUrl);
}
if(obj.paths) {
var base = obj.baseUrl || cfg.baseUrl;
for(var key in obj.paths) {
obj.paths[key] = outputPath(base, obj.paths[key]);
}
}
merge(cfg, obj);
}
}
function use(deps, callback) {
if(deps.length === 0) {
callback();
}
var depsLength = deps.length;
var params = [];
for(var i = 0; i < deps.length; i++) {
moduleMap[fixUrl(deps[i])] = deps[i];
deps[i] = replaceName(deps[i]);
(function(j){
loadMod(deps[j], function(param) {
depsLength--;
params[j] = param;
if(depsLength === 0) {
callback.apply(null, params);
}
})
})(i)
}
}
function loadMod(name, callback) {
/*模塊還未定義*/
if(!modMap[name]) {
modMap[name] = {
status: 'loading',
oncomplete: []
};
loadscript(name, function() {
use(modMap[name].deps, function() {
execMod(name, callback, Array.prototype.slice.call(arguments, 0));
})
});
} else if(modMap[name].status === 'loading') {
// 模塊正在加載
modMap[name].oncomplete.push(callback);
} else if (!modMap[name].exports){
//模塊還未執(zhí)行完
use(modMap[name].deps, function() {
execMod(name, callback, Array.prototype.slice.call(arguments, 0));
})
}else {
callback(modMap[name].exports);
}
}
function execMod(name, callback, params) {
var exp = modMap[name].callback.apply(null, params);
modMap[name].exports = exp;
callback(exp);
execComplete(name);
}
function execComplete(name) {
for(var i = 0; i < modMap[name].oncomplete.length; i++) {
modMap[name].oncomplete[i](modMap[name].exports);
}
}
function loadscript(name, callback) {
var doc = document;
var node = doc.createElement('script');
node.charset = 'utf-8';
node.src = name + '.js';
/*為每個(gè)模塊添加一個(gè)隨機(jī)id*/
node.id = 'loadjs-js-' + (Math.random() * 100).toFixed(3);
doc.body.appendChild(node);
node.onload = function() {
callback();
}
}
function define(name, deps, callback) {
/*匿名模塊*/
if(!isStr(name)) {
callback = deps;
deps = name;
name = null;
}
/*沒(méi)有依賴(lài)*/
if(!isArr(deps)) {
callback = deps;
deps = [];
}
if(moduleMap[name]) {
name=moduleMap[name]
}
name = replaceName(name);
/*對(duì)每個(gè)依賴(lài)名進(jìn)行路徑替換*/
deps = deps.map(function(ele, i) {
return replaceName(ele);
});
modMap[name] = modMap[name] || {};
modMap[name].deps = deps;
modMap[name].status = 'loaded';
modMap[name].callback = callback;
modMap[name].oncomplete = modMap[name].oncomplete || [];
}
var loadjs = {
define: define,
use: use,
config: config
};
root.define = define;
root.loadjs = loadjs;
root.modMap = modMap;
})(window);
系列文章：
動(dòng)手實(shí)現(xiàn)一個(gè)AMD模塊加載器(一)
動(dòng)手實(shí)現(xiàn)一個(gè)AMD模塊加載器(二)
動(dòng)手實(shí)現(xiàn)一個(gè)AMD模塊加載器(三)
最后是一個(gè)廣告貼乖坠，最近新開(kāi)了一個(gè)分享技術(shù)的公眾號(hào)，歡迎大家關(guān)注??
