一、CommonJS模块化规范介绍
CommonJS是基于JavaScript语言的一种模块化规范,用于约定模块的定义、组织和调用方式,使得JavaScript代码可以更加模块化、可维护、易复用。
其核心思想是每个文件就是一个模块,每个模块都可以通过require方法来加载其他模块,通过module.exports方法暴露自己的接口,从而实现模块的共享和引用。
二、CommonJS模块化规范的特点
1、每个文件就是一个模块
/* counter.js */
let count = 0;
const addCount = () => {
count++;
};
const getCount = () => {
return count;
};
module.exports = {
addCount,
getCount,
};
2、模块的导入和导出
通过require方法加载模块,通过module.exports方法暴露模块接口。
/* app.js */
const counter = require('./counter');
counter.addCount();
counter.addCount();
console.log(counter.getCount()); // 2
3、同步加载模块
CommonJS是同步加载模块,即在执行代码前,必须先加载所有依赖的模块。
/* app.js */
const fs = require('fs');
const content = fs.readFileSync('test.txt', 'utf-8');
console.log(content);
4、模块的缓存
加载过的模块会被缓存,再次加载时会优先使用缓存中的模块,提高了运行效率。
三、CommonJS模块化规范的实践应用
1、服务器端开发
Node.js基于CommonJS模块化规范,成为服务器端开发的主流语言,可用于搭建web应用、API服务等。
/* server.js */
const http = require('http');
http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Hello World\n');
}).listen(8080);
console.log('Server running at http://localhost:8080/');
2、前端开发
前端模块化开发常用的打包工具webpack、rollup等都支持CommonJS规范,通过打包构建实现代码模块化。
// demo.js
import $ from 'jquery';
export const log = (msg) => {
$(document.body).append('<p>' + msg + '</p>');
};
// index.js
const { log } = require('./demo');
log('Hello World');
3、命令行工具开发
一些命令行工具也采用CommonJS规范,通过模块化封装实现功能。
#!/usr/bin/env node
const program = require('commander');
program
.version('0.1.0')
.option('-p, --port [value]', 'Set server port')
.option('-h, --host [value]', 'Set server host')
.parse(process.argv);
console.log('Server listening on ' + program.host + ':' + program.port);
四、CommonJS模块化规范的不足
1、同步加载会阻塞
如果模块数量较多或者某个模块加载时间较长,会导致整个应用线程阻塞,在服务器端应用尤为明显。
2、无法在浏览器中使用
CommonJS是基于Node.js的模块化规范,只能在服务器端使用,在浏览器端要使用模块化需要使用其他规范如AMD或者ES6模块化。
五、总结
CommonJS模块化规范作为JavaScript社区最先使用的模块化规范之一,其思想和实践应用广泛,可以有效提高JavaScript代码的可维护性和可读性,但由于其同步加载和无法在浏览器中使用的限制,已经逐渐被其他规范取代。