前端模块化 之 CommonJs-AMD-CMD-ES6模块化

1. 模块化的一些方案

防止变量冲突

• 命名空间

var obj1 = {
    a : 1,
    foo : function(){}
}
var obj2 = {
    a : 2,
    foo : function(){}
}

解决了变量的一些冲突，但是外部能够获取到私有变量和修改私有变量（obj1.a,obj2.a）

• 闭包

	(function(){
	    var a = 1
	    function foo(){}
	
	    return {foo : foo}
	})()

返回出去一个函数；外部不能访问私有变量

• 模式增强

	(function($){
	    var a = 1
	    console.log($)
	    function foo(){}
	
	    return {foo : foo}
	})(jQuery) // jQuery库

虽然解决了变量之间的冲突的问题，但是对于每个引入文件的依赖性比较强（文件引入的顺序等…）

2. commonJs简单介绍

CommonJs思想核心：

模块暴露：

exports 不能直接赋值于一个函数 ；例如：exports = function(){}；因为 exports 本质是一个空对象，这样子 exports就是当前赋值的函数了。
正确例子：exports.foo = function(){}

3. AMD规范的简单介绍

require.js官方网址：https://requirejs.org

使用方法：

moduleid 是导出文件的变量名；可以不填；如果没有值；默认是当前文件的文件名

使用案例：

• 目录结构（本人贪图方便的目录结构）：

• demo.html文件

<script src="./require.js" data-main="./main.js"></script>

main.js文件

	(function(){
	    require.config({
	        // paths 路径配置
	        paths:{
	            md1 : './md1',
	            md2 : './md2'
	        }  
	    })
	    require(['md2'],function(md2){
	        md2.getName()
	    })
	})()

md1文件

	define(function(){
	    var age = 10;
	    function getAge(){
	        return age
	    }
	    return {getAge}
	});

md2文件

	define(['md1'], function(md1) {
	    var name = 'hello'
	    function getName (){
	        console.log(name,md1.getAge())
	    }
	    return {getName}
	});

输出结果为 ： hello 10

引用第三方库

	(function(){
	    require.config({
	        // paths 路径配置
	        paths:{
	            jquery : './jquery-3.3.1'
	        }  
	    })
	    require(['jquery'],function($){
	        console.log($)
	    })
	})()

AMD规范的所依赖的模块是依赖前置，提前加载依赖的，使用之前所依赖的模块就加载好了。

4. CMD规范的简单介绍

sea.js 中文文档 ： https://www.zhangxinxu.com/sp/seajs

5.ES6模块化简单介绍

• 暴露（export）

	//暴露变量和函数
	export var a = 10
	export function myFunc(){}
	
	//默认暴露变量和函数
	export default a = 10
	export default myFunc(){}

• 导出（import）

6.模块化总结