# 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值要小寫，因為它在定義時候寫成小寫了。
