requirejs的使用

requirejs解决了什么问题

• 避免书写加载一大堆加载js文件的代码
• 方便模块化开发
• 防止js加载阻塞页面渲染

requirejs加载到页面后的变化

requirejs定义3个变量
* define: 用来定义 一个模块
* require: 用来加载模块
* reuirejs: requirejs===require,一般使用require

data-main的作用

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

• 在加载完require.js后加载 js/main.js
• 将js/目录设置成默认的js文件 查找 目录 ，下次在加载 的时候 ，不需要 书写

require的使用

加载文件

require('jquery'); //加载 一个文件 
require(['jquery','a']);//加载多个文件 ，传入一个数组
require(['jquery','a'],function($,a){
    //执行代码 
});//加载文件成功后的回调函数，函数参数的顺序与加载的文件顺序一致

require的参数说明

• 参数1：传入要加载的js文件路径 ，或者 在require.config中定义的短模块名称，不需要.js后缀，多个文件 使用数组 的形式
• 参数2：回调函数，函数可接收所加载 文件 的输出变量，次序与加载 的文件次序一致

requirejs的全局配置，require.config()

参数

传入一个配置的 json串，常用 的属性有：
* paths: 设置短模块 名
* shim: 加载 非AMD规范的模块
PS：AMD规范全称 Asynchronous Module Definition，即异步模块加载机制
AMD规范简单到只有一个API，即define函数：
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);

参数解析

require.config({
    paths:{
        'jquery': '../vendor/jquery/dist/jquery.min',
        'bootstrap': '../vendor/bootstrap/dist/js/bootstrap.min',
        'moment':'../vendor/moment/min/moment-with-locales.min',
        'angular': '../vendor/angular/angular.min',
    },
    shim: {
        "angular" : {
            exports : "angular";//输出 的模块 名称 
        },
        "jquery.form" : {
            deps : ["jquery"]//将该插件垫到jquery中
        }
        "jquery.form" : ["jquery"]//上面形式的简写版本
    }
})

paths下定义了种模块 的短名称

模块的定义 ，define()

define([module-name?], [array-of-dependencies?], [module-factory-or-object]);

参数说明

• module-name: 模块标识，可以省略。
  这个名称的格式是相对于 baseUrl 的路径除去文件格式，比如 baseUrl 为 js 目录，一个模块放在 js/libs/hi.js 里，则如果名称是这样定义的：

define('libs/hi', ['jquery'], function($){......});

• array-of-dependencies: 所依赖的模块，可以省略。
• module-factory-or-object: 模块的实现，或者一个JavaScript对象。

返回格式

• 一个对象
• 一个函数

常见的写法

返回 对象

//直接返回一个对象 
define({
    name: "john",
    age : 20,
    sex : "femal"
});
//函数形式返回一个对象 
define(function () {
    //Do setup work here

    return {
        color: "black",
        size: "unisize"
    }
});
//存在依赖模块的形式，返回 一个对象 
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);
            }
        }
    }
);

返回函数

define(["my/cart", "my/inventory"],
    function(cart, inventory) {
        //return a function to define "foo/title".
        //It gets or sets the window title.
        return function(title) {
            return title ? (window.title = title) :
                   inventory.storeName + ' ' + cart.name;
        }
    }
);

简单包装commonjs定义 的模块 ：

define(function(require, exports, module) {
        var a = require('a'),
            b = require('b');
        var c = function(a,b){
        }
        module.exports = c;
    }
);

参数说明：
require: requirejs对象
exports: 内置的输出 模块
module: 模块对象

JSONP服务依赖

将返回 的json串定义成define 模块

require(["http://example.com/api/data.json?callback=define"],
    function (data) {
        //The data object will be the API response for the
        //JSONP data call.
        console.log(data);
    }
);

在url中加callback=define参数
只支持json串，不支持其他 的格式
局限：
JSONP的这种用法应仅限于应用的初始化中。一旦JSONP服务超时，其他通过define()定义了的模块也可能得不得执行，错误处理不是十分健壮。

requirejs的应用

模块化开发