requirejs是做什么的？

曾经，我们将一些js组件放在不同的文件中，然后通过脚本标签引入它们。如果几个组件有依赖关系，要小心，一定要把依赖关系放在第一位，否则会出现什么是未定义的，什么不是函数之类的错误。例如，jquery插件显然依赖于jquery核心库，因此必须首先引入jquery核心库文件。项目小部件不太依赖简单性是好事，但是如果项目小部件更依赖复杂性就不好了。怎么办？使用requirejs！

只要他按照requirejs规范编写，他就会从一个根检查依赖关系，并根据这些依赖关系自动帮助我们插入脚本标签，这很棒，对吧？我们不用担心哪个标签应该放在前面，哪个标签应该放在后面吗？

如何使用requirejs？

记住使用requirejs的公式，两个函数配置一个属性数据-主属性

Requirejs需要一个根作为搜索依赖的开始，data-main用于指定这个根。

script src=' http : script/require . js ' data-main=' scripts/app.js '/script指定根为app.js，只有直接或间接依赖app . js的模块才会插入到html中。

require.config()配置

有了这个功能，requirejs可以灵活配置。其参数为配置对象，配置项及含义如下：

BaseUrl——是加载模块的根路径。

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

Shims——在脚本/模块外配置，不使用RequireJS的函数依赖，不初始化函数。假设下划线不是由requires js定义的，但是您仍然希望由requires js使用它，那么您需要在配置中将它定义为一个填补。

Deps——加载依赖数组

require.config({ //默认情况下，资源base URL :“scripts/app”是从该文件中提取的。//如果依赖模块有pb头，模块将从脚本/pb中加载。路径： {pb3360 './pb'}，//加载主干作为一个垫片，所谓不采用requirejs模式定义//的东西模块被转换成requirejs模块垫片3360 { '主干' 3360 { deps 3360['下划线']，导出：定义()函数

该函数用于定义模块。表格如下。

//logger.js define(['a']，function(a){ ' use strict '；函数信息(){console.log('我是私有函数')；}返回{name: '一个属性'，test:函数(a) {console.log (a' hello！');a . f()；info()；} }});define函数接受两个参数。

*第一个是字符串数组，表示你定义的模块依赖，这里依赖于模块a；

*第二个参数是一个函数，该参数被注入到前面依赖它的模块中，顺序与第一个参数相同。逻辑处理可以在函数中完成，模块的属性和方法通过返回一个对象来公开。不在返回中的可以视为私有方法和私有属性。

require()函数

此函数用于调用已定义的模块，该模块可以由define函数或垫片定义。表格如下：

//app.jsrequire (['logger']，function(logger){ logger . test(' big bear ')；console . log(logger . name)；});//输出结果：//你好大熊！//不确定(取决于A模块的F方法)//我是私有函数//实战练习一个属性

结构

index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title/head dy script src=' http : js/require . js ' data-main=' app . js '/script/body/html app . js

require . config({//默认情况下，从js/baseUrl: 'js '加载任何模块ID，//除非模块ID以' pb ' paths: { pb: '开头./pb'}，shim : { ' world ' : { deps :[' animallworld ']，//使用全局'主干'作为模块名称。export s : ' world ' } } })；require(['cat '，' dog '，' world']，function (cat，dog，world){ world . world()；cat . say()；dog . say()；});animal.js

define([]，function() { '使用strict '；function _ show name(name){ console . log(name)；}返回{ say(words){ console . log(words)；}，showName(名称){ //练习私有方法_showName(名称)；} }});cat.js

define([ 'pb/animal']，function(animal){ ' use strict '；返回{say(){ animal.say('喵喵')；animal . show name(' cat ')；} }});dog.js

define([ 'pb/animal']，function(animal){ ' use strict '；返回{ say(){ animal . say(' Wang Wang ')；Animal.showName('狗')；} }});animalWorld.js

window . animal=function(){ console . log('这就是动物世界！');}world.jsdefine([]，function() { '使用strict '；return { world(){ animal()；} }});输出结果

输出结果

解释

需要解释吗？自己感受！这里贴一张加载顺序的图片，想想是不是应该这样。

这里的标签顺序和我想象的正好相反。为什么会这样？我的猜测是，如果装载顺序仍然是依赖的，那么应该首先装载它。我们知道，只要指定了script的src属性，就会加载相应的js，这不一定和标签顺序有关。我不知道它是否就在这里。如果你知道，请给我一些建议。

综上

requirejs的基本用法很简单，但是功能强大，这样我们就可以轻松处理各种依赖问题。有些云requirejs遵循一个叫AMD的规范，也有遵循CMD规范的seajs模块管理库，还有服务器的commonjs模块管理工具。现在es6有了本机支持的模块管理。大熊不会介绍这些内容。为什么呢？因为熊也不知道。如果你觉得大熊写的东西对你有帮助，不妨关注一下或者推荐一下！

上面这篇教你学习使用requires js 5分钟的文章，是边肖分享的全部内容。希望能给大家一个参考，支持我们。