RequireJS入门简介

RequireJS 学习笔记(一)

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

RequireJS是一个JavaScript文件和模块加载器。requireJS允许你把你的javascript代码独立成文件和模块，同时管理每个模块间的依赖关系。

主要目的还是为了代码的模块化。解决了两个问题:
（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。

1.基本API

require会定义三个变量：define,require,requirejs，其中require === requirejs，一般使用require更简短。

• define 用来定义一个模块
• require 加载依赖模块，并执行加载完后的回调函数
• config该函数用于配置RequireJS.

例如，define函数定义了一个模块，然后再页面中使用：

//a.js
define(function(){
    function fun1(){
      alert("it works");
    }

    fun1();
})
//index.js
require(["js/a"],function(){
    alert("load finished");
})

注意:require中的依赖是一个数组，即使只有一个依赖，你也必须使用数组来定义.
requir API的第二个参数是callback，一个function，是用来处理加载完毕后的逻辑.

2.加载JS文件

它鼓励在使用脚本时以module ID替代URL地址，以一个相对于baseUrl的地址来加载所有的代码

RequireJS默认假定所有的依赖资源都是js脚本，因此无需在module ID上再加”.js”后缀，RequireJS在进行module ID到path的解析时会自动补上后缀。

例如，要么将所有的脚本都放置到baseUrl中，要么分置为项目库/第三方库的一个扁平结构：

//index.html
<script data-main="js/app.js" src="js/require.js"></script>

//app.js
requirejs.config({ 
    baseUrl: 'js/lib',
    paths: {
        app: '../app'
    }
});

requirejs(['jquery', 'canvas', 'app/sub'],function($,canvas,sub) {

});

require函数用于加载模块依赖但并不会创建一个模块。

3.data-main入口点

require.js 在加载的时候会检察data-main 属性。require.js使用它来启动脚本加载过程。

data-main需要给所有的脚本文件设置一个根路径。根据这个根路径，RequireJS将会去加载所有相关的模块。

4.定义模块

模块不同于传统的脚本文件，它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系，并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入。

4.1 存在依懒关系的函数定义

如果模块存在依赖：则第一个参数是依赖的名称数组；第二个参数是函数，在模块的所有依赖加载完毕后，该函数会被调用来定义该模块。

依赖关系会以参数的形式注入到该函数上，参数列表与依赖名称列表一 一对应。

define(["./cart", "./inventory"], function(cart, inventory) {
        //return an object to define the "my/shirt" module.
        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                inventory.decrement(this);
                cart.add(this);
            }
        }
    }
);

5.shim

通过require加载的模块一般都需要符合AMD规范(使用define来申明模块)，但是部分时候需要加载非AMD规范的js，这时候就需要用到另一个功能：shim。专门用来配置不兼容的模块。

具体来说，每个模块要定义：
（1）exports值（输出的变量名），表明这个模块外部调用时的名称；
（2）deps数组，表明该模块的依赖性。

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})

6.require.config配置函数

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