模块封装代码

  • 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'