課程目標(biāo)：
利用requirejs實(shí)現(xiàn)前端模塊化開(kāi)發(fā)hao123項(xiàng)目實(shí)戰(zhàn)
適應(yīng)人群：
前端開(kāi)發(fā)人員
課程介紹：
What is RequireJS？? ?在說(shuō)明什么是RequireJS之前，不得不提的就是Javascript模塊化歷史的背景。其實(shí)在早期，javascript作為一門(mén)新興的腳本語(yǔ)言出現(xiàn)，有著龐大的愿景，它并不是作為一門(mén)僅僅針對(duì)客戶端設(shè)計(jì)的語(yǔ)言。只是說(shuō)后來(lái)web應(yīng)用的流行，javascript作為瀏覽器端腳本語(yǔ)言而迅速傳開(kāi)，加上Netscape和微軟的競(jìng)爭(zhēng)將其過(guò)早的標(biāo)準(zhǔn)化。所以就導(dǎo)致了JS的諸多缺陷，其中一個(gè)就是模塊化(但是你可以驚奇地發(fā)現(xiàn)其實(shí)javascript有將import,export等作為保留字，說(shuō)明設(shè)計(jì)的時(shí)候其實(shí)是有考慮的，新的標(biāo)準(zhǔn)es6也讓原生支持模塊化了)。然后隨著web應(yīng)用越來(lái)越復(fù)雜，嵌入的javascript代碼越來(lái)越多，還有node的興起，模塊化編程就變成了必須。
所以就有了后來(lái)Dojo工具包和Google的Closure庫(kù)支持的模塊系統(tǒng)。還有兩個(gè)非常通用的標(biāo)準(zhǔn)規(guī)范，CommonJS和AMD。這里就不展開(kāi)說(shuō)了，我們只需要知道，實(shí)現(xiàn)CommonJS規(guī)范的API是同步加載模塊的，而實(shí)現(xiàn)AMD規(guī)范的API是則是異步加載模塊。
所以理論上來(lái)說(shuō)，AMD規(guī)范的非阻塞加載更加適合瀏覽器端。而RequireJS就是AMD規(guī)范的最好實(shí)現(xiàn)。抄一段官方文檔對(duì)RequireJS的描述：
RequireJS 是一個(gè)JavaScript模塊加載器。它非常適合在瀏覽器中使用, 它非常適合在瀏覽器中使用，但它也可以用在其他腳本環(huán)境, 就像 Rhino and Node. 使用RequireJS加載模塊化腳本將提高代碼的加載速度和質(zhì)量。
Why RequireJS？? ?所以，知道了RequireJS是干什么的，也差不多知道為什么我們要使用RequireJS了。不過(guò)還是總結(jié)一下用RequireJS的好處吧。
異步“加載”。我們知道，通常網(wǎng)站都會(huì)把script腳本的放在html的最后，這樣就可以避免瀏覽器執(zhí)行js帶來(lái)的頁(yè)面阻塞。使用RequireJS，會(huì)在相關(guān)的js加載后執(zhí)行回調(diào)函數(shù)，這個(gè)過(guò)程是異步的，所以它不會(huì)阻塞頁(yè)面。
按需加載。通過(guò)RequireJS，你可以在需要加載js邏輯的時(shí)候再加載對(duì)應(yīng) 的js模塊，這樣避免了在初始化網(wǎng)頁(yè)的時(shí)候發(fā)生大量的請(qǐng)求和數(shù)據(jù)傳輸，或許對(duì)于一些人來(lái)說(shuō)，某些模塊可能他根本就不需要，那就顯得沒(méi)有必要。
更加方便的模塊依賴管理。相信你曾經(jīng)一定遇到過(guò)因?yàn)閟cript標(biāo)簽順序問(wèn)題而導(dǎo)致依賴關(guān)系發(fā)生錯(cuò)誤，這個(gè)函數(shù)未定義，那個(gè)變量undefine之類的。通過(guò)RequireJS的機(jī)制，你能確保在所有的依賴模塊都加載以后再執(zhí)行相關(guān)的文件，所以可以起到依賴管理的作用。
更加高效的版本管理。想一想，如果你還是用的script腳本引入的方式來(lái)引入一個(gè)jQuery2.x的文件，然后你有100個(gè)頁(yè)面都是這么引用的，那當(dāng)你想換成jQuery3.x，那你就不得不去改這100個(gè)頁(yè)面。但是如果你的requireJS有在config中做jQuery的path映射，那你只需要改一處地方即可。
當(dāng)然還有一些諸如cdn加載不到j(luò)s文件，可以請(qǐng)求本地文件等其它的優(yōu)點(diǎn)，這里就不一一列舉了。
RequireJS 使用需要在頁(yè)面中引入的文件 <script data-main=”js/main” src=”xxx/xxxx/require.js”></script>使用RequireJS，你只需要引入一個(gè)require.js即可。需要說(shuō)明的是，一個(gè)比較好的實(shí)踐，就是你的頁(yè)面上面應(yīng)該也只需要通過(guò)\<script\>標(biāo)簽引入這一個(gè)js即可。然后你這個(gè)頁(yè)面的所有業(yè)務(wù)邏輯只需要在main.js里面寫(xiě)(data-main屬性作用后面會(huì)有講)就可以了。其它引用的依賴怎么辦？當(dāng)然是通過(guò)require按需引入啊！
Require基本概述其實(shí)Requirejs整個(gè)源文件包括注釋就2000來(lái)行，其對(duì)外暴露的變量其實(shí)就三個(gè),requirejs,require,define。
這其中requirejs 只是require的一個(gè)別名，目的是如果頁(yè)面中有require其它實(shí)現(xiàn)了，你還是能通過(guò)使用requirejs來(lái)使用requireJS API的(本文中沒(méi)有相關(guān)沖突，所以還是使用require)。
所以這意味著作為入門(mén)，你只需要掌握require,require.config,define這三樣就可以了。
本文將以介紹require,require.config,data-main,define的順序來(lái)介紹RequireJS。讓比較簡(jiǎn)單的RequireJS更加簡(jiǎn)單，爭(zhēng)取讓大家只看這篇文章就能用好RequireJS。至于RequireJS是如何解決循環(huán)依賴,對(duì)于沒(méi)有實(shí)現(xiàn)amd的模塊如何通過(guò)shim來(lái)導(dǎo)出，如何在node中使用等問(wèn)題。本文并沒(méi)有提及，詳細(xì)有需要可以去官方查閱。
