前端模块化开发
一：模块化规范的出现
- CommonJS规范(nodeJS提出的一套标准)
- 就是一个文件一个模块,每个模块都有单独的作用域
- 通过module.exports导出成员,通过require函数载入成员
- CommonJS是以同步的方式去加载模块,所以这种方式再node中不会有问题,但是在浏览器会出现问题,这会导致浏览器效率低下,因为页面每次加载会导致大量的同步模块加载
- AMD(require.js)
- AMD使用起来比较复杂,它需要使用dwfind，require函数等
- 模块划分比较细的话,模块JS文件请求频繁导致页面效率低下
- Sea.js + CMD
- ES Modules
二：模块化标准规范
- 模块化的最佳实现就是在不同环境使用不同的标准
- 在node环境中遵循CommonJS规范
- 在浏览器环境中遵循ES Modules
三：ES-Module特性
- 在script标签中的type中添加module(type='module')
- ES Module自动采用严格模式,忽略 ‘use strict’
- 每个ES Module都是运行在单独的私有作用域中
- ES Module是通过CORS的方式去请求外部JS模块的,外部文件的地址需要支持CORS
- ES Module的script标签会延迟执行脚本(相当于defer)
四：ES-Module导出
- 关键字：export
- export
- export default
五：ES-Module导入导出的注意事项
- 导出的不是字面量对象,这是ES Modules的语法（export {}）
- 导入的时候也不是解构,这是ES Modules得到语法（import {}）
- 对外暴露成员，是暴露应用关系，而不是复制一份给予，并且是只读不能修改
六：ES-Module导入用法
- 后面的路径必须是完整的路径名称(例如 .js)
- 文件路径的./不能省略，否则ES Module会认为这是在加载第三方模块
- 文件路径可以是网络地址，可以引用cdn上的模块文件
- 如果不提去成员，只加载模块的话可以(import {这里不写成员} from 路径，或者import import '路径' 省略{} )
- 如果导入的成员特别多可以使用 * （import * as mod from '路径'）这里表示将所有提取出来的成员放到了对象当中
- 动态加载模块import函数---import('路径'),这个函数返回的是一个promise对象
- 同时导出默认成员和命名成员,可以适应以下的方式
