require开发：require入门

1、为什么使用require.js

作为命名空间；

作为命名空间使用；

异步加载js，避免阻塞，提高性能；

js通过require加载，不必写很多script

2、require.js的加载

require.js下载

下载后，放在指定目录就可以加载了

[javascript]  view plain  copy

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

有人可能会想到，加载这个文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样：

[javascript]  view plain  copy

1. <script src="js/require.js" defer async="true" ></script>    

async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。

这种写法虽然简单，但其实并不推荐，一般的写法还要再加个属性：

[javascript]  view plain  copy

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

就像一个c程序总有一个 main 方法作为入口一样，上面这种写法，做了几件事情：
1、加载了 require-jquery.js 文件。注意，官方提供了 require.js和 jquery 的打包版本，推荐。
2、在加载之后，加载入口文件 js/main.js ，注意，main.js 写进去的时候，不需要后缀名。
你的所有其他 js 模块文件，都可以写在 main.js 里面，通过 main.js 加载。

3、require.js的配置

在data-main指定的主文件中，通过require.config来配置，并加载其他js模块

[javascript]  view plain  copy

1. require.config({  
2.     baseUrl: 'js/'，  
3.     paths: {  
4.         "backbone": "backbone",  
5.         "underscore": "underscore"  
6.     },  
7.     shim: {  
8.         "backbone": {  
9.             deps: [ "underscore" ],  
10.             exports: "Backbone"  
11.         },  
12.         "underscore": {  
13.             exports: "_"  
14.         }  
15.     }  
16. });  

baseUrl：指定基路径

paths：模块加载路径

shim：加载非AMD规范模块      

1. exports值（输出的变量名），表明这个模块外部调用时的名称；
2. deps数组，表明该模块的依赖性。
3. 主模块可以将项目基础模块加载加来并定义全局方法等
4. [javascript]  view plain  copy

   1. require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){  
   2.  　　　　// some code here  
   3.  　　});  

4、定义模块（符合AMD规范）

require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。
具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。
假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：

[javascript]  view plain  copy

1. // math.js  
2.  　　define(function (){  
3.  　　　　var add = function (x,y){  
4.  　　　　　　return x+y;  
5.  　　　　};  
6.  　　　　return {  
7.  　　　　　　add: add  
8.  　　　　};  
9.  　　});  

加载方法如下：

[javascript]  view plain  copy

1. // main.js  
2.  　　require(['math'], function (math){  
3.  　　　　alert(math.add(1,1));  
4.  　　});  

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

[javascript]  view plain  copy

1. define(['myLib'], function(myLib){  
2.  　　　　function foo(){  
3.  　　　　　　myLib.doSomething();  
4.  　　　　}  
5.  　　　　return {  
6.  　　　　　　foo : foo  
7.  　　　　};  
8.  　　});  

定义的模块返回函数个数问题

1、define 的return只有一个函数，require的回调函数可以直接用别名代替该函数名。

2、define 的return当有多个函数，require的回调函数必须用别名调用所有的函数。

[javascript]  view plain  copy

1. require(['selector','book'], function(query,book) {  
2.     var els = query('.wrapper');  
3.   
4.     book.fun1();  
5.     book.fun2();  
6. });  

此处query 函数是1的情况，book 函数是2的情况。

5、加载js文件

到此为止，我们遇到了两个关键词，一个是 define ，可以用来定义模块(命名空间)，第一部分我们讲了；还有一个是 require，可以直接加载其他 js。它除了简单的用法：

[javascript]  view plain  copy

1. <script>  
2. require( ["some" ] );  
3. </script>  

之外，还有和 define 类似的复杂用法：

[javascript]  view plain  copy

1. <script>   
2. require(["aModule", "bModule"], function() {   
3.     myFunctionA(); // 使用 aModule.js 中的函数 myFunctionA  
4.     myFunctionB(); // 使用 bModule.js 中的函数 myFunctionB  
5. });   
6. </script>   

总结一下，define 是你定义自己的模块的时候使用，可以顺便加载其他js；require 直截了当，供你加载用的，它就是一个加载方法，加载的时候，可以定义别名。

6、requ.js插件

require.js还提供一系列插件，实现一些特定的功能。

domready插件，可以让回调函数在页面DOM结构加载完成后再运行。

[javascript]  view plain  copy

1. require(['domready!'], function (doc){  
2. 　　// called once the DOM is ready  
3. });  

text和image插件，则是允许require.js加载文本和图片文件。

[javascript]  view plain  copy

1. define([  
2.  　　　　'text!review.txt',  
3.  　　　　'image!cat.jpg'  
4.  　　　　],  
5.  　　　　function(review,cat){  
6.  　　　　　　console.log(review);  
7.  　　　　　　document.body.appendChild(cat);  
8.  　　　　}  
9.  　　);  

类似的插件还有json和mdown，用于加载json文件和markdown文件。

7、其他问题

1、路径与后缀名

在 require 一个 js 文件的时候，一般不需要加上后缀名。如果加上后缀名，会按照绝对路径加载。没有后缀名，是按照下面的路径加载：

[javascript]  view plain  copy

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

也就是默认加载 data-main 指定的目录，即 js/main.js 文件所在的目录。当然，你可以通过配置文件修改。
2、define 定义模块方法只能用在独立的js文件中，不能在页面中直接使用。
否则会报 Mismatched anonymous define() module 错误。

3、在代码中require一个文件多次，不会导致浏览器反复加载

不会，这是 RequrieJS 的优点，即使你反复 require 它，它只加载一次。

8、require深入

1、cdn回退

其支持当CDN加载不正确时，回退加载本地相应的库。我们可以通过require.config达到这个目的：

[javascript]  view plain  copy

1. requirejs.config({  
2.     paths: {  
3.         jquery: [  
4.             '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',  
5.             'lib/jquery'  
6.         ]  
7.     }  
8. });  

2、没有依赖？对象字面量？没问题！
当你写一个没有任何依赖的模块，并且只是返回一个对象包含一些功能函数，那么我们可以使用一种简单的语法：

[javascript]  view plain  copy

1. define({  
2.     forceChoke: function() {  
3.   
4.     },  
5.     forceLighting: function() {  
6.   
7.     },  
8.     forceRun: function() {  
9.   
10.     }      
11. });  

很简单，也很有用，如果该模块仅仅是功能的集合，或者只是一个数据包。
3、循环依赖

在一些情况中，我们可能需要模块moduleA和moduleA中的函数需要依赖一些应用。这就是循环依赖。

[javascript]  view plain  copy

1. // js/app/moduleA.js  
2. define( [ "require", "app/app"],  
3.     function( require, app ) {  
4.         return {  
5.             foo: function( title ) {  
6.                 var app = require( "app/app" );  
7.                 return app.something();  
8.             }  
9.         }  
10.     }  
11. );  

4、得到模块的地址

如果你需要得到模块的地址，你可以这么做……

[javascript]  view plain  copy

1. var path = require.toUrl("./style.css");  

5、JSONP
我们可以这样处理JSONP终端：

[javascript]  view plain  copy

1. require( [   
2.     "http://someapi.com/foo?callback=define"  
3. ], function (data) {  
4.     console.log(data);  
5. });  

9、r.js压缩

Require.js 提供一个脚本 r.js ，可以将所有使用到的模块压缩成一个脚本文件，r.js 可以使用 Node.js 来执行。

在压缩模块前，需要写一个配置文件，说明主模块名，压缩后的文件名，哪些模块不要压缩

没有使用 define 定义的模块都不要压缩，包括 jQuery，backbone 等库及其插件

[javascript]  view plain  copy

1. //build.js  
2. ({  
3.     baseUrl: '.',  
4.     paths: {  
5.     'jquery': 'empty:',  
6.     'underscore': 'empty:',  
7.     'backbone': 'empty:',  
8.   },  
9.     name: 'main',  
10.     out: 'main.min.js'  
11. })  

压缩命令:

[javascript]  view plain  copy

1. node r.js -o build.js