ES6模块化-导入导出
什么是：
项目中一些程序代码经常被其他业务场景使用，为了避免重复开发，就把这些代码设置为共享模式，共享模式就是模块化。像jquery、axios、vue等等都是模块化的体现，需要的时候直接拿过来用即可
模块化技术有哪些：
CommonJS(nodejs)、ES6模块化、AMD、CMD等
CommonJS：
CommonJS模块化 是2009年发布的，是民间出品的，相对不正规，可以在nodejs中应用
// 导出
module.exports = 对象
// 导入
var obj = require(模块文件)
ES6模块化：
ES6模块化 是2015年官方正式出品的，已经被纳入到JavaScript标准里边，也是js未来的标准，由于各种原因 nodejs和浏览器中现在还不能直接使用ES6模块化，要相信未来可以
AMD模块化：
Asynchronous Module Definition 异步模块定义
2009年诞生，可以实现浏览器中应用模块化技术
CMD模块化：
Common Module Definition 通用模块定义
2011年诞生，阿里公司出品，可以实现浏览器中应用模块化技术
各个模块化应用的场合：
- commonjs模块化可以应用在nodejs中，浏览器中不可以
- es6模块化暂时还不能在nodejs 和 浏览器 中使用，但是要相信，未来可以
- 浏览器中可以运行的模块化名称为 AMD 和 CMD
AMD、CMD、Commonjs、ES6模块化介绍
注意：
重点掌握两种 ES6 和 CommonJS
默认导出和导入
目标：
掌握默认方式信息的导出、导入操作
什么是默认导出和导入：
数据提供者称为 导出
数据使用者称为 导入
在一个js文件中，通过一个对象把全部的数据导出出去，就是默认导出
对默认导出的成员进行接收就是默认导入
模块：
一个js文件就是一个模块，前提是该文件有做导出动作
导出语法：
// 导出：
export default 对象
导入语法：
// 导入：
import 名称 from 模块文件名字
注意：
- 一个模块中 默认导出 只能进行一次
- es6模块化现在只可以在VueCli项目中使用
- 默认必须 导出一个对象
示意案例：
01-默认导出.js
var a = 100
var b = 200
var c = 300
function getInfo(){
return 'hello'
}
// 当前文件对外部导出内容，以便被使用
// 01. 默认导出：通过一个大对象把所有的信息都导出出去
// CommonJS: module.exports = {}
// ES6: export default 对象
export default {
name:'kitty',
age:4,
walk:function(){
console.log('走直线')
}
}
main.js导入
// 01.默认导入
// import 名称 from '模块js文件路径名'
import cat from './modules/01-默认导出.js'
console.log(cat)
按需导出和导入
目标：
掌握按需方式信息导出、导入技术
什么是按需：
一个js模块中，定义了N多的成员信息，根据需要，用哪个就导出哪个，这就是按需
哪些成员可以做按需导出导入处理？
答： 常量、对象 、函数 三种信息可以做模块化应用 (var、let等变量用于模块化没有意义)
导出语法：
export const a = 10 // 常量
export function ab(){} // 函数
export const b = 20
export const cat = {name:'kitty',age:5} // 对象
...
注意：一般按需只做常量、函数导出，var/let变量不导出，本身没有意义
导入语法：
import {xx,yy,zz} from 模块文件
import {xx as kk,yy as mm,zz as qq} from 模块文件 // 根据需要可以设置别名
注意：
- xx,yy,zz代表被导入的成员名称，与导出的要求一致
- 成员不用全部都导入，根据需要，导入 1个或多个或全部 都可以
- 如果导入进来的成员名称 与 当前环境名称 有冲突，可以使用 as 设置别名
案例：
对按需导出、导入进行简单使用
导出：
// 02. 按需导出，根据需要导出相关的成员
// 语法： export 常量声明/函数声明/对象声明
// (module.exports.xx = yy)
var a = 100
var b = 200
let c = 300
function getInfo(){
return 'hello'
}
export const city = 'beijing'
const people = 2000
export function getApple(){
return '国光苹果'
}
function getPear(){
return '雪花梨'
}
export const tiger = {color:'yellow and black'}
const dog = {hobby:'看家'}
导入：
// 02. 按需导入
// import {名称，名称。。} from '模块文件'
import {city as ct,getApple,tiger} from './modules/02-按需导出.js'
console.log(ct)
console.log(getApple)
console.log(tiger)
默认和按需同时导出和导入
目标：
掌握 默认和按需 同时导出、导入技术
有时，在一个模块中 默认 和 按需 导出会同时存在
导出语法：
export const a = 10 // 按需导出
export function ab(){} // 按需导出
export default 对象/{} // 默认导出
export const b = 20
export function abc(){}
- 一个模块只能 默认导出一次，按需导入可以设置多次
- 默认导出 的语句没有摆放位置要求
导入语法：
// 1) 分别导入
import 名称 from 模块
import {xx,yy} from 模块
// 2) 一并导入
import 名称,{xx,yy} from 模块
一并导入必须是 默认在"前"，按需在"后"
案例：
对默认和按需同时导出和导入做简单应用
导出：
// 03. 默认和按需同时导出
// 语法： export 常量声明/函数声明/对象声明
// (module.exports.xx = yy)
var a = 100
var b = 200
let c = 300
function getInfo(){
return 'hello'
}
// 默认
export default {
banji:'92期前端'
}
// 按需
const city = 'beijing'
export const people = 2000
function getApple(){
return '国光苹果'
}
export function getPear(){
return '雪花梨'
}
const tiger = {color:'yellow and black'}
export const dog = {hobby:'看家'}
导入：
// 03. 默认和按需同时导入
// A. 分别导入(具体参考 01 和 02)
// import 名称 from 模块
// import {名称,名称……} from 模块
// B. 一并导入
// import 名称,{名称，名称……} from 模块
import obj,{people as pp,getPear} from './modules/03-默认和按需同时导出.js'
console.log(obj)
console.log(pp)
console.log(getPear)
没有导出应用
目标：
知道如何处理非模块文件
项目开发时有的文件没有做导出动作(例如 css、less)，这样文件可以称为为 非模块文件，那么可以通过如下方式做导入
import 文件路径名
使用示例：
导出：
// 4. 没有导出
for(var i=0; i<5; i++){
console.log(i)
}
导入：
// 4. 导入空的模块
// import xx模块名字
import './modules/04-没有导出.js'