深入理解CommonJS模块化规范

在前端开发中，模块化已经成为了一种标配，它能帮助我们更好地管理项目结构，提高代码复用率和可维护性。而 CommonJS 模块化规范作为 Node.js 应用程序的标准模块系统，也在前端与后端开发中得到了广泛的应用。本文将深入介绍 CommonJS 模块化规范，从多个方面对其进行详细的阐述。

一、CommonJS和ES6模块的区别

在 CommonJS 模块中，模块是静态的，只在模块第一次加载时执行一次，然后就会被缓存起来供后续的调用。而 ES6 模块中，模块则是动态的，可以根据需要多次执行，每次执行时会重新加载一次模块。

// CommonJS模块
// module.js
let count = 0;
module.exports = {
    getCount: function() {
        return count;
    },
    increment: function() {
        count++;
    }
}

// index.js
let module = require('./module');
module.increment();
console.log(module.getCount()); // 1
module.increment();
console.log(module.getCount()); // 2

// ES6模块
// module.js
let count = 0;
export function getCount() {
    return count;
}
export function increment() {
    count++;
}

// index.js
import { getCount, increment } from './module';
increment();
console.log(getCount()); // 1
increment();
console.log(getCount()); // 2

在 CommonJS 模块中，通过 module.exports 将模块暴露出去。而在 ES6 模块中，通过 export 将模块暴露出去。在使用时，CommonJS 模块通过 require 引入，ES6 模块通过 import 引入。

二、CommonJS的modules对象

在 CommonJS 模块中，还有一个 modules 对象用于存储所有的模块，包括主模块和子模块。它是 Node.js 负责模块管理的重要数据结构。

// a.js
console.log('a starting');
exports.done = false;
const b = require('./b.js');
console.log('in a, b.done =', b.done);
exports.done = true;
console.log('a done');

// b.js
console.log('b starting');
exports.done = false;
const a = require('./a.js');
console.log('in b, a.done =', a.done);
exports.done = true;
console.log('b done');

// main.js
console.log('main starting');
const a = require('./a.js');
const b = require('./b.js');
console.log('in main, a.done =', a.done, ', b.done =', b.done);

在上面的代码中，a.js 和 b.js 互相引用，main.js 引用了 a.js 和 b.js 两个模块。通过运行 main.js，可以看到以下输出：

$ node main.js
main starting
a starting
b starting
in b, a.done = false
b done
in a, b.done = true
a done
in main, a.done = true , b.done = true

可以看到，当 a.js 加载时，它会先加载 b.js。当 b.js 加载时，由于 a.js 还没有执行完毕，所以 b.js 中的 a.done 属性为 false，当 a.js 执行完毕之后，b.js 中的 a.done 属性才被赋值为 true。最后，main.js 中引用的 a.js 和 b.js 都执行完毕，a.done 和 b.done 均为 true。

三、CommonJS2EG.NET

CommonJS2EG.NET 是一个在浏览器中运行 CommonJS 模块的库，它可以将 CommonJS 模块转换为可以在浏览器中运行的代码。使用 CommonJS2EG.NET，我们可以在浏览器中直接使用 Node.js 风格的模块化开发。

// calculator.js
function add(a, b) {
  return a + b;
}
function subtract(a, b) {
  return a - b;
}
module.exports = {
  add,
  subtract
}

// index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>CommonJS2EG.NET</title>
  </head>
  <body>
    <script src="//unpkg.com/commonjs2eg.net@1.0.0/commonjs2eg.js"></script>
    <script>
      C2E('./calculator.js', function(err, module) {
        if (err) throw err;
        console.log('1 + 2 =', module.exports.add(1, 2));
        console.log('5 - 3 =', module.exports.subtract(5, 3));
      });
    </script>
  </body>
</html>

以上代码，在浏览器中可以直接访问 index.html 文件来运行 CommonJS 模块 calculator.js 的代码。

四、CommonJS和ES6模块的相同点

虽然 CommonJS 模块化规范与 ES6 模块化规范有很多不同之处，但它们也有一些相同点。

首先，它们都可以实现代码的模块化，使得代码更易于管理和维护。其次，它们都是基于静态的 exports 或者 import 语句来控制模块的访问和导出。

// CommonJS模块
// module.js
let count = 0;
module.exports = {
    getCount: function() {
        return count;
    },
    increment: function() {
        count++;
    }
}

// ES6模块
// module.js
let count = 0;
export function getCount() {
    return count;
}
export function increment() {
    count++;
}

无论是在 CommonJS 模块还是 ES6 模块中，都可以通过 exports 或者 export 关键字来控制模块的访问和导出。

最后，它们都是被设计为适用于多平台多语言的通用模块系统，并且已经得到了广泛的应用，无论是在前端还是后端开发中都是必不可少的一部分。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/195939.html

深入理解CommonJS模块化规范

一、CommonJS和ES6模块的区别

二、CommonJS的modules对象

三、CommonJS2EG.NET

四、CommonJS和ES6模块的相同点

相关推荐

发表回复