# require.js基本使用教程(了解)
## 简介
专门用于浏览器端, 模块的加载是异步的
## 下载require.js
github : [https://github.com/requirejs/requirejs](https://github.com/requirejs/requirejs)
将require.js导入项目: js/libs/require.js
## 定义模块语法
### 定义暴露模块
**定义没有依赖的模块**
```
define(function(){ return 模块})
```
**定义有依赖的模块**
```
define(['module1', 'module2'], function(m1, m2){ return 模块})
```
## 模块
```
require(['module1', 'module2'], function(m1, m2){ 使用m1/m2})
```
### 在页面中引入
**main.js**
引入第三方模块时候，jquery时，它是小写，官方的库中定义就是小写。paths的意思就是对将模块和文件名称进行定义。方便后期使用模块。baseUrl指的是从根目录下进行查找文件。会在paths的文件地址前面添加这个前缀。
>[danger] paths定义的路径后面记得不可以添加.js后缀。否则会引起失误。
```
(function () {
require.config({
baseUrl:'src',
paths:{
myalert:'./alert',
mymodule:'./mymodule',
jquery:'https://cdn.bootcss.com/jquery/1.10.2/jquery'
}
})
require(['myalert','jquery'],function (myalert,$) {
myalert.fn();
$('body').css('background','pink')
})
})();
```
```
<script src="lib/require.js" data-main="./src/main"></script>
```
## 创建项目结构
```
|-js
|-libs
|-require.js
|-modules
|-alerter.js
|-dataService.js
|-main.js
|-index.html
```
## 定义require.js的模块代码
### dataService.js
```
define(function () {
let msg = 'hi'
function getMsg() {
return msg.toUpperCase()
}
return {getMsg}
})
```
### alerter.js
```
define(['dataService', 'jquery'], function (dataService, $) {
let name = 'Tom2'
function showMsg() {
$('body').css('background', 'gray')
alert(dataService.getMsg() + ', ' + name)
}
return {showMsg}
})
```
### 应用主(入口)js: main.js
```
(function () {
//配置
require.config({
//基本路径
baseUrl: "js/",
//模块标识名与模块路径映射
paths: {
"alerter": "modules/alerter",
"dataService": "modules/dataService",
}
})
//引入使用模块
require( ['alerter'], function(alerter) {
alerter.showMsg()
})
})()
```
### 页面使用模块
`<script data-main="js/main" src="js/libs/require.js"></script>`
# require.js结合第三方库使用
## 第三方结合`require.js`的库
### 将jquery的库文件导入到项目:
```
js/libs/jquery-1.10.1.js
```
### 在main.js中配置jquery路径
```
paths: {
'jquery': 'libs/jquery-1.10.1'
}
```
### 在alerter.js中使用`jQuery`
```
define(['dataService', 'jquery'], function (dataService, $) {
var name = 'wolfcode'
function showMsg() {
$('body').css({background : 'red'})
alert(name + ' '+dataService.getMsg())
}
return {showMsg}
})
```
>[danger] jQuery天生支持amd，它内部已经帮助我们实现过了。
> 不过要注意，它在配置时候key值要小写，因为它在定义时候写成小写了。
