javascript模块化编程commonjs,cmd,amd规范之间的区别

秒速五厘米 2023-06-19 02:21 20阅读 0赞

模块化编程是javascript语言的一个特性，其实不光javascript语言有模块化思想，java9也支持模块化，所以说模块化是一种编程的趋势，也是一种新的解决方案。模块化编程将我们以前单独编写的组件或者工具等等通过某种方式变为了一种可以很方便调用的代码。在模块化编程之前，我们编写的组件或者工具都是零散的，有些组件依赖另一个组件，当他们加载的时候，需要严格指定先后顺序，否则出现报错。

模块化编程通过定义模块，标识模块，引用模块的方式解决了组件依赖之间的关系。模块化编程主要由commonjs,cmd,amd等规范组成，nodejs实现了commonjs规范，seajs实现了cmd规范，requirejs实现了amd规范。

这里需要说明的是cmd是common module define即通用模块定义规范的简称，而amd是asynchronous module define即异步模块定义的规范简称。他们之间孰优孰劣曾经在网上有很精彩的辩论，玉帛似乎更坚持cmd规范优于amd规范，毕竟seajs是他创作的。

nodejs实现commonjs规范，应用在服务端，seajs和requirejs分别实现了cmd规范和amd规范，应用在浏览器端，但是也不是绝对的，seajs和requirejs都提供了nodejs的npm模块，可以通过npm install seajs或者npm install requirejs的方式安装seajs和requirejs，并且可以让seajs和requirejs在服务端使用。

先来看看nodejs实现commonjs规范的语法以及调用示例。我们通过 两个文件来演示他们的用法和区别math.js定义一个add函数，计算两个数字之和，main.js是调用math模块的js。一般需要通过exports或者module.exports对外暴露模块，如下所示：

math.js

function add(a,b){
    	return a+b;
    }
    module.exports = {add:add}

main.js

var math = require("./math");
    console.log("math.add(1,2)="+math.add(1,2));

运行node main.js，打印信息如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

这里module.exports对外暴露模块，其实可以通过exports = \{add:add\}也是一样的效果，或者exports.add = function(a,b)\{return a+b;\}也是可以的，最简单的就是利用lambda表达式了：

math.js

exports.add = (a,b)=>a+b

main.js

var math = require("./math");
    console.log("math.add(1,2)="+math.add(1,2));

运行，打印结果如下：

![20191204233345675.png][]

以上两种方式都是exports=\{\}或者exports.xxx = yyy，对外暴露的是一个json对象，我们访问的时候直接通过require引入模块，然后调用模块中的对应暴露的方法或者变量。还有一种简单的暴露方式，就是以匿名函数的形式暴露，如下所示：

math.js

module.exports = (a,b) => a+b;

main.js

var add = require("./math");
    console.log("add(1,2)="+add(1,2));

这种方式暴露的时候，只是暴露一个匿名函数，当我们引用这个模块的时候，其实就是指定的函数，调用的时候，直接通过module()就可以调用了。而不能使用module.func()的方式。运行结果如下所示：

![20191205231024226.png][]

值得一说的是，当我们使用typescript语言编写es6模块化，然后通过tsc --module  commonjs 编译出来的js模块化是通过闭包的形式来编写相应的函数，以及函数的方法，最后暴露函数，这个时候，我们调用模块，需要new Function()，然后进行对象的方法调用，如下所示：

Math.ts

export class Math{
        public add(a:number,b:number){
            return a + b;
        }
    }

运行tsc -m commonjs Math.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1][]

当我们在main.js中调用add方法的时候，需要引入Math模块，然后new module.Math().add(1,2)的方式调用，如下所示：

main.js

var math = require("./Math");
    console.log("Math.add(1,2)="+new math.Math().add(1,2));

运行截图：

![20191205232846575.png][]

以上都是介绍nodejs作为实现了commonjs规范的模块化编程的一些思路和实战，有很多有意思的地方。下面我们来看实现了amd规范的requirejs的使用。

requirejs一般用在浏览器中，但是npm也提供了requirejs的安装依赖，可以通过npm i requirejs的方式安装，其实requirejs也可以作为模块化在nodejs中使用，只不过需要做一些设置，下面给出一个可以通过nodejs来运行的requirejs示例。

我们还是以math.js,main.js为例，math.js提供一个add(a,b)函数 ，然后main.js在代码中引入math依赖模块，然后调用add()函数，打印结果，我们重点关注requirejs作为实现了amd规范的语法特征，这里引入关键字define，我们通过define来定义模块，在define函数体中，通过return的方式暴露模块。

math.js

define(function(){
    	var add = function(a,b){
    		return a+b;
    	};
    	return {
    		add:add
    	}
    });

main.js

var requirejs = require("requirejs");
    requirejs.config({
    	nodeRequire:require
    });
    requirejs(["math"],function(math){
    	console.log("math.add(1,2)="+math.add(1,2));
    });

在main.js中相对复杂一点，因为我们不能像以前commonjs规范那样，直接require就可以使用了，我们需要设置requirejs，然后通过requirejs(\[module\],function(module)\{ module.func() ;\})的形式来调用。其中requirejs.config(\{nodeRequire:require\})这一步是可选的，运行node main.js，结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2][]

最后来看看实现了cmd规范的模块化框架seajs的使用，seajs和requirejs一样，都是使用在浏览器端的，但是npm同样提供了安装依赖，可以通过npm i seajs的方式安装，而且同样的，我们可以通过在nodejs服务端使用seajs，也是需要和requirejs一样稍作配置，我们先来看看seajs模块化书写方式。

math.js

define(function(require,exports){
    	exports.add = function(a,b){
    		return a + b;
    	}
    })

main.js

require("seajs");
    var math = require("./math");
    console.log("math.add(1,2)="+math.add(1,2));

在nodejs环境中使用seajs模块化，需要在使用的时候引入seajs，然后就和普通的模块一样使用了，运行node main.js，打印信息如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 3][]

以上通过一些实例，简单介绍了一下commonjs,cmd,amd作为模块化编程规范的区别，以及实现了他们各自规范的具体框架，其中nodejs使用在服务端，requirejs和seajs主要使用在浏览器端。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019120423263160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[20191204233345675.png]: https://img-blog.csdnimg.cn/20191204233345675.png
[20191205231024226.png]: https://img-blog.csdnimg.cn/20191205231024226.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019120523232465.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[20191205232846575.png]: https://img-blog.csdnimg.cn/20191205232846575.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019120523404390.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191205235857633.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70