一、什么是模块化开发

传统开发主要问题
1.命名冲突，多个js文件种的全局变量有冲突问题。
2.文件依赖，多个js文件必须按顺序下载

于是引申出模块化开发
模块化开发就是把单独的一个功能封装到一个模块（文件中），模块之间相互隔离，但是可以通过特点的接口公开内部成员，可以依赖别的模块

二、模块化开发规范

1.AMD规范

浏览器端的模块化
Require.js

2.CMD规范

Sea.js

3.CommonJS

node模块化开发的规范
1.模块分为单文件模块和包
2.模块成员导出：module.export和exports
3.模块成员导入：require(‘模块标识符’)

4.ES6模块化规范

上面的三种都存在一定的差异性和局限性，并不是浏览器和服务通用的模块化标准
amd和cmd只适用于浏览器端的js模块化
commonJS适用于服务器端的js模块化

因此，es6语法规范中，在语言层面上定义了es6模块化规范，是浏览器的和服务器端通用的模块化开发规范，

es6模块化规范中定义：
每个js文件都是一个独立的模块
导入模块成员使用import关键字
暴露模块成员使用export关键字
这是大一统的模块化规范，都使用这个。

三、模块的导出和导入

1.默认导出和默认导入

//当前文件时dochu.js
//这是定义的这个模块的私有成员

let a = 10
let b = 15
let c = 20
function fn(){
    
    }


//export default是导出这个模块，即这个文件，并将私有的成员，放在这个模块对象中，暴露出去。
//没有添加到这个模块对象中的成员，外界是访问不到的。比如b这个变量
export default {
    
    
    a,
    c,
    fn
}
//一个模块中只能有一个export default这个命令，多了会报错。
//要是一个都没有，不会报错，外界引入的是一个空对象。

//这是默认导入文件，daoru.js
import   m  from './doachu.js'
//m是用来接受这个模块的对象的一个名称，相当于一个变量名，自己定义，合法即可
console.log(m)
//{a:10,c:20,fn:funciton(){}}

2.模块的按需导出和按需导出

//当前文件时daochu.js

//这是按需导出变量a
export let a = 10
//这是按需导出变量b
export let b = 20
//按需导出方法
export function say = function(){
    
    }

//当前文件是daoru.js
import {
    
     a,b,say}  from    ' daochu.js'


//按需导入的名称一定要和按需导出的名称一致，不能乱写

3.两者结合使用

一个模块中可以同时拥有按需导出和默认导出，按需导出可以是多个，而默认导出只能有一个

//当前是daochu.js
let a = 10
let b = 20
function fn(){
    
    }

export default{
    
    
a,
b,
fn
}
export let c = 30

export function fn2(){
    
    }

//当前是daoru.js
import m1,{
    
    c,fn2} form './daochu.js'
//m1接收的是export default导出的，而后面的{c,fn2}是接受export导出的

4.按需导入别名

import m1,{
    
    c as d,fn2 as f} form './daochu.js'

//这时候就不能使用c和fn2了，要用as后面的别名。这样可以防止命名冲突，由于按需导入不能直接改名，所以要用as改名

5.直接导入并执行代码
有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴漏的成员，此时，可以直接导入并执行代码。

//当前是daochu.js

for(let i =0;i<3;i++){
    
    
   console.log(i)
}

//当前是daoru.js
import './daochu.js'

//直接import文件即可

前端模块开发