JS - CommonJS、ES2015、AMD、CMD模块规范对比与介绍（附样例）

一、CommonJS

1，CommonJS 基本介绍

（1）CommonJS 是一种思想，它是为 JS 的表现来制定规范。由于 JS 没有模块系统、标准库较少、缺乏包管理工具，因此 CommonJS 应运而生。

（2）CommonJS 的目标是希望 JS 可以在任何地方运行，不只是浏览器中。只要我们的 JavaScript 是根据 CommonJS API 编写的，那么就可以在与 CommonJS 兼容的系统上运行。

（3）根据 CommonJS API 编写的 JavaScript 可以做下面这些事情：

  • 编写服务端应用
  • 编写命令行工具
  • 编写基于 GUI 的桌面应用

（4）CommonJS 规范有很多实现，最有名要数 NodeJS 了。

2，CommonJS 的模块规范

一个文件就是一个模块，拥有单独的作用域。普通方式定义的变量、函数、对象都属于该模块内。

  • 通过 require 来加载模块。
  • 通过 exports 和 modul.exports 来暴露模块中的内容。

3，使用样例1：使用 exports 暴露模块接口

（1）下面我们在 Node.js 中创建一个模块，文件名为：hangge.js


1

2

3

exports.hello = function() {

  console.log(‘Hello hangge.com‘);

}

（2）创建一个 main.js 文件，引入这个模块并调用。


1

2

var hangge = require(‘./hangge‘);

hangge.hello();

（3）运行结果如下：

4，使用样例2：使用 modul.exports 暴露模块对象

（1）下面我们把一个对象封装到模块中，文件名为：hangge.js


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

//私有变量

var test = 110;

//公开方法

function Hangge() {

    var name;

    this.setName = function(thyName) {

        name = thyName;

    };

    this.hello = function() {

        console.log(‘Hello ‘ + name);

    };

};

module.exports = Hangge;

（2）创建一个 main.js 文件，引入这个模块并调用。


1

2

3

4

var Hangge = require(‘./hangge‘);

var hello = new Hangge();

hello.setName(‘hangge.com‘);

hello.hello();

（3）运行结果如下：

二、ES2015

1，ES2015 基本介绍

2015 年 6 月， ES2015（即 ECMAScript 6、ES6） 正式发布。ES2015 是该语言的一个显著更新，也是自 2009 年 ES5 标准确定后的第一个重大更新。

虽然 ES2015 提出了许多令人激动的新特性，但由于目前 JavaScript 的运行环境众多，对 ECMAScript 标准的支持程度也不一样。

2，ES2015 的模块规范

  • 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。
  • export 命令用于规定模块的对外接口。
  • import 命令用于输入其他模块提供的功能。
  • ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

3，使用样例1：使用 export 命令规定对外接口

（1）下面我们在 Node.js 中创建一个模块，文件名为：hangge.js


1

2

3

4

5

6

7

8

9

//圆面积计算

export function area(radius) {

  return Math.PI * radius * radius;

}

//圆周长计算

export function circumference(radius) {

  return 2 * Math.PI * radius;

}

（2）创建一个 main.js 文件，引入这个模块并调用。这里 import 命令使用大括号的形式加载模块对外的接口。


1

2

3

import {area,circumference} from ‘./hangge‘;

console.log(‘圆面积：‘ + area(10));

console.log(‘圆周长：‘ + circumference(11));

当然也可以使用星号（*）指定一个对象，实现模块的整体加载。


1

2

3

import * as circle from ‘./hangge‘;

console.log(‘圆面积：‘ + circle.area(10));

console.log(‘圆周长：‘ + circle.circumference(11));

（3）由于 NodeJS 目前还不支持 ES2015 的 Module，这里我们借助 babel-node 来执行，运行结果如下：

4，使用样例2：使用 export default 命令来输出模块

（1）下面我们使用 export default 命令用于指定模块的默认输出。模块文件名为：hangge.js


1

2

3

4

5

6

7

8

9

//圆面积计算（作为默认接口）

export default function(radius) {

  return Math.PI * radius * radius;

}

//圆周长计算

export function circumference(radius) {

  return 2 * Math.PI * radius;

}

（2）创建一个 main.js 文件，引入这个模块并调用。注意：对于 export default 指定模块的默认输出，import 语句不需要使用大括号。


1

2

3

import area, {circumference} from ‘./hangge‘;

console.log(‘圆面积：‘ + area(10));

console.log(‘圆周长：‘ + circumference(11));

（3）同样借助 babel-node 来执行，运行结果如下：

三、AMD

1，AMD 基本介绍

  • AMD 全称为 Asynchromous Module Definition（异步模块定义）
  • AMD 是 RequireJS 在推广过程中对模块定义的规范化产出，它是一个在浏览器端模块化开发的规范。
  • AMD 模式可以用于浏览器环境并且允许非同步加载模块，也可以按需动态加载模块。

2，AMD 的模块规范

  • AMD 通过异步加载模块。模块加载不影响后面语句的运行。所有依赖某些模块的语句均放置在回调函数中。
  • AMD 规范只定义了一个函数 define，通过 define 方法定义模块。该函数的描述如下：

define(id?, dependencies?, factory)

  • id：指定义中模块的名字（可选）。如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。
  • dependencies：当前模块依赖的，已被模块定义的模块标识的数组字面量（可选）。
  • factory：一个需要进行实例化的函数或者一个对象。
  • AMD 规范允许输出模块兼容 CommonJS 规范，这时 define 方法如下：

1

2

3

4

5

6

7

8

define(function (require, exports, module) {

    var reqModule = require("./someModule");

    requModule.test();

     

    exports.asplode = function () {

        //someing

    }

});

3，使用样例1：独立模块

（1）我们使用 RequireJS 定义一个不依赖其他模块得独立模块，文件名：hangge.js


1

2

3

4

5

6

7

8

define(function(){

    var add = function(x,y) {

        return x + y;

    };

    return {

        add : add

    }

});

（2）接着创建一个 html 页面，其内部加载并调用这个模块。


1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

    <head>

        <script type="text/javascript" src="require.js"></script>

        <script type="text/javascript">

          require([‘hangge‘], function (m){

            console.log(m.add(2,3));

          });

        </script>

    </head>

    <body>

    </body>

</html>

（3）控制台输出如下：

4，使用样例2：存在依赖的函数式定义

下面定义的模块又依赖于 cart 和 inventory 这两个模块（它们都处在同一个文件夹下）


1

2

3

4

5

6

7

8

9

10

11

12

define(["./cart", "./inventory"], function(cart, inventory) {

        //return an object to define the "my/shirt" module.

        return {

            color: "blue",

            size: "large",

            addToCart: function() {

                inventory.decrement(this);

                cart.add(this);

            }

        }

    }

);

四、CMD

1，CMD 基本介绍

（1）CMD 全称为 Common Module Definition，它是国内玉伯大神在开发 SeaJS 的时候提出来的。

（2）CMD 与 AMD 挺相近，二者区别如下：

  • 对于依赖的模块 CMD 是延迟执行，而 AMD 是提前执行（不过 RequireJS 从 2.0 开始，也改成可以延迟执行。 ）
  • CMD 推崇依赖就近，AMD 推崇依赖前置。
  • AMD 的 api 默认是一个当多个用，CMD 严格的区分推崇职责单一，其每个 API 都简单纯粹。例如：AMD 里 require 分全局的和局部的。CMD 里面没有全局的 require，提供 seajs.use() 来实现模块系统的加载启动。

2，使用样例1：使用 exports 暴露模块接口

（1）下面使用 sea.js 创建一个模块，文件名为：hangge.js


1

2

3

4

5

6

7

8

define(function(require, exports) {

    // 对外提供name属性

    exports.name = ‘hangge‘;

    // 对外提供hello方法

    exports.hello = function() {

      console.log(‘Hello hangge.com‘);

    };

});

（2）接着创建一个 html 页面，其内部加载并调用这个模块。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

    <head>

        <script type="text/javascript" src="sea.js"></script>

        <script type="text/javascript">

          //加载一个模块，在加载完成时，执行回调

          seajs.use(‘hangge‘, function(a) {

            a.hello();

          });

        </script>

    </head>

    <body>

    </body>

</html>

（3）控制台输出如下：

3，使用样例2：使用 modul.exports 暴露模块对象

（1）下面我们把一个对象封装到模块中，文件名为：hangge.js


1

2

3

4

5

6

7

8

9

define(function(require, exports, module) {

    // 对外提供接口

    module.exports = {

        name: ‘hangge‘,

        hello: function() {

          console.log(‘Hello hangge.com‘);

        }

    };

});

（2）接着创建一个 html 页面，其内部加载并调用这个模块。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

    <head>

        <script type="text/javascript" src="sea.js"></script>

        <script type="text/javascript">

          //加载一个模块，在加载完成时，执行回调

          seajs.use(‘hangge‘, function(a) {

            a.hello();

          });

        </script>

    </head>

    <body>

    </body>

</html>

（3）控制台输出如下：

原文出自：www.hangge.com  转载请保留原文链接：https://www.hangge.com/blog/cache/detail_1686.html

原文地址：https://www.cnblogs.com/jiaqi1719/p/12565392.html

时间： 2024-11-07 09:56:42

JS - CommonJS、ES2015、AMD、CMD模块规范对比与介绍（附样例）的相关文章

前端模块化方案：CommonJS/AMD/CMD/ES6规范

模块化的开发方式可以提高代码复用率,方便进行代码的管理.通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数.目前流行的js模块化规范有CommonJS.AMD.CMD以及ES6的模块系统.前端模块化的演进过程可以看看阮一峰老师的文章.本文主要介绍各规范下的模块化实现方式. 一.CommonJS Node.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的实现提供支持:module.exports.require.global.实际使用时,用module.e

关于 CommonJS AMD CMD UMD 规范

CommonJS CommonJs是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象. 例如: // foobar.js //私有变量 var test = 123; //公有方法 function foobar () { this.foo = function () { // do someing ... } this.bar = functi

关于 CommonJS AMD CMD UMD 规范的差异总结

一.CommonJS 主要是用于服务器端的规范,比如目前的nodeJS. 根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的. // foo.js var request = require('request').default({ timeout: 4000 }); module.exports = function(){ this.re = ''; this.req = fu

js模块化编程之CommonJS和AMD/CMD

一.CommonJS 1.CommonJS API定义很多普通应用程序(主要指非浏览器的应用)使用的API,从而填补了这个空白.它的终极目标是提供一个类似Python,Ruby和Java标准库.这样的话,开发者可以使用CommonJS API编写应用程序,然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中. 在兼容CommonJS的系统中,你可以使用JavaScript开发以下程序: (1).服务器端JavaScript应用程序(2).命令行工具(3).图形界面应用程序(4

js模块化编程之彻底弄懂CommonJS和AMD/CMD！

先回答我:为什么模块很重要? 答:因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块.但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套! 于是下面三个模块规范出来了,这篇文章也出来了(拼出来的 {捂脸笑}). JS中的模块规范(CommonJS,AMD,CMD),如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧,这些规范

[转]js模块化编程之彻底弄懂CommonJS和AMD/CMD！

原文: https://www.cnblogs.com/chenguangliang/p/5856701.html ------------------------------------------------------------------------------------------------------ 先回答我:为什么模块很重要? 答:因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块.但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你

CommonJS和AMD/CMD

JS中的模块规范(CommonJS,AMD,CMD) 一,CommonJS NodeJS是CommonJS规范的实现,webpack也是以CommonJS的形式来书写. 在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限,但在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程. node.js的模块系统,就是就是参照CommonJS规范实现的.在CommonJS中,有一个全局性方法require(),用于加载模块. 二,AMD RequireJS实现了AMD

彻底弄懂CommonJS和AMD/CMD！

JS中的模块规范(CommonJS,AMD,CMD),如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧,这些规范到底是啥东西,干嘛的.本文包括这三个规范的来源及对应的产物的原理. 一.CommonJS 1.一开始大家都认为JS是辣鸡,没什么用,官方定义的API只能构建基于浏览器的应用程序,逗我呢,这太狭隘了吧(用了个高端词,嘎嘎),CommonJS就按耐不住了,CommonJS API定义很多普通应用

JavaSript模块规范 - AMD规范与CMD规范介绍

JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理.模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式.可以想象一个巨大的系统代码,被整合优化分割成逻辑性很强的模块时,对于软件是一种何等意义的存在.对于软件行业来说:解耦软件系统的复杂性,使得不管多么大的系统,也可以将管理,开发,维护变得"有理可循".