• 模块化思想：代码组织方式，按功能划分模块。
    • 模块化规范：
      • 一个文件就是一个模块
      • 每个模块都有单独作用域
      • 通过module.exports导出成员
      • require载入模块
    • 过程：
    • commonjs是以同步方式加载模块。先加载。在浏览器端效率低下

    • AMD为浏览器设计，异步模块规范

      • require.js载入模块

        1. require(['./module1'],function(module1){
        2. module1.start()
        3. })

      • define定义模块

        1. define('module1',['jquery','./module2'],function($,module2){ //用define去定义
        2. return{ // 通过return导出成员
        3. }
        4. })

      • AMD使用起来比较复杂。模块多的话对js文件请求频繁。

      • 前端模块化演进的一步
    • 历史还有sea.js +cmd
    • 模块化的最佳实践：
      • 在nodejs 中采用 CommonJS
      • 在浏览中采用ES Modules规范（ES6中定义的模块系统。存在环境兼容问题。随着webpack等打包工具解决兼容问题。现在浏览开始支持）
    • ES Modules
      • 基本特性：
        • 1.自动进入严格模式，忽略’use strict’
        • 2.每个ES Module运行在私有环境。不担心样式污染
        • 3.外部的JS方式通过CORS跨域方法请求，请求地址必须支持CORS
        • 4.ESM 会自动延迟执行脚本 页面先加载
      • 模块导入和导入
        • 通过 export 和 import完成 ```javascript var name = “foo module” function hello() { console.log(“hello”) }

    export { name, hello } //可以通过重命名改变名称，如果是default时候，是默认的，导入的时候必须重命名 export {name as forName ,hello as default } export default name //或者这样默认导入 import {name,hello} from ‘./module.js’ import {forName , default as nihao} form ‘’ //default重命名 import abc form ‘’ //导入的时候直接 变量名就可以

    2. - 注意事项
    3. ```javascript
    4. export { name , hello} //这个地方不是字面量对象 是固定的语法 导出的是成员的引用，而不是复制一份出去。
    5. //导出的是只读的。不能修改。
    6. //导出对象字面量用default
    7. export default {name,hello}
    9. import {name,hell0} from "" //这个地方也不是解构
    10. //name只读不能修改
    • ES Modules导入
      • 导入的时候 ./不能省略或者模块的完整路径或url
      • 如果只需要执行某个模块，不需要引用
        • import {} from ‘./module.js’
        • import ‘./module.js’
      • 导入全部
        • import * as module form ‘’
      • 在代码执行的时候，导入模块。不能使用Import import必须在顶层
        • 动态导入模块
        • 全局的Import函数
          • import(‘./module.js’).then(function(module){})
      • 在模块中同时导出默认和命名成员
        • 同样按照上述 重命名方式导入
        • 简写：
          • 通过在{ } 之前逗号分隔，逗号左边是默认的成员
            • import xxx,{name,age} from ‘’ 名字可以随意取
      • 直接导出导入成员
        • 将import 改为 export 直接导入同时导出
    • 解决运行环境兼容性问题
      • 开发阶段测试
        • 引入时加入nomodule属性
        • borwser-es-module-loader
        • IE:promise-polyfill
      • 正确做法还是编译
    • 在Node.js的兼容情况
      • 改文件名 .mjs
      • 指令 node —experimental-modules
    • ES Modules in Node.js 和 commonjs差异
      • ESM中没有commonjs的模块全局成员
        • 没有require,module,exports,filename,dirname
        • 分别用import url 模块中fileURLToPath,拿到当前文件的绝对路径
          • import {fileURLToPath} from ‘url’
          • __filename = fileURLToPath(import.meta.url)
        • import {dirname } from ‘path’ const dirname = dirname（filename）
    • node 新版本跟支持es module
      • 加一个package.json 加入 ‘type’:’module’ 不需要改文件名
      • 此时不能用commonjs，修改文件名.cjs
    • babel兼容方案