教你5分钟学会⽤requirejs（必看篇）
requirejs是⼲啥的啊？
曾经，我们将⼀些js组件放到不同的⽂件，然后通过script标签引⼊，如果⼏个组件有依赖，那么要⼩⼼了，你必须将被依赖的放到前⾯，否则的话会出现啥啥啥is undefined或者啥啥啥is not a function之类的错误。⽐如⼀个jquery的插件显然是依赖jquery核⼼库的，所以jquery核⼼库⽂件必须先引⼊。项⽬⼩组件少依赖简单还好，要是项⽬⼤组件多依赖复杂就糟糕了。咋办？⽤requirejs啊 ！
只要按照requirejs规范写，他会从⼀个根开始检查依赖，根据这些依赖关系⾃动的帮助我们插⼊script标签，很棒，对不对？这样依赖我们不就再也不⽤纠结哪个标签应该放在前，哪个该放在后了吗？
requirejs咋⽤啊？
请记住使⽤requirejs的⼝诀，两函数⼀配置⼀属性
data-main属性
requirejs需要⼀个根来作为搜索依赖的开始，data-main⽤来指定这个根。
<script src="scripts/require.js" data-main="scripts/app.js"></script>
这⾥就指定了根是app.js，只有直接或者间接与app.js有依赖关系的模块才会被插⼊到html中。
通过这个函数可以对requirejs进⾏灵活的配置，其参数为⼀个配置对象，配置项及含义如下：
baUrl——⽤于加载模块的根路径。
paths——⽤于映射不存在根路径下⾯的模块路径。
shims——配置在脚本/模块外⾯并没有使⽤RequireJS的函数依赖并且初始化函数。假设underscore并没有使⽤ RequireJS定义，但是你还是想通过RequireJS来使⽤它，那么你就需要在配置中把它定义为⼀个shim。
deps——加载依赖关系数组
//默认情况下从这个⽂件开始拉去取资源
baUrl:'scripts/app',
//如果你的依赖模块以pb头，会从scripts/pb加载模块。
paths:{
pb:'../pb'
如何怀双胞胎},
// load backbone as a shim，所谓就是将没有采⽤requirejs⽅式定义
//模块的东西转变为requirejs模块
shim:{
'backbone':{
deps:['underscore'],
exports:'Backbone'
}
罗曼罗兰代表作}
});
define()函数
该函数⽤于定义模块。形式如下。
//logger.js
define(["a"], function(a) {
'u strict';
function info() {
console.log("我是私有函数");
}
return {
name:"⼀个属性",
test:function(a){
console.log(a+"你好！");
a.f();
info();
}
}
});
define函数就受两个参数。
* 第⼀个是⼀个字符串数组，表⽰你定义的模块依赖的模块，这⾥依赖模块a;初一学生
* 第⼆个参数是⼀个函数，参数是注⼊前⾯依赖的模块，顺序同第⼀参数顺序。在函数中可做逻辑处理，通过return⼀个对象暴露模块的属性
和⽅法，不在return中的可以认为是私有⽅法和私有属性。
require()函数
该函数⽤于调⽤定义好的模块，可以是⽤define函数定义的，也可以是⼀个shim。形式如下：//app.js
require(['logger'], function (logger) {
console.log(logger.name);
});姜糖水怎么熬
//输出结果：
//⼤熊你好！
//不确定（取决于a模块的f⽅法）
//我是私有函数
棋谱/
/⼀个属性
实战练习⼀下
结构
index.html
<!DOCTYPE html>
<html lang="en">
<head>
女神排行榜<meta chart="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>
<body>
<script src="js/require.js" data-main="app.js"></script>
</body>
</html>
app.js
//By default load any module IDs from js/
baUrl: 'js',
//except, if the module ID starts with "pb"
paths: {
pb: '../pb'
},
shim: {
'world': {
deps:['animalWorld'],
// u the global 'Backbone' as the module name.
exports: 'world'
}
}
});
require(['cat','dog','world'], function (cat,dog,world) {
world.world();
cat.say();
dog.say();
});
animal.js
define([], function() {
'u strict';
function _showName(name){
console.log(name);
}
return {
say(words){
console.log(words);
},
showName(name){ //练习私有⽅法
_showName(name);
}
}
});
cat.js
define([
'pb/animal'
], function(animal) {
'u strict';
return {
say(){
animal.say("喵喵");
animal.showName("猫");
}
}
});
dog.js
define([
'pb/animal'
], function(animal) {
'u strict';
return {
say(){
animal.say("汪汪");
男男小说
animal.showName("狗");
}
}
});
animalWorld.js
window.animal = function() {
console.log("这⾥是动物世界！");
}
world.js
define([], function() {
'u strict';
return {
world(){
animal();
}
}
});
输出结果
输出结果
解释⼀下
需要解释吗？⾃⾏体会吧！这⾥再贴个加载顺序的图，你想想看是不是应该是这样的。
这⾥的标签顺序正好是我想象中的反过来。为什么会这样呢？我猜测是，加载顺序依然时被依赖的要先加载的，我们知道只要指定了script的src属性就会加载对应的js，跟标签顺序⽆必然关系。这⾥不知道是不是对的，谁知道请赐教。
鼓浪⼩结⼀下
requirejs的基本⽤法⽐较简单，但是功能强⼤，让我们能够⾮常轻松的处理各种依赖问题。有⼈云requirejs是遵循的⼀个叫AMD的规范，也有遵循CMD规范的ajs模块管理库，还有⽤于服务端的commonjs模块管理⼯具，现在es6已经原⽣⽀持模块管理了，关于这些内容，⼤熊不做介绍了，为啥呢？因为⼤熊也不知道啊。要是你觉得⼤熊写的东西对你有所帮助，不妨点个关注或者推荐！
以上这篇教你5分钟学会⽤requirejs(必看篇)就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
