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

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同步加载完全不一样，不一样！