模块化主要用来抽离公共代码,隔离作用域,避免变量冲突。。。
llFE(立即调用函数表达式)
使用自执行函数来编写模块化,特点:在一个单独的函数作用域中执行代码,避免变量冲突
(function(){
return{
data:[]
}
})()
AMD
使用requireJS来编写模块化,特点:依赖必须提前声明好
// 在html引入require.js
<script type="text/javascript" data-main="js/script/main" src="js/lib/require.js"></script>
//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';