前端模块化

当多人开发同一项目时，很容易就会产生命名冲突的问题，尤其是js文件，任何的js引入顺序的打乱都可能导致项目运行失败，为了解决命名冲突的问题，在ES6之前，可以使用函数闭包来解决这个问题。

即可能像这样：

;(function () {
	var flag = true;
	function add(num1,num2){
		return num1 + num2
	}
	//...
})()

这样虽然可以解决命名冲突的问题，但也使得代码的复用性变得极差，因为其它的文件将无法再引用使用了函数闭包的文件中的变量或函数。

于是，为了解决这个问题，可以像这样：

;
var ModuleA = (function () {
	var obj = {}
	var flag = true;
	function num(num1,num2){
		return num1 + num2
	}
	//...
	obj.flag = flag
	obj.num = num
	return obj
})()

把要复用的属性或函数都放入到一个obj对象中，然后return该对象，那么当其它js文件想使用这些数据时，直接就可以通过 ModuleA.flag 等方式拿来使用。

这是早期使用的一种方法，现如今，前端模块化早已演变出了一些前端模块化开发规范，常用的有：CommonJS、AMD、CMD、Modules(ES6)

CommonJS（了解）

导出规范：

module.exports = {
	flag:true;
	func(A,B){
		//...
	}
}

导入规范：

let {flag,func} = require('moduleA')

ES6 模块化

在ES6中使用模块化，需要在script标签中加上type='module'属性。

<script src="*.js" type="module"></script>

export的使用：

// 1、导出模块中实现已定义过的变量
export {
	flag,
	num
}

// 2、在导出时定义要导出的变量
export let flag = true
export function num(num1,num2){
	return num1 + num2
}
export class Person{
	name = '小明',
	age = 18
}

//3、在导出时用as指定别名
export {
	mynane as name,
	myfunc as func
}

import的使用：

//1、导入指定的变量
import {flag,num} from './js/*.js'

//2、导入全部
import * from './js/*.js'

//3、导入时解决多文件命名冲突问题
import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";

default：

//通过default导出的变量可以允许导入它的模块自定义该变量的名字，但default在一个模块中只能使用一次
export default sname
export default function(){
	//...
}
export default {
	//...
}

import name from './js/*.js' //导入default不需要{}，并且可以重新自定义变量名