实现思路来自于网上资料,自己做了一些修改,仅供学习。
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; } }; });
相关推荐
自己写的javascript模块加载器 里面有清楚的注释
JavaScript模块加载器,基于AMD。迄今为止,对AMD理解最好的实现。100%支持AMD规范,支持模块化开发,当定义好模块后,便可使用模块,无需维护依赖的模块,仅需写好依赖就可以了,lodJS会负责依赖注入。特性:模块化...
RequireJS:一个JavaScript文件和模块加载器
DefineJS 是一个轻量级的异步模块定义 AMD 的实现,是一个 JavaScript 的模块加载器。 支持的浏览器包括: Google Chrome (latest) Opera (latest) Firefox 4 Safari 5 Internet Explorer 8 标签...
Melchior.js 是一个模式加载器,提供通过链式模块定义的API,让你可以远离那些长长的AMD定义和重复的模块名。它起步非常容易,定制方便,而且压缩版只有3KB。 在线演示 示例代码: // create modulemelchiorjs....
本篇文章通过代码示例给大家详细分析了javascript基础内容模块加载器的相关知识点,一起学习下。
RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJS加载模块化脚本将提高代码的加载速度和质量。
mini 一个小型的javascript的模块加载器
require加载器实现原理的深入理解 我们常说node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简单地理解为运行javascript的环境。在大多数情况下我们会在浏览器中去运行javascript,有了node的...
这是自己编写的模仿seajs模块加载的模块加载器,用于学习交流之用。大致模仿seajs的模块化加载实现。
WASM Webpack二进制模块加载器
如果在 node 环境,我们可能会很快的想到使用 Module 模块, Module 模块中有一个私有函数 _compile,可以动态的加载一个模块: export function getRuleFromString(code) { const myModule =
最小的AMD JavaScript模块加载器! 缩小了仅1kB! 这是作为复制粘贴解决方案,因此我不会发布到npm。 我喜欢AMD,因为它允许无需任何处理的快速原型制作,这与CommonJS不同,在CommonJS中,您需要使用webpack或...
注意:此模块与 browserify ( ) 非常相似,后者更为成熟。 您可以使用npm install yasl -g 。 用法: yasl /path/to/root yasl.relative.path.to.main > /path/to/output.js yasl 编译的每个文件都嵌入了一个匿名...
如果JavaScript文件通过定义了JavaScript模块,那么RequireJS还可以提供其他好处:以及在页面中。 RequireJS还具有一个插件系统,该系统支持诸如和。 RequireJS对JavaScript框架没有任何依赖关系。 RequireJS可在IE...
jvm-npm, 适用于JVM的兼容CommonJS模块加载器 JVM上Javascript运行时中的NPM模块加载支持。 实现基于 http://nodejs.org/api/modules.html,应该完全兼容。 当然,不包括完整的node.js API,因此不要期望依赖于它的...
用于加载 JavaScript 模块的轻量级异步模块加载器。 依赖关系 没有任何 入门 npm install async-loader --save-dev 应用程序接口 ##AsyncLoader~load(moduleName, path) 返回一个promise 参数 moduleName String -...
与类的服务器端环境, 或类的模块加载器以及所有Web浏览器。用法客户端使用安装blueimp-md5软件包: npm install blueimp-md5 在HTML标记中包含(缩小的)JavaScript 脚本: < script src =" js/md5.min.js " &...
monkey-hot-loader, 用于热插拔JavaScript模块的web pack加载程序 monkey-hot-loader一个 web pack 加载程序,它向JavaScript系统添加动态更新功能。 查看这篇文章详细的技术细节。摘要这里加载器与 react-hot-...
让 require.js 来处理模块加载当然是可能的,但是在生产环境中,它会触发很多额外的 http 请求,而这些请求并没有人真正想要。 r.js 优化器在这方面做得很好,这个模块旨在取代它。 优化器的问题在于它不允许使用 ...