ES6模块化规范

文件目录

模块化就是导入导出的过程

-----------------------------------------------------------------------------------------------

a.js 一个一个的导出 export

export function fn() {
    console.log('fn')
}
export const name = 'a'
export const obj = {
    name: 'zhangsan'
}

index.js----------导入import { fn, name, obj } from './a' 

import { fn, name, obj } from './a' //解构赋值
console.log(name)
console.log(obj)

--------------------------------------------------------------------------------------------

b.js----批量导出 需要注意的是

export {
    fn: fn, //key和value值一样就可以简写fn
    name: name,
    obj: obj
}

function fn() {
    console.log('fn')
}
const name = 'a'

const obj = {
    name: 'zhangsan'
}
export {
    fn,
    name,
    obj
}

index.js

import { fn, name, obj } from './b'
fn()
console.log(name)
console.log(obj)

--------------------------------------------------------------------------------------------

c.js ----export default 默认导出一个的话，，index.js导入获取的话就只能import xxx from './c'

const xxx = {
    name: 'xxx'
}
export default xxx

index.js

import xxx from './c'
console.log(xxx)

 

d.js-----用export default 导出多个的话，index.js导入的话也只能用import d from './d'

function fn() {
    console.log('fn')
}
const name = 'a'

const obj = {
    name: 'zhangsan'
}
export default{
    fn,
    name,
    obj
}

index.js，获取

import d from './d'
d.fn()
console.log(d.name)
console.log(d.obj)