大前端之——ES6模块化标准

一、ES6简介

ECMAScript 6是JavaScript语言的标准，简称ES6。编写符合ES6规范的JavaScript代码能够提高程序的可读性，提高代码的可利用性。

二、ES6模块化基本语法

1. 默认导入与默认导出

• 默认导出语法 export default {}
• 默认导入语法 import 名称 from '模块标识符’

默认导出实例

let a = 10
let b = 20
let c = 30

function show() {
    console.log('11111123')
}

export default {
    a,
    c,
    show
}

默认接收实例

// console.log('ok')
import m1 from './m1'

console.log(m1)

默认导出的a, c, show都可以被默认导入接收到，而没有导出的c无法被接收。

2. 按需导出和按需导入

• 按需导出语法export let a = 10
• 按需导入语法 import {a, b, …} from '模块标识’

按需导出实例

export let s1 = 'aaa'
export let s2 = 'bbb'
export let s3 = 'ccc'

按需导入实例

import { s1, s2, s3 } from './m1'
console.log(s1)
console.log(s2)
console.log(s3)

• 细节，按需导入时，还可以通过as关键字起别名

import { s1, s2 as a, s3 } from './m1'
// console.log(m1)
console.log(s1)
console.log(a)
console.log(s3)

运行结果没有变化

3. 直接执行导入模块代码

这个概念有点类似于匿名对象的使用，即不需要接收，只需要执行模块中的代码

实例

for (let i = 0; i < 10; i++) {
    console.log(i)
}

import './m2.js'

import './m2.js’后m2中的代码被执行了