Requirejs高级应用（三）：同步加载

在requirejs中，我们可以通过获取函数返回值的方式进行同步调用，如下：

define(['require'], function(require) {
    // 通过同步调用的方式获取angular引用
    var angular = require('angular');
})

1. 同步加载要求

在requirejs中，执行同步加载必须满足两点要求：
1. 必须在定义模块时使用，亦即define函数中，看完第二个条件，你会明白这是必然的；
2. 引用的资源必须是之前异步加载过的(不必在同一个模块)，换句话说，同步载入的模块是不会发网络请求的，只会调取之前缓存的模块；

如果没有满足上面两个条件，那么它一定会报错，如下：

require.js:143 Uncaught Error: 
Module name "require/require" has not been loaded yet for context: _. 
Use require([])(…)makeError
@ require.js:168localRequire 
@ require.js:1433requirejs 
@ require.js:1794(anonymous function) 
@ VM3806:1

满足了上面那么两个苛刻的条件，那同步加载还能引用于什么场景呢？

2. 应用场景1

已经明确知道模块的先后顺序，确认此模块已经被加载过，例如系统通用模块，在载入完成后，之后的模块就可以进行同步的引用，或者在Vue等前端技术框架中，在应用模块同步加载vue模块。

3. 应用场景2

引用的资源列表太长，懒得回调函数中写一一对应的相关参数，如下：

// 假定这里引用的资源有数十个，回调函数的参数必定非常多
define(['jquery'], function() {
    return function(el) {
        // 这就是传说中的同步调用
        var $ = require('jquery');
        $(el).html('Hello, World!');
    }
})

4. 引用场景3

可以减少命名或者命名空间冲突，例如prototype与jquery的冲突问题，如下：

define(['jquery', 'prototype'], function() {
    var export = {};
    export.jquery = function(el) {
        // 这就是传说中的同步调用
        var $ = require('jquery');
        $(el).html('Hello, World!');
    }

    export.proto = function(el) {
        // 这就是传说中的同步调用
        var $ = require('prototype');
        $(el).html('Hello, World!');
    }
    return export;
})

5. 引用场景4

处女座专用，代码显得更整洁漂亮了，硬是把回调函数写出了同步的感觉，有没有？

6. 结论

Requirejs的同步加载是鸡肋，跟你想象中的AJAX同步加载完全不一样，不一样！