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

Posted 2021-03-04 Keep going

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

• 导出 : export default

• 默认 只能导出一个

  let str = ‘abc‘
  let num = 20;
  let obj = { name : ‘zs‘ }
  
  export default num
  // export default obj
  

  ---

• 导入 : import

• 导入的名字可以任意

• import res from ‘./a.js‘
  console.log(res)
  

---

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

• **导出 : export **

• // 逻辑模块 
  // 登录一个函数
  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 可以随便写
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 或者  :