【RequireJS】基础知识总结

痛点：RequireJs出现之前，我们将一些js组件放到不同的文件，然后在html文件中通过script标签来引入，如果几个组件有依赖关系，那就得非常小心的排列script标签的顺序，将被依赖的js文件放到前面，否则会报各种undefined的错误。

口诀：一个属性，一个配置，两个函数

0x01 data-main属性

// index.html

 
 //使用data-main属性

// app.js
require(['grass'], function(grass) {
     console.log('grass')
});

如果不使用data-main属性，直接使用script标签引入js文件，app.js在加载依赖模块grass.js的时候就会在index.html同级的目录下找，如果使用data-main属性，就会在/js/目录下找，即和app.js同级的目录下。

0x02 require.config()配置

• baseUrl——用于加载模块的根路径。

• paths——用于映射不存在根路径下面的模块路径。

• shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim。

  • deps——加载依赖关系数组
  • exports——转换成requirejs格式后，模块的名称

require.config({
    baseUrl : 'js',
    paths : {
        pb : '../lib'                  // 其实就是把出现"pb"的地方替换成"../lib"
    },
    shim : {
        'world' : {
            deps : ['animalWorld'],
            exports : 'world'
        }
    }
});

0x03 define()和require()函数

define()

该函数用于定义模块。

接收3个参数：

• 第一个参数是模块名，以字符串表示，可以省略，省略后默认模块名为该js文件的名称，一般情况下会省略；
• 第二个参数是依赖的模块名，以字符串数组表示，也可以省略；
• 第三个参数是回调函数，定义模块的具体代码逻辑。

define('caoshuai', ['jquery', 'yangliu'], function($, yangliu) {
    return {
        f_test : function(strr) {
            console.log(strr);
        }
    }
});

require()

该函数用于加载/调用定义好的模块，可以是define()函数定义的，也可以是shim转换的。

接收2个参数：

• 第一个参数表示需要加载的模块名列表，以字符串数组表示；
• 第二个参数是回调函数，回到函数的参数依次为加载的模块内返回的对象，函数内实现代码逻辑。

require(['caoshuai', 'yangliu'], function(caoshuai, yangliu) {
    console.log('require moudle caoshuai yangliu')
});

---

欢迎关注微信公众号（coder0x00）或扫描下方二维码关注，我们将持续搜寻程序员必备基础技能包提供给大家。