模块化相关规范

1.1 模块化概述

传统开发模式的主要问题
① 命名冲突
② 文件依赖

通过模块化解决上述问题
①模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，可以通过特定的接口公开内部成员，也可以依赖别的模块 。
②模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 。

1.2 浏览器端模块化规范

1. AMD
Require.js (http://www.requirejs.cn/)
2. CMD
Sea.js (https://seajs.github.io/seajs/docs/)
（了解即可，不推荐使用）

1.3 服务器端模块化规范

CommonJS
① 模块分为 单文件模块 与 包。
② 模块成员导出：module.exports 和 exports 。
③ 模块成员导入：require(‘模块标识符’) 。

1.4 ES6模块化（重要）

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

ES6模块化规范中定义：
①每个 js 文件都是一个独立的模块 。
② 导入模块成员使用 import 关键字 。
③暴露模块成员使用 export 关键字 。

1.5 babel

node.js对ES6模块化支持不好，所以需要babel这个插件。
babel是个第三方的语法转换工具插件 ，可以把高级的有兼容性问题js代码转换成低级的无兼容性代码。
使用方法：
① npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
② npm install --save @babel/polyfill
③ 项目跟目录创建文件 babel.config.js
④ babel.config.js 文件内容如下侧代码
⑤ 通过 npx babel-node index.js 执行代码

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

1.6 ES6 模块化的基本语法

1. 默认导出 与 默认导入

默认导出语法： export default 默认导出的成员
默认导入语法： import 接收名称 from '模块标识符’

注：每个模块（文件）中只允许使用一次默认导出。

示例：

// 当前文件模块为 m1.js 
let a = 10;
let b = 20;
let c = 30;
function show() {
  console.log(111);
}
//默认导出
export default {
  a,
  b,
  show
};

//当前文件模块为 index.js  
默认导入
import m1 from "./m1.js";
console.log(m1); // { a: 10, b: 20, show: [Function: show] } 

2. 按需导出 与 按需导入

 按需导出语法 export let s1 = 10
 按需导入语法 import { s1 } from '模块标识符’

// 当前文件模块为 m1.js 
 
 s1 export let s1 = 'aaa'  // 向外按需导出变量
 s2 export let s2 = 'ccc'  // 向外按需导出变量
 say export function say = function() {} // 向外按需导出方法

当前文件模块为 index.js 
 // 导入模块成员   
 import { s1, s2 as ss2, say } from './m1.js' 
  console.log(s1) // 打印输出 aaa
  console.log(ss2) // 打印输出 ccc   
  console.log(say) // 打印输出 [Function: say]

3. 直接导入并执行模块代码

有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员。
此时，可以直接导入并执行模块代码

语法：import '代码标识符’

// 当前文件模块为 m2.js 
 
// 在当前模块中执行一个 for 循环操作 
for(let i = 0; i < 3; i++) { 
  console.log(i) 
} 

当前文件模块为 index.js 
// 直接导入并执行模块代码   
import './m2.js'

内容源于某培训机构教学PPT，经个人整理后发布，侵删！