下面小编教你5分钟学会使用requirejs(必看)。我觉得边肖挺好的。我现在就分享给你，给你一个参考。来和边肖一起看看吧。

requirejs是干啥的啊？

曾经，我们把一些js组件放在不同的文件里，然后通过脚本标签引入。如果几个组件有依赖关系，那么就要小心了。必须把依赖的放在前面，否则会出现什么未定义，什么不是函数之类的错误。比如一个jquery的插件，很明显依赖于jquery核心库，所以必须先引入jquery核心库文件。小型项目组件较少依赖简单性是好的，但如果大型项目组件更多依赖复杂性就不好了。我该怎么办？使用requirejs！

只要是按照requirejs规范写的，他就会从一个根开始检查依赖关系，根据这些依赖关系自动帮我们插入脚本标签。很棒，对吧？所以我们不用担心哪个标签先来哪个标签后来？

requirejs咋用啊？

请记住使用requirejs的公式，两个函数配置一个属性。

data-main属性

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

script src= scripts/require . js data-main= scripts/app . js /script

这里指定了根是app.js，只有直接或间接依赖app.js的模块才会被插入html。

require.config() 配置

该函数可以灵活配置requirejs，其参数是一个配置对象。配置项目和含义如下：

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

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

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

deps——加载依赖关系数组

require.config({

//默认情况下，从该文件中提取资源。

baseUrl:脚本/应用程序，

//如果你的依赖模块以pb开头，那么这个模块将从scripts/pb加载。

路径：{

pb:./pb

},

//将backbone作为shim加载，这意味着它不会被requirejs定义。

//模块的东西转换成requirejs模块

垫片：{

主干:{

deps:[下划线]，

出口：“主干”

}

}

});

Define()函数

该函数用于定义模块。形式如下。

//logger.js

定义([a]，函数(a) {

使用严格的；

函数信息(){

Console.log(我是私有函数)；

}

返回{

名称：“一个属性”，

测试：功能(a){

Console.log(一声“你好！”);

a . f()；

info()；

}

}

});

define函数有两个参数。

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

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

require()函数

该函数用于调用已定义的模块，该模块可以由define函数或shim定义。其形式如下：

//app.js

require([logger]，function (logger) {

Logger.test(大熊)；

console . log(logger . name)；

});

//输出结果：

//你好，小熊！

//不确定(取决于模块A的F方法)

//我是一个私有函数

//一个属性

实战练习一下

结构

index.html

！文档类型html

html lang=en

头

meta charset=UTF-8

meta name= viewport content= width=device-width，initial-scale=1.0

meta http-equiv= X-UA-Compatible content= ie=edge

标题文档/标题

/头

身体

脚本src= js/require . js data-main= app . js /脚本

/body

/html

app.js

require.config({

//默认情况下，从js/加载任何模块id

baseUrl: js ，

//除非模块ID以“pb”开头

路径：{

pb:./pb

},

垫片：{

世界:{

deps:[animalWorld]，

//使用全局“主干”作为模块名称。

出口：“世界”

}

}

});

require([猫，狗，世界]，function(猫，狗，世界){

world . world()；

cat . say()；

dog . say()；

});

动物. js

定义([]，函数(){

使用严格的；

function _showName(name){

console.log(名称)；

}

返回{

说(话){

console.log(单词)；

},

ShowName(name){ //练习私有方法

_showName(名称)；

}

}

});

cat.js

定义([

“铅/动物”

]，功能(动物){

使用严格的；

返回{

say(){

animal . say(‘喵喵’)；

animal . showname( cat )；

}

}

});

dog.js

定义([

“铅/动物”

]，功能(动物){

使用严格的；

返回{

say(){

Animal.say(汪汪)；

animal . showname( dog )；

}

}

});

动物世界. js

window.animal=function() {

Console.log(这是动物世界！);

}

world.js

定义([]，函数(){

使用严格的；

返回{

世界(){

动物()；

}

}

});

输出结果

输出结果

解释

你需要解释吗？自己体会吧！在这里贴一个加载顺序的图，好好想想。

这里的标签顺序和我想象的正好相反。为什么会这样？我的猜测是，如果加载顺序仍然是依赖的，就需要先加载。我们知道，只要指定了脚本的src属性，就会加载相应的js，与标签顺序无关。我不知道是不是在这里。谁知道呢？请开导我。

小结一下

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

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