ES6模块化详解：export与import的使用及核心特性

前端模块化发展历程

在ES6标准推出之前，前端开发者主要依赖RequireJS或SeaJS等工具库来实现模块化开发。其中，RequireJS遵循AMD（异步模块定义）规范，而SeaJS则基于CMD（通用模块定义）规范。这两种工具库的出现，旨在推动前端模块化开发的普及与标准化。关于AMD与CMD规范的详细区别，可参考后续提供的相关链接。

随着ES6标准的发布，JavaScript原生内置了模块化支持，这是JS语言首次正式支持module概念。此后，开发者可以直接在浏览器环境中使用import语句导入模块，使用export语句导出模块，实现模块间的交互。在ES6规范中，一个独立的JS文件即被视为一个完整的JS模块。

目前，不同现代浏览器对原生模块（module）的支持程度存在差异。为了兼容旧版环境或确保代码的广泛适用性，开发者通常使用BabelJS或Traceur等编译工具，将ES6语法的代码转换为兼容ES5版本的JavaScript代码。

前端模块化概述

前端模块化

1. 模块化的好处

自前后端分离架构流行以来，前端工程化成为高频话题。前端工程化是一种宏观的开发理念，主要涵盖模块化、组件化、规范化与自动化四个维度。其中，模块化和组件化是工程化理念下更为具体的开发实践形式，因此可以简单地将模块化和组件化视为前端工程化的具体体现。

模块化带来的好处：

1. 避免变量污染，解决命名冲突问题。 2. 提高代码复用率，减少重复开发。 3. 提高代码维护性，使逻辑更清晰。 4. 有效管理依赖关系，降低耦合度。

模块化的定义与方案

2. 什么是模块化？

具体而言，模块化是指将实现特定功能的JS代码封装为一个独立单元。若该功能在项目多处需要复用，即可将其定义为模块，通过模块化方式编写，既实现复用又便于分而治之。同理，CSS模块化也可通过Less、Sass或Stylus等预处理器的import或mixin特性来实现。常见的JS模块化方案包括AMD、CommonJS、UMD及ES6 Module等，具体技术细节建议读者自行深入学习。

ES6前的模块化方案

3. 没有ES6模块化之前是怎么表达模块化的？

在ES6标准实施前，前端主要通过RequireJS或SeaJS来实现模块化。RequireJS基于AMD规范，SeaJS基于CMD规范，两者均作为推广前端模块化的工具库存在，解决了早期JavaScript缺乏原生模块支持的问题。

ES6模块化机制

4. ES6的模块化

ES6标准引入了原生模块化支持，这是JavaScript语言历史上首次内置module功能。开发者现在可以直接在浏览器中使用import语句导入模块，使用export语句导出模块，实现模块间的无缝交互。在此规范下，每个JS文件代表一个独立的JS模块。

ES6的模块化的基本规则或特点：

1. 每个模块仅加载一次，每个JS文件仅执行一次。若后续再次加载同一目录下的相同文件，系统会直接从内存中读取结果。 2. 模块内声明的变量均为局部变量，不会污染全局作用域。 3. 模块内部的变量或函数可通过export语句导出供外部使用。 4. 一个模块可以通过import语句导入其他模块的功能。 5. ES6模块默认采用严格模式（strict mode）。 6. 模块顶级作用域中的this值为undefined。 7. 任何需要在外部访问的部分，必须通过export显式导出。

5.实际应用

// 普通的使用
  export var a = '1'
  export function sum(num1,num2){
    return num1+num2
  }
  
  import a from './a.js'
  import {sum} from './sum.js'
// 重命名导出与导入
  function sum(num1,num2){
    return num1+num2
  }
  export {sum as add}
  
  import {add as sum} from './sum.js'
  
// 模块的默认值

  export default function(num1,num2) {
    return num1 + num2
  }
  
// 在script标签中使用模块

  <script type="module" src="module.js"></script>
  <script type="module">
  import a from '../b.js'
  </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。