javascript实现模块加载器
实现思路来自于网上资料,自己做了一些修改,仅供学习。
window.ISF = (function(win, doc) { Array.prototype.remove = function() { var items = arguments, k = 0, len = items.length, item = null; for (; k < len; k++) { item = items[k]; for (var i = 0, n = 0; i < this.length; i++) { if (this[i] != item) { this[n++] = this[i]; } } this.length = n; } return this; }; var moduleCache = {}, head = doc.head; function Mod(config){ this.handlers = {}; this.oneTimeHandlers = {}; this.modName = config.modName; this.status = config.status; this.export = config.export; this.on = function(type, handler){ this.handlers[type] = this.handlers[type] || []; this.handlers[type].push(handler); return this; }; this.off = function(type, handler){ if(this.handlers[type]){ this.handlers[type].remove(handler); } if(this.oneTimeHandlers[type]){ this.oneTimeHandlers[type].remove(handler); } return this; }; this.one = function(type, handler){ this.oneTimeHandlers[type] = this.oneTimeHandlers[type] || []; this.oneTimeHandlers[type].push(handler); return this; }; this.fire = function(){ var eventResults = [], type = arguments[0], args = Array.prototype.slice.call(arguments, 1), _handlers = this.handlers[type], _oneTimeHandlers = this.oneTimeHandlers[type], _oneTimeHandlersLen = _oneTimeHandlers.length; if(_handlers && _handlers.length > 0){ for(var i = 0, len = _handlers.length; i < len; i++){ eventResults.push(_handlers[i].apply(this, args)); } } if(_oneTimeHandlers && _oneTimeHandlersLen> 0){ for(var i = 0; i < _oneTimeHandlersLen; i++){ eventResults.push(_oneTimeHandlers[i].apply(this, args)); } } _oneTimeHandlers=[]; return eventResults.length == 1 ? eventResults[0] : eventResults; }; } var createScript = function(url,onload) { var _script = document.createElement('script'); _script.type = 'text/javascript'; _script.charset = 'utf-8'; _script.async = true; _script.src = url; if(onload){ _script.onload = function(){ onload(); }; } var firstScript = document.getElementsByTagName('script')[0]; if(firstScript){ firstScript.parentNode.insertBefore(_script, firstScript); }else{ head.appendChild(_script); } }; var loadMod = function(modName, callback) { var mod = moduleCache[modName]; if(mod){ if(mod.status == 'loaded'){ setTimeout(callback(mod.export), 0); }else{ mod.one('loaded', callback); } }else{ mod = moduleCache[modName] = new Mod({ modName : modName, status : 'loading', export : null }); mod.one('loaded', callback); createScript(modName + ".js"); } }; var saveModule = function(modName, params, factory){ console.log('modName='+modName); var _export = (typeof factory == 'function') ? factory.apply(null, params) : factory; if(modName){ var mod = moduleCache[modName]; mod.status = 'loaded'; mod.export = _export; mod.fire('loaded', mod.export); } }; var ISF = { loadModule : function(modName, factory, config) { config = config ||{}; var requires = config.requires; if (requires && requires.length) { var params = [], depCount = 0; for (i = 0, len = requires.length; i < len; i++) { (function(i) { // 依赖加 1 depCount++; loadMod(requires[i], function(param) { params[i] = param; depCount--; if (depCount == 0) { saveModule(modName, params, factory); } }); })(i); } } else { saveModule(modName, [], factory); } }, define : function(moduleName, factory, config) { this.loadModule(moduleName, factory, config); }, use: function(modules, factory){ this.loadModule(undefined, factory, {requires:modules}); } }; return ISF; })(window, document);
测试:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <script src="ISF.js" type="text/javascript"></script> </head> <body> </body> <script type="text/javascript"> ISF.use(['util', 'math', 'num'], function (util, math, num) { num = math.getRadom() + '_' + num; num = util.formatNum(num); console.log(num); }); </script> </html>
ISF.define('math', function (num) { return { getRadom: function () { return parseInt(Math.random() * num); } }; }, {requires:['num']});
ISF.define('num', function () { return 10; });
ISF.define('util', function () { return { formatNum: function (n) { if (n < 10) return '0' + n; return n; } }; });
相关推荐
nmgxzm00 2020-11-10
ifconfig 2020-10-14
hhanbj 2020-11-17
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
81427005 2020-11-11
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22