es6的模块化

es6的模块化

import 导入

export 导出

es6的写法

<script type='module'></script>

一个内容如果需要导入 必须先导出

第一种写法

export导出

//对象
const obj = {
    username:"jack",
    password:'123'
}
//函数
const sayHello = ()=>{
    console.log('hello');
}
//值
const message = '这个是一个信息'
//数组
const arr = [1,2,3,4]

//变量的接的数据 需要导出必须用{}
export {
    obj,
    sayHello,
    message,
    arr
}

import导入

import {
    obj,
    sayHello,
    message,
    arr
} from './a.js'  //解构
sayHello()

console.log(`obj`, obj);
console.log(`message`, message);
console.log(`arr`, arr);

第二种写法

export 导出

export const obj = {
        username:"jack",
        password:'123'
    }
export const sayHello = ()=>{
    console.log('hello');
}
export const arr = [1,2,3,4]
export const message = '这个是一个信息'

import 导入

//* 表示所有的 as取别名(随便取)
import * as hello from './a.js' 
hello.sayHello()

console.log(`obj`, hello.obj);
console.log(`message`, hello.message);
console.log(`arr`, hello.arr);

第三种写法

export 导出

export default {
    obj,
    sayHello,
    message,
    arr
}

import 导入

import a from './a.js' 
a.sayHello()

console.log(`obj`, a.obj);
console.log(`message`, a.message);
console.log(`arr`, a.arr);

总结

export 导出内容

• export const 对应的变量
• export default 对应的变量
• export {}

import 导入内容

• import 变量名 from 文件地址 （所有的话 * 必须取别名 as）