2.5 前端模块化

• 前端模块化的雏形

let moduleA=(function(){
    let mObj={}
	let name='模块化变量内容'
	let funcSum=function sum(x,y){
		return x+y
	}
	mObj.name=name
	mObj.funcSum=funcSum
	return mObj
})()

---

• commonJS

node使用的commonJS规范

导出的两种写法

// 方法1:直接在module.exports里写变量及函数方法
module.exports = {
	let name='模块化变量内容'
	function sum(x,y){
		return x+y
	}
}

// 方法2:先写变量及函数方法,再写导出
let name='模块化变量内容'
function sum(x,y){
	return x+y
}
module.exports = {
	name,
	sum
}

导入的写法

let {变量名，变量名,...} =requrie(模块文件）或者导入时不解构对象，直接 let abc=require(模块文件名)  通过abc.a;abc.b访问模块内容。

---

• ES6的模块化

即使导出1个变量，exprot导出时也需要加大括号，接收时也需要使用大括号；使用export default 在导入时可以更改名称，并且不需要加大括号。默认的只能有一个。

导出

let a='aaa'

let b='bbb'

export {a,b}

export default let a='www' 在导入时可以不用命名为a，而且也不用加大括号。

导入

1. import {变量，变量} from "模块化文件名"

2. import * as abc from "模块化文件名"    //该方法不用解构赋值，不用关心模块里导出几个变量、函数。

---

浏览器默认支持ES6，引用时script的type为module