js 模块化

最新推荐文章于 2024-08-08 18:47:52 发布

小码哥・Martin

最新推荐文章于 2024-08-08 18:47:52 发布

阅读量259

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/php_martin/article/details/125855397

版权

本文介绍了JavaScript的四种模块化方案：CommonJS、AMD、CMD和ES6模块。CommonJS适用于服务器端，采用同步加载，而AMD（如require.js）和CMD（如sea.js）为异步加载，分别有不同的依赖处理方式。ES6模块通过import和export提供静态导出和导入。文章还探讨了它们之间的区别和优缺点，以及对模块化开发的理解。

摘要由CSDN通过智能技术生成

js 中现在比较成熟的有四种模块加载方案：

第一种是 CommonJS 方案，它通过 require 来引入模块，通过 module.exports 定义模块的输出接口。这种模块加载方案是服务器端的解决方案，它是以同步的方式来引入模块的，因为在服务端文件都存储在本地磁盘，所以读取非常快，所以以同步的方式加载没有问题。但如果是在浏览器端，由于模块的加载是使用网络请求，因此使用异步加载的方式更加合适。
第二种是 AMD 方案，这种方案采用异步加载的方式来加载模块，模块的加载不影响后面语句的执行，所有依赖这个模块的语句都定义在一个回调函数里，等到加载完成后再执行回调函数。require.js 实现了 AMD 规范
第三种是 CMD 方案，这种方案和 AMD 方案都是为了解决异步模块加载的问题，sea.js 实现了 CMD 规范。它和require.js的区别在于模块定义时对依赖的处理不同和对依赖模块的执行时机的处理不同。
第四种方案是 ES6 提出的方案，使用 import 和 export 的形式来导入导出模块

在有 Babel 的情况下，我们可以直接使用 ES6的模块化

// file a.js
export function a() {
   }
export function b() {
   }
// file b.js
export default function() {
   }

import {
   a, b} from './a.js'
import XXX from './b.js'