JavaScript模块

1、js模块的概念

js模块通常是定义在一个js文件中的，有点类似于python的模块，其目的也是为了方便其他人调用，类似公共类库,这样可以站在前人肩膀上，利用现有代码实现新功能。

2、模块的实现

不过由于js本身并不支持命名空间，所有函数外的js变量都是全局，哪怕这些变量是定义在不同文件中的，如果同名就会导致相互覆盖，因此需要使用一定的机制来保证模块间的隔离。此时，js的立即调用函数这个语法特性就发挥了作用，保证了不同模块间的隔离，同时实现模块内部的封装。写法是如下的形式：

( function () {  /*  code  */ } ());  //  推荐使用这个

( function () {  /*  code  */ })();  //  但是这个也是3可以用的

3、AMD模块标准规范

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。异步模块定义规范（AMD）制定了定义模块的规则，这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应（浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题）。 其中定义了一个API define函数

define() 函数

    该规范只定义了一个函数 "define"，它是全局变量。函数的描述为：

    define(id ?, dependencies ?, factory);

第一个参数，id，是个字符串。它指的是定义中模块的名字，这个参数是可选的。如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。

第二个参数，dependencies，是个定义中模块所依赖模块的数组。依赖模块必须根据模块的工厂方法优先级执行，并且执行的结果应该按照依赖数组中的位置顺序以参数的形式传入（定义中模块的）工厂方法中。

第三个参数，factory，为模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

如果工厂方法返回一个值（对象，函数，或任意强制类型转换为true的值），应该为设置为模块的输出值。

4、使用requirejs管理模块

在一个客户端页面，可能会有这样的场景出现，即一个网页需要加载多个js文件：

     <script src="1.js"></script>

　　<script src="2.js"></script>
　　<script src="3.js"></script>
　　<script src="4.js"></script>
　　<script src="5.js"></script>

　　<script src="6.js"></script>

此时，对于不同的js文件之间，在客户端加载的时候，各个js抵达客户端的顺序是没法保证的，如果不同的js文件之间相互有依赖，就无法保证页面的正确生成。通过require.js这个文件发挥效力，实现模块的管理。require是一个基于AMD规范实现的函数，它区别于传统的CommonJS require规范。因为它能够异步地加载动态的依赖，所以，我们对基于require的回调方式有了更多的需求。 require.js的主要功能为：

1）声明不同js文件之间的依赖

2）可以按需、并行、延时载入js库

3）从而可以让我们的代码以模块化的方式组织

在requirejs一共提供了两个全局变量：

（1）requirejs/require: 用来配置requirejs及载入入口模块。如果其中一个命名被其它库使用了，我们可以用另一个

（2）define: 定义一个模块 define([依赖],function(){}); define函数第一个参数是所依赖的模块，第二个参数是工厂方法，工厂方法中可以传入依赖模块作为参数，调用依赖模块的方法。

对于require.js加载的模块，理论上应该符合AMD模块标准规范，但是由于有很多不符合该规范的库已经很通用的流行开来的，因此其也支持其它不规范库的加载。

在html中引入requirejs是这样做的：在HTML中，添加这样的 <script> 标签：

<script src="/path/to/require.js" data-main="/path/to/app/config.js"></script>

其中date-main是告诉requirejs，在该文件载入完成后，进入真正的入口文件，它一般用来对requirejs进行配置，并载入真正的程序模块。在config.js中配置requirejs通常做两件事：

1）配置requirejs 比如项目中用到哪些模块，文件路径是什么

2）载入程序主模块

如下：

requirejs.config({

baseUrl: '/public/js',

paths: {

app: 'app'

  }

  shim: {

      'Amodule':{

           deps:['jquery'],

           exports: '_'

      }

});

requirejs(['app'], function(app) {
  app.hello();

});

require.js中定义require.config()文件接受一json字串的参数，其中baseUrl指明模块的根路径，paths指明各个模块的相对路径，shim指明其他一些模块的配置。

5、angularAMD模块加载

angularAMD是在angularjs应用中，为使用require.js加载angular模块提供便利性的一个工具。

参考文献：

立即调用函数（理解模块定义）：

http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html

js模块化编程

http://www.ruanyifeng.com/blog/2012/10/javascript_module.html