码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-03-24 13:10:02      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:多个   bpa   模块   console   rom   导出   func   webp   一个   

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 或者  :

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

标签:多个   bpa   模块   console   rom   导出   func   webp   一个   

原文地址:https://www.cnblogs.com/jianjie/p/12557971.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!