我們通過一個(gè)簡單的demo來說明如何引用RequireJS來進(jìn)行JS模塊化管理，預(yù)覽效果鏈接如下：
https://greygao.github.io/require-demo/index.html
描述
- 首先窟哺，在主index.html在script中引入我們的require.js的依賴惕医，
<script src="./require.js"></script>
- 由requirejs的說明文檔可知饥漫，我們還需要引用以下聲明來異步加載main.js：
<script data-main="scripts/main" src="require.js"></script>
- main.js可以看作是整個(gè)html的JS管理入口蔼水，之后我們所有的依賴都在main.js里來控制處理。main.js基本內(nèi)容分兩部分
- require.config主要來布置一些外來引入的依賴疏虫，用固定的path定義怎爵，
- requirejs([url],callback)來引入我們自己定義的依賴特石，可以有多個(gè)：
require.config({
paths: {
jquery: 'jquery.min'
}
});
requirejs(["hello"], function(hello) {
//回調(diào)函數(shù)內(nèi)容
var text = JSON.stringify(hello);
var content = document.createElement("div");
content.innerHTML = text;
document.body.appendChild(content);
console.log(2)
});
- 與之相應(yīng)的，被引入的依賴如hello.js就需要用define()來定義鳖链，才可以被成功引用姆蘸，而在define()內(nèi)部，我們可以繼續(xù)引用其他依賴芙委，如frank.js逞敷；
define(["frank"],function (text) {
console.log(text)
console.log(1)
//回調(diào)函數(shù)內(nèi)容
return text;
}
);
- 定義frank.js為一個(gè)數(shù)據(jù)文件：
define(
{
name:"frank",
age:18,
hobby:"coding",
parter:"dog",
sayHi:"Hello, Frank"
}
);
- 為了看出執(zhí)行的先后順序，在每一層函數(shù)里加入了console.log(1),console.log(2).可以看出執(zhí)行順序是先hello.js后main.js：
{name: "frank", age: 18, hobby: "coding", parter: "dog", sayHi: "Hello, Frank"}
1
2
- 這樣就可以實(shí)現(xiàn)一個(gè)RequireJS模塊化管理的基本模型题山，例子中的main.js定義了一個(gè)固定路徑的jquery依賴和自己定義的hello.js模塊兰粉，又在hello.js內(nèi)引入frank.js的數(shù)據(jù)，最后成功拿到frank的數(shù)據(jù)顶瞳，輸出在頁面里玖姑。
