JavaScript 模块

（1）概念

对于JavaScript 的模块化编程，虽然一直在关注，却好像没怎么在生产中使用过，最近的一个项目，摒弃了angularjs，打算好好的整整JavaScript模块化开发。

小编是做java出身的，所以在刚接触JavaScript 有点稀里糊涂的，毕竟之前一直把它当做一门浏览器脚本语言，操作下dom，写写特效和用户交互什么的，但现在随着项目

业务的不断复杂，不得不搞一搞JavaScript 模块化编程了。

对于模块化的定义，专业的说法是这样的：模块化是软件系统的属性，这个系统被分解为一组高内聚，低耦合的模块。那么在理想状态先我们只需要完成自己核心业务逻辑

代码，其他方面的依赖可以通过直接加载被人已经写好得模块进行使用即可。

小编比较熟悉java，所以就拿java 来说吧，在java中有类的概念，并且有严格的语法定义，在开发上分模块开发的方式也是经常被使用的，但转移到JavaScript 总感觉之前的

开发有点力不从心，在模块划分上，代码文件目录管理上，以及JavaScript 特有的回调函数执行。。。总之，坑很多。所以才不得不走向JavaScript 模块化编程的道路。

模块化编程有3个最基本的要点：

1、定义封装的模块

2、定义新模块对其他模块的依赖

3、可以对其他模块的一如支持

（2）commonjs

CommonJS 是JavaScript 模块话编程的事实规范，它定义了很多普通应用程序使用的API，为JavaScript模块化编程提供一个标准库，这样，开发者可以使用这些API编写

应用程序，然后这些应用程序运行在不同的JavaScript 解释器和不同的主机环境中。

模块就是实现特定功能的一组方法，只要把不同的函数以及记录状态的变量简单的放在一起，就算是一个模块，如下代码：

 var module1 = (function (mod) {
    mod.f1 = function(){

    };

    return mod;
  })(window.module1 || {})

node.js 的模块系统就是参照CommonJS 规范实现的。在CommonJS中，有一个全局性的require() 方法，用于加载模块，如有一个数学模块，加载和使用如下：

var math = require('math');
math.add(2,3);  //5

（3）AMD 之 requireJS

CommonJS 的模块化加载大部分是同步加载的，虽说有异步加载的实现，但是在浏览器端使用起来并不舒服，所以才有了AMD，它是 Asynchronous Module Definition 的

缩写，即一部模块定义。采用异步的方式加载模块，这样模块的加载不影响后面语句的运行，所有依赖某些模块的语句均放在回调函数中。

通过全局变量define 函数来定义模块：

 /*
    define(id, dependencies, factory)
    
    id: 字符串类型，表示了模块标志，为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。
        如果存在，那么模块标识必须为顶层的或者一个绝对的标识。
    dependencies：是一个当前模块依赖的，已经被模块定义的模块标识的数组字面量。
    factory：是一个需要进行实例化的函数或者一个对象。
   */
 define('alpha', ['require','exports', 'beta'], function(){
   exports.verb = function(){
     return beta.verb();
   };
   
   //or:
   return require('beta').verb();
 })

reqiureJS 主要是对AMD 规范的实现，解决的问题主要有两个

1、实现 js 文件的 异步加载，避免网页失去响应

2、管理模块之间的依赖性，便于代码的编写和维护

使用：

（a）引用文件：

<script src="js/require.js" defer async="true" data-main="js/main"></script>

其中，defer 和 async 指定该js文件是异步加载的，data-main属性，指定网页程序的主模块，requireJS默认的文件后缀名是js，所以可以不要添加  .js 后缀

（b）模块的加载配置，即reqiurejs的入口文件，main.js 文件

/**
 * Created by huangminglei on 2015/10/7.
 */
require.config({
  //指定模块的基本加载路径
  baseUrl: "js/lib",
  //指定各个模块的加载路径，也可以是cdn
  paths: {
    "jquery": "jquery.min",
    "underscore": "underscore.min",
    "backbone": "backbone.min",

    "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
  },

  /*
    require 加载一些没有实现amd规范的模块，需要手动定义相关模块的特征
   */
  shim: {

    'underscore':{
      exports: '_'
    },
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
  }
});

（c）模块的定义和使用，myLib.js

define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

（3）cmd 之 seajs

参考  http://blog.chinaunix.net/uid-26672038-id-4112229.html