美文网首页
CommonJS, AMD, CMD , es6模块化

CommonJS, AMD, CMD , es6模块化

作者: locky丶 | 来源:发表于2019-04-20 11:48 被阅读0次

CommonJS

CommonJS是一种代码书写规范。
** 代表:node.js **

2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程。

这标志"Javascript模块化编程"正式诞生。因为老实说,在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限;但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程。

node.js的模块系统,就是参照CommonJS规范实现的。在CommonJS中,有一个全局性方法require(),用于加载模块。假定有一个数学模块math.js,就可以像下面这样加载。

var math = require('math');

然后,就可以调用模块提供的方法:

var math = require('math');
math.add(2,3); // 5

因为这个系列主要针对浏览器编程,不涉及node.js,所以对CommonJS就不多做介绍了。我们在这里只要知道,require()用于加载模块就行了。

AMD (异步模块定义)

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。
** 代表:require.js **

页面引入require.js文件

<script src="js/require.js" defer async="true" ></script>
<script src="js/require.js" data-main="js/main"></script>
// main.js
       require.config({
    baseUrl: "js/lib",
    paths: {
      "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min",
      "underscore": "underscore.min",
      "backbone": "backbone.min"
    }
  });

  require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // some code here
  });

基于commonJS规范的nodeJS出来以后,服务端的模块概念已经形成,很自然地,大家就想要客户端模块。而且最好两者能够兼容,一个模块不用修改,在服务器和浏览器都可以运行。但是,由于一个重大的局限,使得CommonJS规范不适用于浏览器环境。

var math = require('math');
math.add(2, 3);

第二行math.add(2, 3),在第一行require('math')之后运行,因此必须等math.js加载完成。也就是说,如果加载时间很长,整个应用就会停在那里等。您会注意到 require 是同步的。

这对服务器端不是一个问题,因为所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间。但是,对于浏览器,这却是一个大问题,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于"假死"状态。

因此,浏览器端的模块,不能采用"同步加载"(synchronous),只能采用"异步载"(asynchronous)。这就是AMD规范诞生的背景。

CMD(通用模块定义)

CMD 推崇依赖就近,AMD 推崇依赖前置。

// CMD
defined (function (require, exports, module) {
  var a = requrie('./a')
  a.doSomething()
  // 此处略去 100行
  var b = require('./b') // 依赖可以就近书写
   b.doSomething()
    ...
})

// AMD
define(['./a' , './b'], function(a ,b) {
  a.doSomething()
  // 此处略去 100行
  b.doSomething()
   ...

ADM和CMD比较

-相同之处
RequireJS 和 Sea.js 都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript 的模块化开发变得简单自然。

-不同之处
两者的主要区别如下:

  1. 定位有差异。RequireJS 想成为浏览器端的模块加载器,同时也想成为 Rhino / Node 等环境的模块加载器。Sea.js 则专注于 Web 浏览器端,同时通过 Node 扩展的方式可以很方便跑在 Node 环境中。
    遵循的规范不同。RequireJS 遵循 AMD(异步模块定义)规范,Sea.js 遵循 CMD (通用模块定义)规范。规范的不同,导致了两者 API 不同。Sea.js 更贴近 CommonJS Modules/1.1 和 Node Modules 规范。

  2. 推广理念有差异。RequireJS 在尝试让第三方类库修改自身来支持 RequireJS,目前只有少数社区采纳。Sea.js 不强推,采用自主封装的方式来“海纳百川”,目前已有较成熟的封装策略。

  3. 对开发调试的支持有差异。Sea.js 非常关注代码的开发调试,有 nocache、debug 等用于调试的插件。RequireJS 无这方面的明显支持。

  4. 插件机制不同。RequireJS 采取的是在源码中预留接口的形式,插件类型比较单一。Sea.js 采取的是通用事件机制,插件类型更丰富。

  5. 还有不少差异,涉及具体使用方式和源码实现,欢迎有兴趣者研究并发表看法。

总之,如果说 RequireJS 是 Prototype 类库的话,则 Sea.js 致力于成为 jQuery 类库。

ES6 模块化

ES6 模块化采用静态编译,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。

对于 CommonJS 和 ES6 中的模块化的两者区别是:

前者支持动态导入,也就是 require(${path}/xx.js),后者目前不支持。

前者是同步导入,因为用于服务端,文件都在本地,同步导入即使卡住主线程影响也不大。而后者是异步导入,因为用于浏览器,需要下载文件,如果也采用同步导入会对渲染有很大影响。

前者在导出时都是值拷贝,就算导出的值变了,导入的值也不会改变,所以如果想更新值,必须重新导入一次。但是后者采用实时绑定的方式,导入导出的值都指向同一个内存地址,所以导入值会跟随导出值变化

相关文章

  • JS模块化

    模块化规范:CommonJS,AMD,CMD,UMD,ES6 Module CommonJS CommonJS是服...

  • 归档

    AMD、CMD、CommonJs、ES6的对比 他们都是用于在模块化定义中使用的,AMD、CMD、CommonJs...

  • ES6模块化

    模块化技术有哪些:- CommonJS(nodejs)、ES6模块化、AMD、CMD等 CommonJS:Comm...

  • js模块化

    js的模块化大致分为4种规范 amd cmd commonjs 和es6模块化 1.amd规范 amd规范又叫异步...

  • AMD、CMD、CommonJs、ES6的对比

    原文地址 AMD、CMD、CommonJs、ES6的对比 他们都是用于在模块化定义中使用的,AMD、CMD、Com...

  • js模块化规范

    一、js模块化1、模块化规范: script CommonJS AMD CMD ES6 modules 2、scr...

  • 前端模块化:ES6,CommonJS

    前端模块化 共有四种规范 ES6 Module CommonJS AMD CMD ES6 Module ES6模块...

  • js模块化学习笔记二:模块化规范

    常见的模块化规范有:CommonJS、AMD、CMD、ES6 一、CommonJS 1).实现 服务器端:Node...

  • js模块化

    首先梳理一下模块化的发展情况~ 无模块化-->CommonJS规范-->AMD规范-->CMD规范-->ES6模块...

  • 通过 babel 体验 ES6 模块化

    原文: 一篇理解前端模块化:AMD、CMD、CommonJS、ES6[https://mp.weixin.qq.c...

网友评论

      本文标题:CommonJS, AMD, CMD , es6模块化

      本文链接:https://www.haomeiwen.com/subject/qqekgqtx.html