前端模組化 AMD 詳解

"a.js"
>
<
/script>
"b.js"
>
<
/script>
"d.js"
>
<
/script>
"e.js"
>
<
/script>
"f.js"
>
<
/script>
"g.js"
>
<
/script>

上面這樣載入主要出現的問題：

為了解決這樣的問題於是有了require.js

官網位址

現在比較常用的amd

主要分為3步：

"js/require.js"
>
<
/script>

然後定義模組，

define
("模組名稱",[
"模組的依賴項"],
function()
)

在require.js中，引用乙個模組使用require.js提供的函式 require()

語法： require([
"模組檔案的路徑(不帶.js字尾的)"],
function()
)

定義模組的時候，有匯出項的情況

模組有匯出項，怎麼使用匯出項？

require([
"./modules/b"
,"./modules/c"
,'./modules/a'],
function
(mb, mc)
)

模組的依賴項

在定義乙個模組的時候，這個模組內部可能會使用到其他模組的內容，這些其他模組就可以稱作當前模組的依賴項

//5-模組的 依賴項
define([
'./c'],
function
(toolbox)
);

 在require.js中，模組路徑的查詢方式, 一共有三種：

不做任何配置，直接以當前檔案的路徑作為參照require(["./modules/a"])如果設定了data-main屬性，那麼模組的查詢，會以data-main指定的檔案的路徑作為基礎（幾乎不用）

data-main是乙個屬性，是引入require.js的script標籤的屬性

這個屬性可以用來指定乙個檔案，載入檔案的路徑會以這路徑為基礎，指定的檔案會在require.js載入完畢之後，通過非同步的方式載入，並且執行裡面的**,

"require.js" data-main=
"./js/"
>
<
/script>

如果通過require.config方法配置了基礎路徑，那麼所有的模組查詢都會以這個基礎路徑作為參照

//config方法是用來配置require的一些載入規則的！
require.
config(}
)//當引用模組的時候，模組的路徑  baseurl + 引用模組的路徑
// require(["dianzuan"]);

注意：第三種方式中找檔案的規則是：baseurl + paths

注意: 第三種方式中, 找檔案的規則是: baseurl + 檔案路徑或者 baseurl + paths 如果引用模組的時候, 路徑寫法是如下 3 種形式之一, 就不遵守上面的規則了 1. 檔案路徑加上了 .js 字尾, 將不拼接基礎路徑, 直接按照配置的路徑查詢 2. 檔案路徑是以 / 開頭的絕對路徑, 會直接以絕對路徑讀取 (需要加上 .js 字尾) 3. 檔案路徑以 http: // 或者 https:

// 開頭的

有依賴項且有匯出項

require.
config(,
中可通過設定shim，讓不支援模組化的第三方內容
//和require.js能夠實現更好的配合
shim:
,//配置abc
abc:}}
)

前端模組化 AMD 詳解

前端模組化

前端模組化

前端模組化

相關推薦