RequireJS学习笔记(一)

简介

RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。

关于AMD规范

AMD是”Asynchronous Module Definition”的缩写，意思就是”异步模块定义”。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD标准中定义了以下两个API：
- require([module], callback);
  第一个参数[module]，是一个数组，里面的成员就是要加载的模块；
  第二个参数callback，则是加载成功之后的回调函数。
- define([depends], callback);
  如果require接口用来加载一系列模块,那么define接口用来定义并暴露一个模块。
关于详细的代码示例可以查看：
AMD 规范使用总结

RequireJS基本API

require会定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短。
define 从名字就可以看出这个api是用来定义一个模块。
require 加载依赖模块，并执行加载完后的回调函数。

（1）基本加载方式（本地js文件）

通过define函数定义了一个模块页面a.js（通过require加载的模块一般都需要符合AMD规范即使用define来申明模块）
1
2
3
4
5
6
define(function(){
function fun1(){
alert("it works");
}
fun1();
})
然后在其他需要加载该模块的页面中使用require来加载该模块(注意require中的依赖是一个数组，即使只有一个依赖，你也必须使用数组来定义)：
1
2
3
require(["js/a"],function(){
alert("load finished");
})
- require API的第二个参数是callback回调函数，是用来处理加载完毕后的逻辑。
  这种方式替代了原来的:
  1
  <script type="text/javascript" src="a.js"></script>

以实现异步加载。

（2）加载文件

大部分情况下网页需要加载的JS可能来自本地服务器、其他网站或CDN，这样就需要使用require.config（本地文件同时也可以这样加载）。
它用来配置模块加载位置，简单点说就是给模块起一个更短更好记的名字，比如将百度的jquery库地址标记为jquery，这样在require时只需要写[“jquery”]就可以加载该js。

示例代码：

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
    "a" : "js/a"
  }
})
require(["jquery","a"],function($){
  $(function(){
    alert("load finished");
  })
})

这里的path也可以配置多个路径，如果上面的第一远程库没有加载成功则可以加载本地库。
在使用requirejs时，加载模块时不用写.js。
上面例子中的callback函数中的$参数，是依赖的jquery模块的输出变量，如果你依赖多个模块，可以依次写入多个参数来使用：
1
2
3
4
5
require(["jquery","underscore"],function($, _){
$(function(){
_.each([1,2,3],alert);
})
})

（3）全局配置

为了避免每个页面都要出现require.config配置，可以设置主数据data-main。
创建一个main.js：

require.config({
  paths : {
    "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
    "a" : "js/a"
  }
})

然后在其他页面中可以使用下面的方式来使用requirejs：
1
<script data-main="js/main" src="js/require.js"></script>
- 加载requirejs脚本的script标签加入了data-main，这个属性指定的js将在加载完reuqire.js后处理，我们把require.config的配置加入到data-main后，就可以使每一个页面都使用这个配置，然后页面中就可以直接使用require来加载所有的短模块名。
- 同时，当script标签指定data-main属性时，require会默认的将data-main指定的js为根路径，即相当于：
  1
  2
  3
  require.config({
  baseUrl : "js"
  })

（4）第三方模块

如加载的模块是非AMD规范的js时，需要用到shim：

require.config({
    paths:{
        jquery:"/js/jquery2.0",
        InStorage:"/js/in/InStorage",
        Product:"/js/product/Product",
        cate:"/js/product/Category",
    },
    shim:{
        cate:{
            deps:[],
            exports:"Category"
        }
    }
});

cate:”/js/product/Category” 该文件是非AMD规范的JS,在使用的过程中遵循如下几个步骤:

(1) paths 中配置文件加载的路径, JSON中的 Key值可以随意,尽量有意义，JSON中的Value是文件的加载路径。
(2) shim 中定义一个JSON对象, Key 值(cate) 与paths中定义的名字一样。
(3) shim中的JSON对象有两个属性: deps,exports：deps为数组,表示其依赖的库, exports表示输出的对象名。

这样配置后也就可require引用非AMD规范的模块：

require(["cate"],function(cate){
  cate.Write();
  cate.Add();
});

参考文章：
http://www.runoob.com/w3cnote/requirejs-tutorial-2.html
https://www.cnblogs.com/qingyuan/p/5887766.html

to be continued