JavaScript 模块化开发

Posted by JC on 2015-11-19 00:50:23 Updated on 2015-11-19 00:50:23

两种规范,AMD 异步模块定义CMD 通用模块定义。 实现了这两个规范的库分别是 RequireJSSeaJS

目的

模块化 JavaScript 开发。比如我需要在搜索页面放个翻页器,搜索结果二十万是准确数字,要显示出第一页和最后一页,随着当前的页数变化,只显示当前页的前后两页,包括首页和末页,要维护这个状态是很复杂的,基本不可能,只能是直接动态生成这个状态。输入结果数量,传入模块,模块动态生成翻页器,当前页的选中状态,输出整个翻页器。

区别

  1. AMD 将模块依赖全部写在 JS 文件的开头,浏览器加载模块,异步加载这个模块指定的依赖,全部加载完成后执行回调;CMD 模块依赖是就近原则,不需要在文件最头部指定,就近指定依赖就近加载。
  2. 其他区别我也没看出来,参照链接:
    1. AMD 和 CMD 的区别有哪些?
    2. YUI Modules 与 AMD/CMD,哪一种方式更好?
    3. commonJS\AMD\CMD和我的看法
    4. 使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript
    5. 与 RequireJS 的异同
    6. LABjs、RequireJS、SeaJS 哪个最好用?为什么?
    7. SeaJS 和 RequireJS 的异同

RequireJS

What

定义模块之间的依赖,并异步加载这些模块,当所有依赖都被满足之后,RequireJS 会执行预定义的回调函数。

define()

定义模块,不带扩展名作为模块的名称。

require()

加载依赖。

参数一:数组,每一项都是一个模块的名称 参数二:函数,与数组相对应

保证所有的依赖(数组中的模块)被加载完成之后才会执行回调函数。

underscore.js 在 RequireJS 中的 config 方法中配置模块名称与实际模块之间的映射关系:

require.config({
    path: {
        'underscore': 'libs/underscore/underscore'
        },
    shims: {
        'underscore': {
            exports: '_'
        }
    }
});

path 中可以省略扩展名 .js,shims 中暴露出 _ underscore。

具体的模块内部怎么写,能写啥,如何调用下次再写。

tags: javascript


BMC logoBuy me a coffee via Alipay or Wechat Pay