es6导出导入语法(一篇就够)

模块封装代码

• javascript用 “共享一切的” 方法加载代码，是这门语言最容易出错的地方。
• Web应用程序变得更加复杂，JavaScript代码的使用量也开始增长，变量命名足以让人头秃。
• ECMAScript 6的一个目标是解决作用域问题，也为了使JavaScript应用程序显得有序，于是引进了模块

默认导出与默认导入(注意：默认导出在一个模块中只能有一次)

//导出
let a = 10
let c = 20
let d = 30
function show() {
    
    
  console.log('1111111111111')
}
export default {
    
    
  a,
  c,
  show
}
//导入
import m1  from './m1.js'

//导入之后m1结果
{
    
    a: 10,c:20,show:[Function: show]}

按需导出与按需导入

//1、声明赋值的时候直接进行一个导出----------------------
//导出数据
export var color = "red"
export let name = "fanfusuzi"
export const num = 6
//导出函数
export function getSum (num1,num2) {
    
    
	returm num1 + num2
}
//接收
import m1, {
    
     color, name as name2, num, getSum } from './m1.js' //as是将name重新命名为name2

//这个函数将是模块私有的
const getCarouselImg = () => {
    
    
  return request({
    
    
    method: 'get',
    url: '/teaHouse/banner/selectList'
  })
}

//2、先进行一个声明赋值，然后进行一个导出------------
function multiplay(num1,num2) {
    
    
	return num1 * num2
}
export multiply

直接导入并执行模块代码

//m2
for (let i = 0; i < 3; i++) {
    
    
  console.log(i)
}
import './m2.js'