ES6模块规范

模块化

• 指在解决某写复杂问题时 依照一种分类的思维把问题进行系统性的文杰以处理
• 模块化是一种处理复杂紫铜分解为代码结构更合理 可维护性更高的可管理的模块的方法

ES6的模块规范 （ESModule）为了弥补js没有模块系统 提出的优化方案

ES6的模块化主要依靠export 和 import两个指令完成的 此外页面中引入JS的script标签也要指定type=‘module’

• export导出 用于规定模块的对外接口
  • 单个导出

  export var name = 'zhang'
  export let i = 1;
  export const j = 2;
  export function sum(a,b){
      return a + b;
  }
  

  • 批量导出 优先使用

  export {name, age, job, x, y, sum, Teacher}
  
  

import 导入 同步导入 是静态的 发生在js执行之前 定义了模块的对外接口以后 js就可以通过import命令加载这个模块

import {name} from '../1.js'

from后面指定文件的位置 可以是相对路径也可以是绝对路径

导出内容的重命名 用as

import {name as n}from '../1.js'

export-default 导出模块 指定模块的默认导出 一个模块只能有一个export default 若有多个会报错

导入默认导出模块时 不再写花括号

import() 方法 动态导入 返回一个promise对象 可以直接.then 在then的第一个回调的参数 就是模块中导出的内容

import('./1.js').then((res)=>{
    console.log(1)
})

##动态导入模块的场景

• 按需加载 若在点击或者滑动的时候再去加载某个模块
• 条件加载 若条件为true 加载默认模块 否则 加载另一个模块
• 模块的路径是动态的 如通过ajax请求从服务器端获取

动态加载多个模块 Promise.all()

Promise.all([
  import('./1-export.js'),
  import('./2-export.js')
]).then((arr) => {
  console.log(arr);
});

import() 和async函数 通过await直接获取动态导入的内容

async function get() {
  let one = await import('./1-export.js');
  return one;
}

get().then(res => {
  console.log('res');
  console.log(res)
});