407 ES6的模块语法 (基于webpack)

8.1 : export default 默认导出一个模块 ( 简单类型 + 复杂类型 )

导出 : export default

默认只能导出一个

let str = 'abc'
let num = 20;
let obj = { name : 'zs' }

export default num
// export default obj

导入 : import
导入的名字可以任意

// res 可以随便写 【比如，可以叫aaa】
import res from './a.js'  
console.log(res)

8.2 export 导出多个模块, 都放在一个对象里

**导出 : export **

// 逻辑模块 
// 登录一个函数 【这种写法，导入的时候，就要 import {}，用{}包裹。如果是export default，导入的时候，就 import XXX，不用{}包裹。】
export let login = () =>  {
  console.log('登录');
}
// 注册一个函数
export let register = () =>  {
  console.log('注册');
}

导入 : import

// 方式1
import * as res from './a'
console.log(res);
res.login()
res.register()

// 方式2
import { login,  register as reg } from './a'
login()
register()

8.3 import 模块

import axios from 'axios';

a.js

// 导出一些数据
let num = 30
let obj = { name: 'zs' }

// 只能导出一个 default 默认 只能有一个
export default num
export default obj

// 可以这样写
export default {
    num,
    obj
}


// 登录
let login = () => {

}


// --------------------------------



// 导出 登录函数
export let login = () => {
    console.log('login---')
}

// 导出注册函数
export let register = () => {
    console.log('register----')
}

mian.js

/**
 * 1. import + export default
 * 2. import + export
 * 3. import axios from 'axios'
 *
 * axios.get().then()
 */

/**
 * 1. import + export default
 *  import 引入
 *  export default  导出
 */

// res 可以随便写 【比如，可以叫aaa】
import aaa from './a.js'
console.log(aaa)


// ---------------------------------------- 


/**
 * 2. import + export  【export导出的是对象】
 */
//  export 导出的是一个对象 (登录+注册)
// 方式1 :
import * as res from './a.js'
console.log(res)
res.login()
res.register()

// 方式2 :
import { login, register as reg } from './a.js'

login()
reg()


// -----------------------


// 解构
let obj = {
    name: 'zs',
    age: 30
}

function test(obj) {
    // let n = obj.name
    // let a =  obj.a

    let { name: n, age } = obj
    console.log(n, age)
}

test(obj)

// 起别名 as 或者  :