模块化开发

• 1. 就是将功能拆分开, 每个功能写到一个 js 文件中 后续根据实际需求,将不同的 js 文件拼接到一起
• 2. 将多个逻辑分别写到多个js 文件中 每个人文件, 都只能使用当前文件内变量 , 每个文件都是一个独立的作用域(文件作用域)

ES6使用 模块化开发的前提

•  1. 页面必须使用 服务器的形式打开
  

•  2. script 标签行内 必须配置 type="module"
  

•  如果想要拼接的话, 需要导入别的文件到自己文件内 前提: 导入的文件, 必须有导出的内容
  

•   导出: 向外部暴露出一些内容, 可以是变量, 也可以是函数
  

•   导入: 引入别的文件向外部暴露出的那些内容
  

功能整合

• 1. 引入文件 import XXX form '文件路径'
• 1.1引入方式1 import headerFn from "./header.js"; 这种引入方式, 只能引入 导出方式1(默认导出)
• 1.2引入方式2 import { obj, arr } from "./header.js"; 这种引入方式, 只能引入 导出方式2
• 1.3引入方式3
  import * as color from "./content.js"; // 将 content.js 内 导出的内容, 全部存放到 变量 color

2. 使用引入文件中暴露出来变量或方法

• headerFn()