js模块化概览

js模块化早期基本写法：

参考链接http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
1. 原始写法： 把不同函数、变量放在一块就是一个模块
缺点：污染全局变量，容易冲突；模块间关系不明确
2. 对象写法：所有的模块成员放在一个对象中
缺点：暴露了所有内部成员
3. 立即执行函数，返回对象，避免暴露私有变量
4. 在3的基础上加上继承
5. 输入全局变量。独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。
为了在模块内部调用全局变量，必须显式地将其他变量输入模块（作为参数）。

前言：

nodejs的模块系统参照的就是commonjs规范，但是它用于后端，前端想用的话，有一个很大的问题，就是同步的问题，从别处加载的模块，必须等到加载完成后模块的方法属性才能使用。而服务器端，没这问题，因为资源基本都是在本地的，可以采用同步的操作。于是便有接下来的解决方案

js模块规范：

AMD（异步模块定义）(requirejs，curljs)

参考链接：http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
AMD采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD也采用require（[module]，callback）

require.js：（除了实现AMD规范的异步加载，还对模块间的依赖进行管理）

• 引入：<script src="js/require.js" defer async="true" ></script>
  async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。

• 加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。那么，只需要写成下面这样就行了：
  <script src="js/require.js" data-main="js/main"></script>
  data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main

• 模块加载
  require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
// some code here
});


• require.config()方法
  我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。
  require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min",
　　　　　　"underscore": "lib/underscore.min",
　　　　　　"backbone": "lib/backbone.min"
　　　　}
　　});
  还可以修改指定基路径：
  require.config({
　　　　baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});
  也可以从另一台主机指定：
  require.config({
　　　　paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
　　});

• 定义AMD模块：
  define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});
  如果此模块需加载别的模块：
  define([module],function(module){
//some code
return {
//...
};
});

CMD（Common Module Definition/通用模块定义）规范：

参考链接：https://aotu.io/notes/2016/08/29/SeaJs-From-Entry-To-The-Principle/?o2src=juejin&o2layout=compat

• 概述：在CMD规范中，一个模块就是一个文件

• 定义模块：
  // 所有模块都通过 define 来定义
define(function(require, exports, module) {
// 通过 require 引入依赖，获取模块 a 的接口
var a = require('./a');
// 调用模块 a 的方法
a.doSomething();
// 通过 exports 对外提供接口foo 属性
exports.foo = 'bar';
// 对外提供 doSomething 方法
exports.doSomething = function() {};
// 错误用法！！!
exports = {
foo: 'bar',
doSomething: function() {}
};
// 正确写法，通过module.exports提供整个接口
module.exports = {
foo: 'bar',
doSomething: function() {}
};
});

AMD&CMD区别：

1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
2. CMD 推崇依赖就近，AMD 推崇依赖前置。