前端模块化规范
1. 有哪些规范
ES6、
服务器端模块化规范:CommonJS、
浏览器端模块化规范:AMD、CMD
在ES6提出之前,JS社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范,这些社区提出的模块化标准,还是存在一定的差异性与局限性,并不是浏览器与服务器通用的模块化标准,例如:
- AMD和CMD只适用于浏览器端的JavaScript模块化
- CommonJS是在node中实现的,也就是node环境中可以支持require和exports,但是在浏览器环境中,是不支持的。只适用于服务器端的JavaScript模块化
2. 为什么会有模块化规范(背景是什么)
随着ajax异步请求的出现,慢慢形成了前后端分离
a. 客户端要完成的事情越来越多,代码量也与日俱增
b. 为了应对代码量的剧增,通常会将代码组织在多个js文件中,进行维护
c. 但这种维护方式,依然不能避免一些灾难性的问题,比如全局变量重名问
这种代码的编写方式对js文件的依赖顺序几乎是强制性的。等等
传统开发模式的主要问题:
- 命名冲突
- 文件依赖
3. 通过模块化,解决了什么问题
模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块
模块化开发的好处:
方便代码的复用,从而提高开发效率,方便后期维护
4. 各个模块的区别
a. AMD规范是通过Require.js实现的,
- 这种方案采用异步加载的方式来加载模块,模块的加载不影响后面语句的执行
- 所有依赖这个模块的语句都定义在一个回调函数里,等到加载完成后再执行回调函数。require.js 实现了 AMD 规范
b. CMD是阿里开发的,SeaJS实现了CMD规范
- 这种方案和 AMD 方案都是为了解决异步模块加载的问题,sea.js 实现了 CMD 规范
- 它和require.js的区别在于模块定义时对依赖的处理不同和对依赖模块的执行时机的处理不同
c. CommonJS:node.js原生就支持commonJS的规范
它通过 require 来引入模块,通过 module.exports 定义模块的输出接口
这种模块加载方案是服务器端的解决方案,它是以同步的方式来引入模块的
因为在服务端文件都存储在本地磁盘,所以读取非常快,所以以同步的方式加载没有问题
但如果是在浏览器端,由于模块的加载是使用网络请求,因此使用异步加载的方式更加合适
d.ES6:使用 import 和 export 的形式来导入导出模块
需要安装一些加载插件:babel-cli,babel-preset-es2015和browserify。
babel-cli主要是实现命令行,执行babel指令可以运行;
babel-preset-es2015: 把ES6转成ES5的工具,babel不仅可以完成es6转es5,还能转其他的,转啥就下载啥,所以这里就需要下载这个babel-preset-es2015。因为前面写的js文件,首先浏览器根本就不认识ES6的语法,因此需要babel来转成es5,另外,需要把它弄到浏览器环境中能执行,所以必须browserify
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期(2025年3.1-3.9)
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异