RequireJs入门

随着Javascript在开发中占得比重越来越大，就需要一个团队来分工、协作，为了大家的代码可以更好的相互使用，这个时候模块化编程就成为一个迫切的需求了。但是Javascript本身不是模块化的语言。它不支持类，更别说模块了。

既然模块如此重要，那团队开发中就应该去制定一种规范，来约束大家，这样就便于大家相互使用。如果每个人都按自己的写法，那肯定是乱了套的，目前Javascript官方没有规范，通行的Javascript模块规范只有两种：CommonJs和AMD

CommonJs概述

CommonJs是服务器端模块规范，它加载模块顺序是同步的，必须等待一个加载完了在加载下一个，node.js就是遵守CommonJs规范

AMD

AMD是浏览器端模块，加载是异步的，无需等待。

两者的区别是：CommonJs是服务器端模块规范，加载模块顺序是同步的；AMD是浏览器端模块，加载是异步的。两者之间可以相互转化（在这就不做阐述了）。

RequireJs是什么

RequireJs是个Javascript文件、模块加载程序，在浏览器执行速度很快，它也可以用在其他Javascript环境里，像node等等

它遵循AMD模块规范

为什么要使用RequireJs

1.如第一段所讲的，Javascript模块化的需要,需求的需要

如下的代码想必大家都看过：

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

这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难

2.实现js文件的异步加载，避免网页失去响应;

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

如何使用RequireJs

1.去官网下一个RequireJs文件，像js文件一样添加

1 <script data-main="script/main" src="script/require.js"></script>

大家发现这段代码里多了一个data-main属性，这个就像C语言中的主函数一样，main.js会第一个被Require.js加载，由于require.js默认的文件名后缀是js，所以可以把main.js简称成main

那我们看看main这个主函数是怎么写的

如果模块不依赖任何其他脚本，我们就可以直接写javascript,但是这样也没有必要使用RequireJs

 1 require.config( {
 2     paths: {
 3         jquery: '/script/lib/jquery.min',
 4         mod:'/script/lib/mod'
 5     }
 6 } )
 7 
 8 require( ['jquery', 'mod'], function ( $, mod )
 9 {
10     $( "#btn1" ).on( "click", function ()
11     {
12         $( "body" ).append( "<p>How are you!</p>" )
13     } )
14     $( "#btn2" ).on( "click", function ()
15     {
16         mod.greeting();
17     } )
18 } )

用path定义路径，因为requireJs默认后缀是JS，所以都可以省略.js，细心的你肯定发现直接使用path要重复写很多个路径

 1 require.config( {
 2     baseUrl: '/script/lib',　　//定义了这个属性，跟路径就是从这个路径下开始的，没有定义就是从加载requirJs文件的html路径下开始的
 3     paths: {
 4         jquery: 'jquery.min',
 5         mod:'mod'
 6     }
 7 } )
 8 
 9 require( ['jquery', 'mod'], function ( $, mod )
10 {
11     $( "#btn1" ).on( "click", function ()
12     {
13         $( "body" ).append( "<p>How are you!</p>" )
14     } )
15     $( "#btn2" ).on( "click", function ()
16     {
17         mod.greeting();
18     } )
19 } )

baseUrl——用于加载模块的根路径。
paths——用于映射不存在根路径下面的模块路径
shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim
deps——加载依赖关系数组

定义一个模块：一个模块一个文件

1.假如这个模块没有任何依赖关系，仅仅是一些name/value的集合，就可以定义成object的形式

define({
      color:"black",
      size:"unisize"
 })

2.假如这个模块没有任何依赖关系，仅仅需要一个方法处理一些简单的逻辑

1 define(function(){
2        var a=1,b=2;
3        document.write(a+b);
4  })

3.定义一个有依赖关系的模块，第一个参数是数组，第二个参数是一个方法function，在第一个参数相对应的js文件全部加载完了，第二个参数的function才会执行

1 define(["./cart","./inventory"],function(cart,inventory){
2      return {                      //也可以返回一个function
3           cart:cart.add(3,4);
4           inventory:inventory.minus(3,4); 
5      }
6  })

4.定义一个模块来转换CommonJs

1 define(function(require, exports, module) {   //方法中三个参数，需要按照顺序写和相对应的名字，否则会出现混乱，也可以舍弃exports和module，但是你要使用的使用，一定要按照顺序写
2         var a = require('a'),
3             b = require('b');
4 
5         //Return the module value
6         return function () {};
7     }
8 );

5.定义一个有名称的模块

1 //定义一个模块名称为"foo/title"
2 define("foo/title",
3         ["my/cart", "my/inventory"],
4         function(cart, inventory) {
5             //Define foo/title object in here.
6        }
7  );