初识模块化AMD和require.js

什么是模块化

模块化是软件系统的属性，这个系统被分解为一组高内聚，低耦合的模块。那么在理想状态下我们只需要完成自己部分的核心业务逻辑代码，其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可。

作为一个模块化系统所必须的能力：

1. 定义封装的模块。

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

3. 可对其他模块的引入支持。

如何书写模块

一、函数写法

function m1(){
    //...
  }
  function m2(){
    //...
  }
           

函数m1和m2就是两个最原始的模块；但是它的缺点是，函数名高度暴露，污染了全局变量。

二、对象写法

var module = new Object({
     m1: function(){
        //...
     },
     m2: funciton(){
        //...
     }
  })
           

以上代码完成了模块的书写，调用它们只需要module.m1, module.m2即可。但是，缺点是，对象里面的成员暴露出来了，在对象外部可以任意修改成员的值，例如：

module.m1=function(){
 //...修改原来的方法
           

三、立即执行函数的写法

var module = function(){
   var m1 = funtion(){
      //...
    };
  var m2 = funtion(){
     //...
    };
  return {
     m1: m1,
     m2: m2
  }
}();
           

使用模块

new module.m1();

new module.m2();

AMD规范

AMD：Asynchronous Module Definition 异步模块定义；

官方文档 https://github.com/amdjs/amdjs-api/wiki/AMD

语法规范：

第一个参数［module］，是一个数组，里面的成员就是需要加载的模块。第二个参数callback，则是加载成功之后的回调函数；因为是异步加载，只有当依赖的模块加载完成后，才能运行后面的回调函数，所以适合浏览器环境，浏览器加载模块的速度往往取决于网速，所以比较慢，需要异步加载才行。

require.js

RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用，但它也可以用在其他脚本环境，就像 Rhino and Node。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。

在没有出现require.js之前，在html中引入js需要很多script标签，就像下面，不仅不便于书写起来繁杂，并且为了保证模块加载的顺序正确，必须保证依赖越多的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>
           

然而，require.js的出现解决以上问题，它具有以下两个优点：

实现js的异步加载，避免网页失去响应。

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

require.js的使用

step1、引入require.js文件

从官网下载require.js文件 http://requirejs.org/，然后再html中引入，注意要在body最底部引入，或者在script标签中加入defer async=”true”

step2、模块的定义

require.js模块定义的规则符合AMD规范；

define（）的第一个参数是一个数组，是依赖模块；第二参数是回调函数，当依赖加载完成后才能运行；

define(['module1'], function(m1){
    m1.doSomeThing();//...参数m1为加载的依赖模块'module';
}
           

step3、主模块的书写

这里面的main.js文件，我把它称为”主模块”，意思是整个网页的入口代码；书写规则如下：

//main.js
require.config(
    paths:{jquery:'jquery-1.8.3.min'}
});
require(['jquery','window'], function($,w){
    $("#a").click(function(){
       new w.Window().alert('shaojinghong',function(){
        alert('button is clicked');
       });
    });
});
           

• require.config(

  paths:{jquery:’jquery-1.8.3.min’}

  });将模块名和文件名关联起来，前提是main.js和jquery-1.8.3.min.js 在一个文件夹下；

• 如果模块和main.js不在同一个文件下，可以使用

　　require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min"
　　　　　　｝
           

• 如果模块在cdn中，可以使用：

　　require.config({
　　　　paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
　　});