概述如何實(shí)現(xiàn)一個(gè)簡單的瀏覽器端js模塊加載器

define(factory() {
 var x = {
 a: 1
 };
 return x;
});

// a.js
define([ 'c.js', 'd.js' ], factory (c, d) {
 var x = c + d;
 return x;
});

var zmm = {
 _modules: {},
 _configs: {
 // 用于拼接相對(duì)路徑
 basePath: (function (path) {
 if (path.charAt(path.length - 1) === '/') {
 path = path.substr(0, path.length - 1);
 }
 return path.substr(path.indexOf(location.host) + location.host.length + 1);
 })(location.href),
 // 用于拼接相對(duì)根路徑
 host: location.protocol + '//' + location.host + '/'
 }
};
zmm.hasModule = function (_uri) {
 // 判斷是否已有該模塊，不論加載中或已加載好
 return this._modules.hasOwnProperty(_uri);
};
zmm.isModuleLoaded = function (_uri) {
 // 判斷該模塊是否已加載好
 return !!this._modules[_uri];
};
zmm.pushModule = function (_uri) {
 // 新模塊占坑，但此時(shí)還未加載完成，表示加載中；防止重復(fù)加載
 if (!this._modules.hasOwnProperty(_uri)) {
 this._modules[_uri] = null;
 }
};
zmm.installModule = function (_uri, mod) {
 this._modules[_uri] = mod;
};
zmm.load = function (uris) {
 var i, nsc;
 for (i = 0; i < uris.length; i++) {
 if (!this.hasModule(uris[i])) {
 this.pushModule(uris[i]);
 // 開始加載
 var nsc = document.createElement('script');
 nsc.src = uri;
 document.body.appendChild(nsc);
 }
 }
};
zmm.resolvePath = function (path) {
 // 返回絕對(duì)路徑
 var res = '', paths = [], resPaths;
 if (path.match(/.*:\/\/.*/)) {
 // 絕對(duì)路徑
 res = path.match(/.*:\/\/.*?\//)[0]; // 協(xié)議+域名
 path = path.substr(res.length);
 } else if (path.charAt(0) === '/') {
 // 相對(duì)根路徑 /開頭
 res = this._configs.host;
 path = path.substr(1);
 } else {
 // 相對(duì)路徑 ./或../開頭或直接文件名
 res = this._configs.host;
 resPaths = this._configs.basePath.split('/');
 }
 resPaths = resPaths || [];
 paths = path.split('/');
 for (var i = 0; i < paths.length; i++) {
 if (paths[i] === '..') {
 resPaths.pop();
 } else if (paths[i] === '.') {
 // do nothing
 } else {
 resPaths.push(paths[i]);
 }
 }
 res += resPaths.join('/');
 return res;
};
var define = zmm.define = function (dependPaths, fac) {
 var _uri = document.currentScript.src;
 if (zmm.isModuleLoaded(_uri)) {
 return;
 }
 var factory, depPaths, uris = [];
 if (arguments.length === 1) {
 factory = arguments[0];
 // 掛載到模塊組中
 zmm.installModule(_uri, factory());
 // 告訴proxy該模塊已裝載好
 zmm.proxy.emit(_uri);
 } else {
 // 有依賴的情況
 factory = arguments[1];
 // 裝載完成的回調(diào)函數(shù)
 zmm.use(arguments[0], function () {
 zmm.installModule(_uri, factory.apply(null, arguments));
 zmm.proxy.emit(_uri);
 });
 }
};
zmm.use = function (paths, callback) {
 if (!Array.isArray(paths)) {
 paths = [paths];
 }
 var uris = [], i;
 for (i = 0; i < paths.length; i++) {
 uris.push(this.resolvePath(paths[i]));
 }
 // 先注冊(cè)事件，再加載
 this.proxy.watch(uris, callback);
 this.load(uris);
};
zmm.proxy = function () {
 var proxy = {};
 var taskId = 0;
 var taskList = {};
 var execute = function (task) {
 var uris = task.uris,
 callback = task.callback;
 for (var i = 0, arr = []; i < uris.length; i++) {
 arr.push(zmm._modules[uris[i]]);
 }
 callback.apply(null, arr);
 };
 var deal_loaded = function (_uri) {
 var i, k, task, sum;
 // 當(dāng)一個(gè)模塊加載完成時(shí)，遍歷當(dāng)前任務(wù)棧
 for (k in taskList) {
 if (!taskList.hasOwnProperty(k)) {
 continue;
 }
 task = taskList[k];
 if (task.uris.indexOf(_uri) > -1) {
 // 查看這個(gè)任務(wù)中的模塊是否都已加載好
 for (i = 0, sum = 0; i < task.uris.length; i++) {
 if (zmm.isModuleLoaded(task.uris[i])) {
 sum ++;
 }
 }
 if (sum === task.uris.length) {
 // 都加載完成 刪除任務(wù)
 delete(taskList[k]);
 execute(task);
 }
 }
 }
 };
 proxy.watch = function (uris, callback) {
 // 先檢查一遍是否都加載好了
 for (var i = 0, sum = 0; i < uris.length; i++) {
 if (zmm.isModuleLoaded(uris[i])) {
 sum ++;
 }
 }
 if (sum === uris.length) {
 execute({
 uris: uris,
 callback: callback
 });
 } else {
 // 訂閱新加載任務(wù)
 var task = {
 uris: uris,
 callback: callback
 };
 taskList['' + taskId] = task;
 taskId ++;
 }
 };
 proxy.emit = function (_uri) {
 console.log(_uri + ' is loaded!');
 deal_loaded(_uri);
 };
 return proxy;
}();

// main.html
zmm.use('/a.js', function(){...});
// a.js
define('/b.js', function(b) {
 var a = 1;
 a = b + 1;
 return a;
});
// b.js
define('/a.js', function(a) {
 var b = a + 1;
 return b;
});

// a.js
define('./js/a', function (require, exports, module) {
 var a = 1;
 require.async('./b', function (b) {
 a = b + 1;
 module.exports = a; //a= 3
 });
 module.exports = a; // a= 1
});
// b.js
define('./js/b', function (require, exports, module) {
 var a = require('./a');
 var b = a + 1;
 module.exports = b;
});
// main.html
seajs.use('./js/a', function (a) {
 console.log(a); // 1
});

// a.js
var a = 1;
module.exports = a;
var b = require('./b');
a = b + 1;
module.exports = a;
// b.js
var a = require('./a');
var b = a + 1;
module.exports = b;
// main.js
var a = require('./a');
console.log(a); //3

// even.js
import { odd } from './odd';
export var counter = 0;
export function even(n) { counter++; return n == 0 || odd(n - 1);}
// odd.js
import { even } from './even';
export function odd(n) { return n != 0 && even(n - 1);}
// main.js
import * as m from './even.js';
m.even(10); // true; m.counter = 6

// even.js
var odd = require('./odd');
var counter = 0;
exports.counter = counter;
exports.even = function(n) {
counter++;
return n == 0 || odd(n - 1);
}
// odd.js
var even = require('./even').even;
module.exports = function(n) {
return n != 0 && even(n - 1);
}
// main.js
var m = require('./even');
m.even(10); // TypeError: even is not a function