require js(一)簡單使用
阿新 • • 發佈:2019-02-01
起始
其實這個算是很老套的東西了,只不過我一直沒用過,然後因為專案也沒條件去用vue
等一些框架,然後因為一個以前的專案有可能需要重構(easyui
寫的),然後想著自己上一個專案完全就是堆起來的,所以就把以前的老東西撿起來看了看能不能對目前的專案進行一些優化。
學習
因為以前也用過vue
,所以對ES6
的module
有一些瞭解,然後在網上看了一些require js
的介紹和教程。所以這一篇就是簡單的使用和介紹。
目錄
__test
|__js
|__require.min.js
|__main.js
|__module.js
|__index.html
程式碼
index.html
<body>
<script data-main='js/main' src="./js/require.min.js"></script>
</body>
data-main
:require.js 在載入的時候會檢察data-main 屬性。
注意:你在main.js中所設定的指令碼是非同步載入的。所以如果你在頁面中配置了其它JS載入,則不能保證它們所依賴的JS已經載入成功。
建議:一個頁面的程式碼都寫到這個main.js
中,有多個頁面可以不同命名。
module.js
define(function () {
var add = function (x, y) {
return x + y;
};
var add2 = function (x, y) {
return x - y;
}
return {
add: add,
add2: add2
}
}
==
define(function () {
return {
add: function (x, y) {
return x + y;
},
add2: function (x, y) {
return x - y;
}
}
}
define
:定義模組,如果一個模組沒有任何依賴,但需要一個做setup工作的函式,則在define()中定義該函式,並將其傳給define()。如果模組存在依賴:則第一個引數是依賴的名稱陣列;第二個引數是函式,在模組的所有依賴載入完畢後,該函式會被呼叫來定義該模組,因此該模組應該返回一個定義了本模組的object。具體可參考main.js
,只不過需要把require
改為define
即可
main.js
require([
'moduleA',
], function (mb) {
'use strict';
console.log(mb.add(1, 2))
});
執行結果:3