requireJS(一)

1、关于requirejs

requirejs是一个用于异步加载js模块的框架。详细介绍的请谷歌~

2、HOW TO USE

首先先去官网下载requirejs.js下来，再在本身的项目中引入

1 <script type="text/javascript" src="../requirejs.js" data-main="../main"></script>

注意到data-main这个属性，简单的理解就是一个入口函数，用来启动脚本的加载过程。

 

tip：为了使这个文件加载时候不失去响应，你能够选择将它放在网页底部加载，还有另一个办法就是写成下面这样

1 <script type="text/javascript" src="../requirejs.js" data-main="../main" async="true" defer></script>

async这个属性代表它要异步加载，避免失去响应，另外defer是为了兼容IE浏览器（IE不支持async这个属性），因此完整的把两个都写上。

例子结构目录为

 

3、简单的例子

假设js/a.js中的代码以下:

1 var  info = "hello world"//简单的定义了一个变量

而后在mian.js中用requirejs加载它，以下所示

1 require(["../a.js"],function(a){
2        alert(info);//弹出hello world
3  })

而后再查看浏览器的开发者工具下，能够看到已经加载了

 能够看到require接受3个参数（示例中为2个），第一个参数为标识的id（建议忽略）；第二个参数为一个字符型的数组，为要加载的js模块；第三个参数为回调函数，

当js模块注入加载完成后，此函数就会被调用，其中函数的参数，依次顺序对应第二个参数中字符串数组的值。

tip：第二个参数中字符串数组中容许不一样的值，当字符串是以“.js”结尾的（例如上面中的js/a.js）或者是以“/”开头，又或者直接是一个完整的url（

包含URL协议，如"http:"、"https:"），则会被requirejs认为用户是直接加载一个js模块。

      不然，当字符串是相似”my/module”的时候，它会认为这是一个模块，而且会以用户配置的 baseUrl 和 paths 来加载相应的模块所在的 JavaScript 文件（后面将介绍）

 4、配置

如今咱们来换一种写法，咱们使用require.config来对模块的加载行为自定义，其中参数是一个对象

 1 require.config({
 2   paths:{
 3     jquery:"jquery-1.10.2.min",
 4     a:"a"
 5   }
 6 });
 7 
 8 require(["jquery","a"],function($,a){
 9   alert($().jquery);   //1.10.2
10   alert(info);         //hello world
11 });

简单的理解就是参数对象中的path属性用来设置路径的。

因为requirejs是以相对于baseurl属性（示例中没有给出）地址来加载因此的代码的。其中baseUrl是为require.config的参数（参数为对象）里一个属性。

若是没有显式指定config及data-main，则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。

此时，RequireJS默认假定全部的依赖资源都是js脚本，所以无需在module ID上再加".js"后缀（即上面的jquery-1.10.2.min不用写成jquery-1.10.2.min.js

写上会报错（Uncaught Error: Script error for: jquery）。

5、用define自定义模块

 1 //b.js
 2 
 3 define(["jquery"],function($){
 4   return {
 5     dom:function(){
 6       $("#div1").html("123");
 7       alert("shabi")
 8     },
 9     abc:"8888888"
10   };
11 })
12 
13 //main.js
14 
15 require.config({
16   paths:{
17     jquery:"jquery-1.10.2.min",
18     a:"a",
19     b:"b"
20   }
21 });
22 
23 require(["jquery","a","b"],function($,a,b){
24   alert($().jquery);    //1.10.2　　
25   alert(info);          //hello world
26   b.dom();              //  改写了页面的html文字，弹出shiba
27   alert(b.abc);        //8888888
28   console.log(b.abc);   //控制台输出8888888
29 });

  页面代码为：<div id="div1">aaa</div>

上面演示了如何自定义模块包含了值对，函数式（存在依赖的函数式定义），可依据须要本身定义，另外，咱们也能够再返回以前作一些其余的事情。

6、其余一些配置属性

baseUrl：用于设置基目录(如上面的例子能够设置baseUrl:"../"，代码同样不变)

config(直接看下面的例子

13 
14 //main.js
15 
16 require.config({
17   baseUrl:"../",
18   paths:{
19     a:"a",
20   },
21   config:{
22     "a":{
23       message:"liucunjie"
24     }
25   }
26 });
27 
28 require(["a"],function(a){
29   a.ms()   // 控制台下输出liucunjie
30 });

其中在mian.js配置中，指明config中是哪一个模块（上面的例子是a.js模块）

而后在a.js文件代码书写

1 define(["module"],function(module){
2   return{
3      ms:function(){
4        var mess = module.config().message;
5        console.log(mess);
6      }
7   }
8 })

引入module，而后用module.config（）来获取。

 

7、加载非规范（AMD）的模块

理论上，requirejs加载的模块必须是符合AMD规范的，或者是用define（）函数定义的模块

现在，不少主流的库都符合AMD规范，可是也有不少库并不符合，这时就须要在配置里设置shim属性

例如backbone这个库，没有采用AMD规范编写

 1 require.config({
 2   shim:{
 3     'underscore':{
 4       exports:'_'
 5     },
 6     'backbone':{
 7       deps:['underscore','jquery'],
 8       exports:'Backbone'
 9     }
10   }
11 });

其中deps数组为代表其依赖，exports(输出的变量名)则为这个模块外部调用时的名称。

未完待续。。。。