三种常见的JavaScript组织代码的方式：
-
IIFE 保留全局变量
由于JavaScript采用的是函数级作用域，利用IIFE将代码包裹起来，在内部将接口暴露给window对象，也就是全局变量。例如：
;(function(){
var foo = function(){
// ...
}
window.foo = foo;
})();
优点：实现简单清晰，避免了大量的全局变量，有选择的暴露出需要暴露的东西。
缺点：需要手动维护模块依赖顺序。
-
commonjs 规范
commonjs名字看起来像是一个js库，但其实并不是。commonjs并不像requirejs、Vuejs、Reactjs那样，引入到页面后完成一定功能的库。commonjs是一个规范，他制定了一套实现JavaScript模块的方式。举例：
// 定义模块 app.js
module.exports = function add( a,b ){
return a + b;
}
.引用模块
// 引用模块 app.js
var app = require('./app.js');
缺点：commonjs规范是针对服务器端nodejs制定的，并不适用于前端的浏览器环境。首先是浏览器的支持并不好。再者，require()对于模块的加载是同步的，而前端环境中在加载js时浏览器是不能做别的事情的。因此就需要一种异步加载的模块化方式。
-
AMD 规范
AMD = Asynchorous Module Definition,异步模块定义。
为了使前端环境下的js拥有模块化的能力，诞生了AMD规范。为了适应前端的异步特点，AMD规范采用回调函数的方式，在加载完依赖之后再执行回调中的模块代码。最著名的实现AMD规范的库是require.js。使用举例：
// 定义模块 foo.js
define(['dependence1','dependence2'],function( d1,d2 ){
var foo = function(){
// ...
}
return foo;
});
引用模块：
// 引用模块
require(['foo.js'],function(foo){
// ...
});
入口文件：
<script src="require.js" data-main="main.js"></script>
使用<script>标签引入require.js库，并使用data-main属性指定整个程序的入口文件main.js。
现代前端类库都提供了上述三种模块化加载方式。例如jQuery。同样一份在官网下载的jQuery.js，可以使用如下三种方式在页面中引用：
-
方式一，全局变量
<script src="jquery.js"></script> -
方式二，commonjs规范
var $ = require('./jQuery.js'); -
方式三，AMD规范
define(['jQuery.js'],function($){ console.log( $ ); });
jQuery是怎么做到的呢？其实就是 if else判断当前的环境，做不同的事情。jQuery对于三种引用方式的支持的实现如下：
(function( global,factory ){
if( typeof module === 'object' && typeof module.exports === 'object' ){ // #1
module.exports = factory( global,true );
}
else {
factory( global ); // #2
}
}(window,function( window,noGlobal ){ // #3
var jQuery = function(){ // #4
}
jQuery.ajax = function(){
console.log('sending ajax request...');
}
if( typeof define === 'function' && define.amd ){ // #5
define('_jquery',[],function(){
return jQuery;
});
}
if( typeof noGlobal === 'undefined' ){ // #6
window.jQuery = window.$ = jQuery;
}
return jQuery; // #7
}));
上述代码中，#3 处的function是一个工厂函数，他负责产出jQuery，并作为一个参数传递给最外层的匿名函数。匿名函数中#1，判断环境如果是commonjs下（环境中实现了module、module.exports），则将工厂函数的执行结果factory(global,true)赋值给module.exports。如果不是commonjs环境，则直接执行factory(global)。
两种情况都是执行的factory()，只是非commonjs下不给工厂函数传递第二个参数noGlobal。因此在非commonjs下，工厂函数内部会将jQuery赋值给window，即 #6 行。这里就是浏览器环境<script>引入jQuery文件后能直接通过$访问的原因。#7 行的return语句，就是讲jQuery返回给commonjs下的module.exports。
另外，factory()工厂函数内部还会对AMD的define做判断，如果存在AMD环境，则使用define定义jQuery模块。即#5 行。
以上过程，就实现了jQuery对于全局变量、commonjs、AMD三种模块化方式的支持。而jQuery自己的内部逻辑实现，则是在#4出进行的。
然而上述jQuery的代码虽然实现了三种模块化方式，但是比较绕。有一种通用的模块编写方式UMD（Universal Module Definition），代码易懂且实现了三种模块化方式：
(function( global,factory ){
if( typeof module === 'object' && module.exports === 'object' ){
module.exports = factory( require('jquery') );
}
else if( typeof define === 'function' && define.amd ){
define(['jquery'],factory)
}
else {
global.Foo = factory( jQuery );
}
}( this,function($){
function Foo(){
}
return Foo;
}));
