模块化技术比较与应用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45271323/article/details/106092125

本文探讨了不同模块化方案的差异，包括CommonJS、AMD、ES6 Modules等，分析了它们的使用场景、加载机制及其在实际项目中的优缺点。通过对模块化技术的深入理解，有助于提升代码组织效率和项目的可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.AMD是requireJS在推广过程中对模块的规范化产出，是一个概念。

amd推崇依赖前置 ---> 
依赖必须一开始就要写好 （生活的案例，打开3个标签页，每个标签页提前放好1，2，3集）

define(['./a','./b'],function(a,b){

	a.doSomething()

	//写了100行代码

   b.doSomething()

})



2.CMD是 seaJS在推广过程中对模块定义的规范化的产出

cmd推崇依赖就近--->内部用到某个依赖模块了再去进行单独的引入（异步加载  用在浏览器端）

define(function(require,exports,module){

	var a = require("./a")

	a.doSomething()

   //写了100行代码

   var b = require("./b")

	b.doSomething()

})



3.跟esmodule的区别

if(true){

	//这句代码是否可行？这是不行的！不能在逻辑里面通过这种方式引入代码

   //静态引入  webpack内部推荐esmodule的方式引入模块，内部打包速度快

	import a from "a"  

  

    //amd.cmd这种方式称之为动态引入，可以根据逻辑引入不同的功能模块

    require("./a") //这句代码是可行的

}
ES6实现了模块化，于是告别了基于commonjs的标准，
使用require.js的AMD模式和sea.js的CMD模式来实现模块化的古老方式。

模块化主要基于export（导出，还有export default）和import（引用，还有import * as）
两个关键字来实现，这就为JS引入了一个相对容易理解的封装的概念（可以优雅的通过关键字原生实现）

export定义了对外开放的接口，import定义了引用哪些接口。
模块化为js创建了比较容易理解的命名空间，防止函数的命名冲突。

 

现在使用频率最高的，也是大家公认的好的模块化规范，是CommonJS。 后端（node.js）
CommonJS就很简单了，一个js文件要输出去，只需使用module.export={xxx:你要输出的内容}，
而在另外一个js中，你要引用什么，就通过var xxxx=require("xxxx")引用进来就行了，
这玩意并不是异步加载模块，而是同步一次性加载出来。

模块化的差异