什么是requirejs
要說requirejs就要先說一下AMD。
AMD是”Asynchronous Module Definition”的縮寫，意思就是”異步模塊定義”。它采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。
我們要介紹的require.js就是AMD規(guī)范實現(xiàn)的一個庫。
requirejs的作用
require.js可以很好的解決兩個問題
- 實現(xiàn)js文件的異步加載，避免網(wǎng)頁失去響應；
- 管理模塊之間的依賴性，便于代碼的編寫和維護。
如何使用requirejs
鑒于requirejs官網(wǎng)文檔實在太爛，我就直接說一下具體使用流程
- 首先，在index.html的script中引入我們的require.js的依賴，以及main來異步加載main.js(由于require.js默認的文件后綴名是js，所以可以把main.js簡寫成main)
<script data-main="./main.js" src="./vendors/require.js"></script>
-
main.js可以看作是整個html的JS管理入口，之后我們所有的依賴都在main.js里來控制處理。
main.js基本內(nèi)容分兩部分- require.config()主要來布置一些外來引入的依賴，用固定的path定義，
- require([url],callback)來引入我們自己定義的依賴，可以有多個：
require.config({
paths: {
jquery: 'jquery.min'
}
});
requirejs(['./hello'],function(x){
document.body.append(x.person.name)
console.log(2)
}
- 用define()來定義被引入的依賴,如hello.js.而在define()內(nèi)部，我們可以繼續(xù)引用其他依賴，如frank.js；
define(['./frank'],function(frank){
console.log(1)
return {
person:frank
}
})
4.定義frank.js為一個數(shù)據(jù)文件：
define({
name: "Hello,Frank",
age: 18
});
5.為了看出執(zhí)行的先后順序，在每一層函數(shù)里加入了console.log(1),console.log(2).可以看出執(zhí)行順序是先hello.js后main.js：
6.這樣就可以實現(xiàn)一個RequireJS模塊化管理的基本模型，例子中的main.js定義了一個固定路徑的jquery依賴和自己定義的hello.js模塊，又在hello.js內(nèi)引入frank.js的數(shù)據(jù)，最后成功拿到frank的數(shù)據(jù)，輸出在頁面里。
當我們打開index.html，可以看到
Hello,Frank
