requireJs加载原理

展开文章目录

背景

requrejs 是fastadmin 前端框架的基础和核心。如果不了解requirejs，在编写代码时将会磕磕碰碰。
我们带着如下的问题来学习：

页面上没找到script标签引用js文件的位置？如果添加上的JS文件？
js里大量的require函数是什么意思？

define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
    ···
    })
)

以下通过一个实操案例来讲解requrejs的基本概念。

requrejs的作用

• 按需加载JS文件，避免在页面初始化时就逐一将全部的JS都下载下来，提升页面的性能；
• 管理JS之间的依赖性，便于代码的编写和维护。

AMD规范

使用define函数来定义模块，显式声明了依赖的模块，并将这些依赖模块以参数的形式传递给本模块函数。

声明依赖

格式如下：
如下是没有依赖其他模块的时候：

define(function (){  
... 
});

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性：

define(['ff'],function (ff){   
...
});

以上表示本模块依赖了ff模块

模块暴露其属性或方法

通过return 的方式暴露其属性或方法。一般调用者可以调用此模块的属性或方法。

define(function (){
    var add = function (x,y){    
        ...
    };
    
    return {    
        add: add
    };    
});

上面代码就是将add方法暴露出去。

require的方式来加载模块

上面define函数是定义了模块，如何要调用这些模块，就需要使用require函数，这函数是requireJS提供的,等下详细讲解。

require(['jquery', 'feige_robot','math'], function($, feige_robot,math) {    
   ... 
})

注意require函数第一个入参是数组，里面的元素表示要加载的模块。这些模块对应的js路径定义在哪里呢，等下看。
表示依次调用jquery、feige_robot、math，三个模块初始化后赋值给$、 feige_robot、math三个变量，后续函数就可以可以通过这些变量来调用各种模块暴露出来的方式和属性。

requireJs

html引入requrejs文件并加载主js

使用script 加载requrejs，加载后要加载一个主js文件。这个文件会第一个被require.js加载。
如下data-main="main",注意不需要带上.js后缀，表示主js文件为本html相同目录下的main.js。

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

配置信息 require.config

设置requirejs加载的配置信息，关键几个：

• baseUrl：指定根目录。因为要加载很多其他的模块js，如果使用的是相当路径，加载时就会拼上这个根目录。
• paths：维护了模块js的路径和别名的关系，在其他模块使用时就使用别名就可以，到时就通过别名来加载相应的js。

require.config({
    baseUrl: "js", // 指定根目录。表示本main.js文件的相当路径下的js文件夹为根目录
    paths: { 
        'jquery': '/assets/libs/jquery/dist/jquery.min',  //如果不具体到js后缀，默认或加上js后缀的
        'feige_robot': 'sayhi'//特意演示：给sayhi.js文件起了个别名feige_robot。
    }    
});

其中注意，
paths里的条目，路径不需要体现js后缀，默认会加上js后缀的。如果加了，反而重复了。

require函数加载模块

require函数第一个入参是数组，里面的元素表示要加载的模块。
如果模块的js文件的路径require.config的paths有映射，就去这里的路径来加载js文件。
如果paths没映射，就require.config的baseUrl拼上模块名称的js文件。

require(['jquery', 'feige_robot','math'],function($, feige_robot,math) {
        ...
    }
)

例如，如果math在paths中没有配置路径，就会从根目录找,就会找到js/math.js