你的位置:首页 > 软件开发 > Java > javascript 异步模块加载 简易实现

javascript 异步模块加载 简易实现

发布时间:2015-09-18 15:00:12
在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 (#换成@)。