女神鎮(zhèn)樓
requeryJS在前端模塊化的地位，就好像迪麗熱巴在我心中的地位（癡漢臉_）
我們都知道迎罗，寫一個(gè)功能復(fù)雜的頁面睬愤，例如有一個(gè)輪播功能，一個(gè)回到頂部纹安，一個(gè)曝光加載功能尤辱。這三個(gè)功能組件寫在一起代碼復(fù)雜程度可以媲美老孫給我家接的網(wǎng)線。
于是厢岂，有些人考慮將三個(gè)組件分別寫在三個(gè)js文件中光督，然后統(tǒng)一使用 <script src=' '> 來進(jìn)行調(diào)用。但是問題來了咪笑，在調(diào)用過程中可帽，需要考慮調(diào)用順序，否則會出現(xiàn)報(bào)錯窗怒。
這個(gè)時(shí)候映跟，requireJS登場。我們只需要在代碼中加入 <script src='require.js' data-main='main.js'></script> 即可扬虚。這個(gè)標(biāo)簽中努隙，src引用的是require.js文件，加載改文件之后會自動尋找data-main的鏈接作為主程序入口文件辜昵。
ok荸镊，現(xiàn)在requireJS已經(jīng)被引用，也設(shè)定好了主程序入口文件main.js，那么躬存，主程序如何寫呢张惹？
首先，我們的目錄層級是這樣的 ：
main.js:
//配置：
requirejs.config({
//設(shè)置根路徑
baseURL: 'js/lib',
//設(shè)置特殊路徑
paths:{
app: '../app'
}
})
//正式調(diào)用：
requirejs(['jquery','canvas','app/sub'],function($,canvas,sub){
具體的實(shí)現(xiàn)過程岭洲。宛逗。。
})
或者直接引用一個(gè)文件而不做處理:
//配置：
requirejs.config({
//設(shè)置根路徑
baseURL: 'www/js',
//設(shè)置特殊路徑
paths:{
app: '../app'
}
})
requirejs(['app/sub'])
此時(shí)盾剩，sub.js的內(nèi)容：
//AMD:
define(['jquery','com/a','com/b'],function($,a,b){
$('./a')
})
//CMD:
define(function(require,exports,module){
var jquery = require('jquery');
})
光說不練假把式雷激，動手實(shí)操
實(shí)操的目錄結(jié)構(gòu)：
html部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>requireJS練手</title>
<style media="screen">
.main{
background-color: red;
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
}
.box{
width: 300px;
height: 300px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="main">
<div class="box">
<button type="button" class="btn1">藍(lán)色</button>
<button type="button" class="btn2">綠色</button>
<button type="button" class="btn3">黃色</button>
</div>
</div>
<script src="./js/lib/require.js" data-main="./js/main.js" charset="utf-8"></script>
</body>
</html>
主程序入口文件：
requirejs.config({
baseURL:'./js',
paths:{
jquery: './lib/jquery-3.2.1.min'
}
})
requirejs(['./app/app'])
引用的主要js文件：
// CMD規(guī)范：
define(function(require,exports,module){
var blue = require('com/blue');
var yellow = require('com/yellow');
var green = require('com/green');
blue();
yellow();
green();
})
// AMD規(guī)范：
define(['jquery','com/blue','com/green','com/yellow'],function($,blue,green,yellow){
blue();
green();
yellow();
})
組件部分：
define(['jquery'],function($){
function turnBlue(){
$('.btn1').on('click',function(){
$('.box').css('background-color','blue')
})
}
return turnBlue;
})
總結(jié)（按照順序）
- 在HTML文件中引用一個(gè)帶有
data-main的script的標(biāo)簽，類似<script src="./js/lib/require.js" data-main="./js/main.js" charset="utf-8"></script>告私。
- src中引用require.js文件
- data-main引用主程序入口文件
- 在主程序入口文件中屎暇，需要有配置命令。即
requirejs.config驻粟。
- requirejs.config是一個(gè)對象根悼。主要有baseURL，paths屬性蜀撑。
- baseURL設(shè)置的是一個(gè)根目錄番挺，是相對于HTML所在目錄為依托。
- paths設(shè)置的是baseURL之外的特殊路徑屯掖，是相對于baseURL為依托玄柏。
- 組件一定要return出來，否則沒卵用贴铜。組件部分就是在組件外加一個(gè)殼粪摘，這個(gè)殼是這樣滴：
define(['jquery'],function($){
組件內(nèi)容部分。绍坝。徘意。
return turnBlue;
})
解釋給小白聽，以便更好理解帶土當(dāng)時(shí)的痛苦：血輪眼每一次升級的代價(jià)轩褐，就是親手殺死至親之人椎咧。帶土將琳和一只血輪眼托付給卡卡西，卻眼見著他殺死自己的摯愛把介，血輪眼連跳三級直接升為最終版的萬花筒勤讽，當(dāng)時(shí)他承受了多么大的打擊啊拗踢！
