模块化发展历程

模块化主要用来抽离公共代码，隔离作用域，避免变量冲突。。。

llFE(立即调用函数表达式)

使用自执行函数来编写模块化，特点：在一个单独的函数作用域中执行代码，避免变量冲突

(function(){
    return{
        data:[]
    }
})()

AMD

使用requireJS来编写模块化，特点：依赖必须提前声明好

// 在html引入require.js

//script里有个data-main属性，require.js会在加载完成以后通过回调方法去加载这data-main里面的js文件
//所以这个js文件被加载的时候，RequireJS已经加载执行完毕。

//配置main.js
require.config({
    paths:{
        "jquery":'../lib/jquery.min'
    }
});
// require.config()可以对模块的加载行为进行自定义，并把模块变为全局可使用的。
// require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。
// require( [ ] ,function( ){ } )是require.js的核心之一，它接受两个参数。
// 第一个参数是一个数组，表示所依赖的模块；
// 第二个参数是一个回调函数，当前面指定的模块加载成功后，它将被调用。
// 加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块。

require(['jquery'],function($){
    ... 
})
// 定义模块
define(['依赖的模块路径'], function(依赖模块名称){
    return {
        ...
    }
})

CMD

使用seaJS来编写模块化，特点：支持动态引入依赖文件

define(function(require,exports,module){
    var indexCode = require('./index.js')
})

CommonJS

nodejs 自带的模块化

let fs = require('fs');

UMD

兼容AMD，CommonJS 模块化语法

webpack(require.ensure)

webpack2.x版本中的代码分割

ES Modules

ES6引入的模块化，支持import来引入另一个js

import a from 'a';