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

首先给大家分享一个巨牛巨牛的人工智能教程，是我无意中发现的。教程不仅零基础，通俗易懂，而且非常风趣幽默，还时不时有内涵段子，像看小说一样，哈哈～我正在学习中，觉得太牛了，所以分享给大家！点这里可以跳转到教程

                    

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

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

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
  
1
2
3
4
5
6
7

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

2. 应用场景1

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

3. 应用场景2

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

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

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;})
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5. 引用场景4

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

6. 结论

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

           

浏览人工智能教程