笔记.md · freshman2233/requireJS

# requirejs

## 网站

中文站导航(失效)

http://www.requirejs.cn

原网址

https://requirejs.org/

GitHub

https://github.com/requirejs/requirejs

## requirejs是干啥的啊?

按照requirejs规范写，他会从一个根开始检查依赖，根据这些依赖关系自动的帮助我们插入script标签

不就再也不用纠结哪个标签应该放在前，哪个该放在后了

## **requirejs咋用啊？**

```
两函数一配置一属性
```

## **data-main属性**

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

```html
<script src="scripts/require.js" data-main="scripts/app.js"></script>
```

这里就指定了根是app.js,只有直接或者间接与app.js有依赖关系的模块才会被插入到html中。

## **require.config() 配置**

通过这个函数可以对requirejs进行灵活的配置，其参数为一个配置对象，配置项及含义如下：

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

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

shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。

假设underscore并没有使用 RequireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim。

## **deps——加载依赖关系数组**

```js
require.config({
  //默认情况下从这个文件开始拉去取资源
 baseUrl:'scripts/app',
  //如果你的依赖模块以pb头，会从scripts/pb加载模块。
 paths:{
  pb:'../pb'
 },
 // load backbone as a shim，所谓就是将没有采用requirejs方式定义
 //模块的东西转变为requirejs模块
 shim:{
  'backbone':{
   deps:['underscore'],
   exports:'Backbone'
  }
 }
});

```

## define()函数

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

```js
 //logger.js
 define(["a"], function(a) {
 'use strict';
 function info() {
  console.log("我是私有函数");
 }
 return {
  name:"一个属性",
  test:function(a){
   console.log(a+"你好！");
   a.f();
   info();
  }
 }
});
```

define函数就受两个参数。

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

\* 第二个参数是一个函数，参数是注入前面依赖的模块，顺序同第一参数顺序。在函数中可做逻辑处理，通过return一个对象暴露模块的属性和方法，不在return中的可以认为是私有方法和私有属性。

require()函数

该函数用于调用定义好的模块，可以是用define函数定义的，也可以是一个shim。形式如下：

```js
//app.js
require(['logger'], function (logger) {
logger.test("大熊");
console.log(logger.name);
});
//输出结果：
//大熊你好！
//不确定（取决于a模块的f方法）
//我是私有函数
//一个属性
```

## **实战练习一下**

结构

![结构](https://img.jbzj.com/file_images/article/201707/201707250800244.png)

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>
<body>
  <script src="js/require.js" data-main="app.js"></script> 
</body>
</html>

```

app.js

```
require.config({
//By default load any module IDs from js/
baseUrl: 'js',
//except, if the module ID starts with "pb"
 paths: {
  pb: '../pb'
},
shim: {
  'world': {
    deps:['animalWorld'],
    // use 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() {
 'use strict';
 function _showName(name){
console.log(name);
 }
 return {
say(words){
 console.log(words);
},
showName(name){ //练习私有方法
 _showName(name);
}
 }
});

```

cat.js

```
define([
 'pb/animal'
], function(animal) {
 'use strict';
 return {
say(){
 animal.say("喵喵");
 animal.showName("猫");
}
 }
});

```

dog.js

```
define([
 'pb/animal'
], function(animal) {
 'use strict';
 return {
say(){
 animal.say("汪汪");
 animal.showName("狗");
}
 }
});

```

animalWorld.js

```
window.animal = function() {
 console.log("这里是动物世界！");
}
world.js

define([], function() {
 'use strict';
 return {
world(){
 animal();
}
 }
});

```

输出结果

输出结果
 ![输出结果](https://img.jbzj.com/file_images/article/201707/201707250800245.png)

解释一下

需要解释吗？自行体会吧！这里再贴个加载顺序的图，你想想看是不是应该是这样的。

![加载顺序](https://img.jbzj.com/file_images/article/201707/201707250800246.png)

这里的标签顺序正好是我想象中的反过来。为什么会这样呢？我猜测是，加载顺序依然时被依赖的要先加载的，我们知道只要指定了script的src属性就会加载对应的js，跟标签顺序无必然关系。这里不知道是不是对的，谁知道请赐教。

## **小结一下**

requirejs的基本用法比较简单，但是功能强大，让我们能够非常轻松的处理各种依赖问题。

freshman2233/requireJS

简介

发行版

贡献者

近期动态

freshman2233/requireJS .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

freshman2233/requireJS