在javascript是没有类似java或其他语言的模块概念的,因此也不可能通过import或using等关键字来引用模块,这样造成了复杂项目中前端代码混乱,变量互相影响等。 因此在复杂项目中引入AMD的概念,AMD:全称是Asynchronous Module Defin ...
在javascript是没有类似java或其他语言的模块概念的,因此也不可能通过import或using等关键字来引用模块,这样造成了复杂项目中前端代码混乱,变量互相影响等。
因此在复杂项目中引入AMD的概念,AMD:全称是Asynchronous Module Definition,即异步模块加载机制。通过AMD可以不需要在页面中手动添加<script>来引用脚本,而通过定义依赖自动加载模块脚本,接下来的代码将讲解如何实现建议的AMD模块,如果需要查看比较详细的实现可以下载requirejs源码。
简易实现整体思路:
1.将模块名及模块文件地址存入内存
2.通过define方法将模块名及模块依赖关系以及模块实现代码存入内存
3.require方法通过loadscript方法将需要依赖的模块代码导入并执行define方法存入内存,模块通过入参传入实际代码中,从而完成模块加载。
1.定义模块:
实现模块的定义,并将模块定义存储。
/** * * @param id 模块名 * @param deps 依赖模块 * @param factory 模块实现 */ define: function (id, deps, factory) {
构建模块,从全局module中取出依赖模块,将依赖模块作为入参注入到现有模块,最后执行现有模块
/** * 创建模块 * @param deps 依赖模块 * @param callback * @returns {Function} */ var buildModule = function (deps, callback) { return function () { // 获取依赖模块 var args = []; deps = [].slice.call(deps); deps.forEach(function (dep) { var module = modules[dep] if (typeof module.factory === 'function') module.factory = module.factory(); args.push(module.factory) }) // 将依赖模块注入到callback中 var temp = {}; callback.apply(temp, args); return temp } }
3.注册模块
注册模块主要将名字与文件路径关联起来,便于从路径中下载js,代码清单如下:
/** * 注册模块 * @param obj */ config: function (obj) { var path = obj.paths; for (var el in path) { Object.defineProperty(configs, el, { enumerable: false, configurable: false, writable: true, value: path[el] }) } } }
原标题:javascript 异步模块加载 简易实现
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。