【笔记】再学JavaScript ES(6-10)全版本语法——模块化设计（导入&导出）

---

模块化设计（导入&导出）

导出

// 各种类型的变量导出
export const string1 = 'export const'
export let string2 = 'export let'
export var string3 = 'export var'
export const number = 123
export const boolean = true
export const array = [1, 2, 3]
export const obj1 = {
  A: 'a',
  B: 'b'
}
export function f1 () {
  console.log('f1')
}
export class Class1 {
  constructor () {
    this.id = 1
  }
}

const string4 = 'export'
const string5 = 'export default5'
const obj2 = {
  C: 'c',
  D: 'd'
}
const obj3 = {
  E: 'e',
  F: 'f'
}
function f2 () {
  console.log('f2')
}
function f3 () {
  console.log('f3')
}
class Class2 {
  constructor () {
    this.id = 2
  }
}
class Class3 {
  constructor () {
    this.id = 3
  }
}

// 统一导出
export {
  string4,
  obj2,
  f2,
  Class2
}

// 默认导出（以对象形式，一个文件中只能有一个）
export default {
  string5,
  obj3,
  f3,
  Class3
}

导入

// 默认导出不需要加{}，非默认导出需加{}
// 默认导出允许自定义变量名, 非默认导出需要通过as来自定义变量名
import defaults,
{
  string1, string2 as string20, string3, string4,
  number, boolean, array, obj1, obj2, f1, f2, Class1, Class2
}
  from './1.js'
// 也可以使用 import * as Mode from './1.js',下面使用 Mode.变量名 来调用
// 这种方式default需要使用Mode.default来调用

console.log(
  string1, string20, string3, string4,
  number, boolean, array, obj1, obj2, f1, f2, Class1, Class2,
  defaults
)

// 将默认导出整个解构出来(需要注意的是，这里变量名必须要和导出前的保持一致)
let { string5, obj3, f3, Class3 } = defaults
console.log(string5, obj3, f3, Class3)

问题解决

报错：Uncaught SyntaxError: Cannot use import statement outside a module
解决：script标签加 type="module"：

注：

• 导入时类解构写法是import特有的语法格式并不是真正的解构
• 只支持静态的导入和导出，即必须在编译时就能确定，在运行时才能确定的是不行的
• 导出的内容在本文件中依旧可以正常使用