下面小编教你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的文章，就是边肖分享的全部内容。希望能给你一个参考，多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。