前端模块化

函数封装

function fn1() {
  statement
}
function fn2() {
  statement
}

需要时加载函数所在文件并调用函数就可以了。
缺点：加载多个模块时变量名可能冲突，污染全局变量

对象

var module1 = {
  var1: 1,
  var2: 2,
  fn1: function() {
    statement  
  },
  fn2: function() {
    statement
  }
}

同样加载模块文件后module1.fn1();就可以调用。这样只要保证模块名唯一，就不会产生全局污染了
缺点：暴露了所有成员

立即执行函数

var module = (function() {
  var var1 = 1;
  var var2 = 2;
  function fn1() {
    statement
  }
  function fn2() {
    statement
  }
  return {
    fn1: fn1,
    fn2: fn2
  }
})();

这样我们只能引用module.fn1()/module.fn2(),达到了封装细节的目的
当模块依赖其他模块时：

var module = (function(a, b) {
  statement
})(A, B);

如果一个页面引用了过多的js，我们不仅要保证js加载的顺序来确保模块间的依赖关系正确；同时过多的js同步加载又严重影响页面的渲染。

1、在script标签上加上async/defer属性来达到异步加载的效果

async会在加载完后立即执行；defer会推迟到页面加载后执行

2、利用现有的模块化规范来达到异步加载和控制模块依赖的目的

CommonJS规范

根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象
加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象

//A.js
statement
module.exports = {
  fn1: fn1,
  fn2: fn2
}
//B.js
var a = require('A')
a.fn1()

缺点：由于加载依赖模块是同步的，所有依赖以外的代码也只能等待执行。如果是应用在如nodejs服务端，那没什么问题，硬盘读取时间很短；但如果是在浏览器端，那就是不可忍受的加载时长了

AMD规范，代表requireJS

Asynchronous Module Definition，异步模块定义
它采用异步方式加载模块，不影响它后面语句的执行，所有依赖模块的语句，都定义在回调函数中。require([module], callback);

//require.js引入时可以指定入口文件
<script src="path/require.js" data-main="path/main"></script>
//main.js
//可将模块路径自定义
require.config({
  [baseUrl: 'path',]
  paths: {
    'jquery': 'path/jquery.min',
    'moduleA': 'path/moduleA'
  }
});
//加载模块
require(['jquery', 'moduleA'], function ($, a){
  a.fn1();
  statement
});
//定义模块moduleA.js
define(function() {
  var fn1 = function(a) {
    return a++;
  }
  return {
    fn1: fn1
  };
});
//依赖其他模块
define(['moduleB', 'moduleC'], function(mb, mc) {
  var fn1 = function() {
    return mb.fn1();
  }
  return {
    fn1: fn1
  };
});

如果函数库不符合了AMD的规范，我们需要先配置shim再使用：

require.config({
  [baseUrl: 'path',]
  paths: {
    'jquery': 'path/jquery.min',
    'moduleA': 'path/moduleA',
    'ta': 'path/TestA',
    'tb': 'path/TestB',
    'jquery.scroll'： 'path/jquery.scroll'//jquery插件
  },
  shim: {
    'ta': {
      exports: 'TestA'//js输出的变量名
    },
    'tb': {
      deps: ['jquery'],//依赖的模块
      exports: 'TestB'
    },
    'jquery.scroll': { //简写成：'jquery.scroll': ['jquery']
      deps: ['jquery'],
      exports: 'jQuery.fn.scroll'
    }
  }
});

CMD规范，代表SeaJS，基于CommonJS

Common Module Definition，通用模块定义
和AMD最大的区别在模块定义方式和依赖模块加载时机：

AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
CMD推崇就近依赖，只有在用到某个模块的时候再去require

//引用
<script src="../sea-modules/sea.js"></script>
//seajs的简单配置
seajs.config({
  base: "../sea-modules/",
  alias: {
    "jquery": "jquery.js"
  }
})
//定义模块module.js
define(function(require, exports, module) {
  var $ = require('jquery');//通过require引入依赖
  var mb = require('path/moduleb');
  var fn1 = function() {}
  //通过exports对外提供接口
  exports.fn1 = fn1;
  //或者通过module.exports提供接口
  module.exports = {fn1: fn1};
  //导出方式谁在后谁起作用，最终都是通过全局的module.exports
  //通常返回单一方法或属性时用exports，返回复杂结构时用module.exports
});
//加载模块
seajs.use(['module.js'], function(mo){
  statement
});

前端模块化