一文让你彻底搞清楚javascript中的require、import与export

主要给大家介绍了关于javascript中require、import与export的相关资料，文中通过示例代码介绍的非常详细，对打击大的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。 JavaScript中的模块化是编程实践中必不可少的一部分，它允许我们将复杂的代码结构划分为独立的、可重用的部分，称为模块。在JavaScript的历史中，由于其最初设计的局限性，没有内置的模块系统。直到ES6（ECMAScript 2015）引入了`import`和`export`语法，JavaScript的模块化才有了官方支持。但在那之前，社区发展出了两种主流的模块规范：CommonJS和AMD。 **CommonJS规范** 是Node.js中使用的模块系统，它允许在Node.js环境中进行服务器端的模块化编程。在CommonJS中，模块的导出和导入分别通过`module.exports`和`exports`对象完成，它们之间的区别在于`module.exports`是直接设置模块的输出值，而`exports`实际上是`module.exports`的一个快捷引用，如果直接修改`exports`，它将不会影响`module.exports`。模块的加载是同步的，这意味着在执行到`require()`时，整个模块会被加载并执行完毕。 ```javascript // 导出模块 module.exports = { add: function(a, b) { return a + b; } }; // 引入模块 var math = require('./math'); math.add(2, 3); // 输出5 ``` **AMD（Asynchronous Module Definition）规范** 主要是为了解决浏览器环境中的异步加载问题。AMD由RequireJS推广，它允许模块和依赖可以并行加载，提高了加载效率。AMD的`require`函数接受两个参数，一个是依赖的模块，另一个是回调函数，回调函数接收已加载的模块作为参数。 ```javascript // 定义模块 define('math', [], function() { return { add: function(a, b) { return a + b; } }; }); // 异步加载模块 require(['math'], function(math) { math.add(2, 3); // 输出5 }); ``` **ES6的`import`和`export`** 是ECMAScript标准的一部分，提供了更简洁的模块语法。`export`用来导出模块中的变量或函数，而`import`则用来导入这些导出的成员。与CommonJS和AMD不同，`import`是静态的，即在编译时就已经确定，因此它是异步的，不能在运行时动态导入。 ```javascript // 导出模块 export const add = (a, b) => a + b; // 导入模块 import { add } from './math'; console.log(add(2, 3)); // 输出5 ``` 在JavaScript中，`require`通常与CommonJS相关，用于Node.js环境；`import`和`export`是ES6的标准，适用于Node.js（需开启实验特性）和现代浏览器。AMD规范主要用于浏览器环境，特别是大型前端应用，以实现异步加载和管理依赖。 总结来说，`require`、`import`和`export`是JavaScript模块化编程的关键组成部分，它们各自代表了不同时期和不同场景下的解决方案。理解它们的工作原理和用法对于编写可维护、可复用的代码至关重要。随着技术的发展，现在推荐使用ES6的`import`和`export`，因为它更加符合现代JavaScript开发的需求，并且被广泛支持。