前端模块化规范

概述

• 传统开发模式的主要问题： 命名冲突，文件依赖
• 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块
• 好处：方便代码的重用，提升开发效率，方便后期维护，避免变量污染

浏览器端模块化规范

AMD

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出，是异步加载模块，支持对象 函数 构造器 字符串 JSON等各种类型的模块。

用define方法定义模块。

CMD

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

CMD和AMD的区别有以下几点：

1. 对于依赖的模块AMD是提前执行，CMD是延迟执行。
2. CMD推崇依赖就近，AMD推崇依赖前置。

服务器端模块化规范

CommonJS

该规范最初是用在服务器端NodeJS中，前端的webpack也是对CommonJS原生支持的，每一个文件就是一个模块，其内部定义的变量是属于这个模块的，不会对外暴露。

CommonJS的核心思想就是通过 require 方法来同步加载所要依赖的其他模块，然后通过 exports 或者 module.exports 来导出需要暴露的接口

ES6模块化规范

Es6模块化规范是浏览器端与服务器端通用的模块化开发规范

ES6模块化规范中定义：

• 每个js文件都是一个独立的模块
• 导入模块成员使用import关键字
• 暴露模块成员使用export关键字

Node.js中通过babel体验ES6模块化

1. 打开终端，输入命令

   npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
   npm install --save @babel/polyfill
   

2. 项目根目录创建文件babel.config.js

   const presets = [
     ["@babel/env",{
       targets:{
       edge:"17",
       firefox:"60",
       chrome:"67",
       safari:"11.1"
       }
     }]
   ]
   //暴露
   module.exports = { presets }
   

3. 执行代码

   npx babel-node ./index.js
   

ES6模块化基本语法

默认导出与默认导入

• 默认导出语法export default
• 默认导入语法 import 接收名称 from '模块标识符'

注意：每个模块只允许使用一次export default，否则会报错

按需导出与按需导入

• 按需导出语法

  export let s = 'jj'
  export function say() = function(){}
  

• 按需导入语法

  import {say , s2 as s} from './index.js'
  

直接导入并执行模块代码

文件模块不需要export，导入模块直接使用

import './index.js'