JavaScript模块化基础

三种常见的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;

 }));