03 AMD規範的基礎使用詳解

過青年發表於2020-07-20

AMD模組規範

1.1 AMD規範說明

AMD規範專門用來實現瀏覽器端的模組化，並且模組的載入是非同步的；引入一個第三方的require.js指令碼用來解析AMD規範編寫的模組

1.2 基本語法

使用define用來暴露模組，使用require用來引入模組

1.21暴露模組

（1）使用define(function(){})函式定義模組；並且向外暴露

// 定義一個沒有依賴模組的data.js模組
define(function(){
    let name = '過青年';
    function getName(){
        console.log(name);
        return name;
    }
    // 暴露模組，推薦暴露物件
    return {name,getName};
});

（2）使用define(['module','module2'],function(){})定義有依賴的模組，注意，陣列裡面的模組名只是一個代號，不一定要寫模組名；不過推薦使用模組名作為代號，這樣別人一看就知道引入了哪個模組，不用加字尾

// 定義一個有依賴模組的server.js模組
// 將依賴模組作為實參傳遞進去
define(['data'],function(data){
    let age = 20;
    function showName(){
        console.log(data.name);
        return name;
    }
    return {age,showName};
});
1.22引入模組

在主模組app.js中引入其他模組，使用require函式；需要使用require.config配置其他模組的路徑

我們的路徑是這樣的

image-20200712100232897

// app.js
(function(){
    require.config({
        // 以相對目錄的方式指定一個基本路徑
        baseUrl:'./js/',
        paths:{
            // 以基本路徑開始的相對路徑
            data:'./module/data',
            server:'./module/server'
        }
    });
    require(['server'],function(server){
    //會將模組當作引數傳進來
    	console.log(server.age); // 20
        console.log(server.showName());  // 過青年
	});
})()

  1. 我們從HTML開始解析頁面

  2. HTML頁面引入的require.js根據data-main屬性發現主模組是js目錄下的app.js

  3. 於是進入app.js頁面進行解析；解析app.js頁面，發現引入了一個叫server的模組，那麼這個模組在哪裡呢？通過app.js頁面中的配置函式require.config()發現server這個模組在./js/module/server.js（我們寫路徑的時候不能加上字尾，因為解析時預設會新增字尾）

  4. 於是找到了這個模組，進入這個server模組，結果發現這個server模組又引入了一個叫data的模組，於是又通過app.js的配置函式找，發現data模組在./js/module/server.js中，於是載入這個模組

  5. 模組全部載入完成

1.23在HTML頁面上使用模組化

AMD規範本來就是用來實現瀏覽器端的模組化的；而require.js指令碼就是這個規範的一種實現

script指令碼中的data-main屬性值代表主模組，從主模組進入模組內部，依次載入其他模組的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AMD規範實現</title>
</head>
<body>
    <script src="./js/libs/require.min.js" data-main="./js/app.js"></script>
</body>
</html>

總結

  • 使用AMD規範需要引入require.js——第三方編寫的指令碼
  • 根據data-main確認主模組
  • 根據主模組中的require.config({ })函式確定各模組的位置
  • require.config({ })中各個模組的路徑不能加字尾.js

相關文章