四种常见的JS模块化管理方法的比较

最新推荐文章于 2024-05-23 20:00:00 发布

原创最新推荐文章于 2024-05-23 20:00:00 发布 · 置顶 · 2.5k 阅读

6 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了不同模块化编程方式的语法特点与应用场景，包括commonJS、ES6、AMD及CMD等规范，对比了它们之间的差异，并分析了各自在node.js及浏览器环境下的支持情况。

                    
                        
                    
                    语法commonJSES6AMDCMD
导出module.exports = {}
 exports = {}export default {}
export var a = 10define(id?: String, dependencies?: String[], factory: Function(Object);define(function(require, exports, module) {});
导入require(‘module’)import module from ‘module’require([‘myModule’], function(myModule) {});var a = require(‘./a’);
require.async(‘./b’, function(b) {});
加载动态 – 同步静态动态 – 异步动态 – 同步或异步
导出的对象副本引用
多次导出同一个对象
模块作用域文件文件文件
循环加载时加载已执行的部分开发者控制(玄学)
浏览器支持是否是是
node支持是否是
典型环境nodejs(babel,vue)requireJSSea.js
引用目录时找package.json定义的main,或index




                

语法	commonJS	ES6	AMD	CMD
导出	module.exports = {} exports = {}	export default {} export var a = 10	define(id?: String, dependencies?: String[], factory: Function(Object);	define(function(require, exports, module) {});
导入	require(‘module’)	import module from ‘module’	require([‘myModule’], function(myModule) {});	var a = require(‘./a’); require.async(‘./b’, function(b) {});
加载	动态 – 同步	静态	动态 – 异步	动态 – 同步或异步
导出的对象	副本	引用
多次导出	同一个对象
模块作用域	文件	文件	文件
循环加载时	加载已执行的部分	开发者控制(玄学)
浏览器支持	是	否	是	是
node支持	是	否		是
典型环境	nodejs	(babel,vue)	requireJS	Sea.js
引用目录时	找package.json定义的main,或index