前端進階課程之模塊化（二）AMD規範

時間 2019-12-02

標籤前端進階課程模塊化 amd 規範简体版

原文原文鏈接

一：require.js

疑問：爲何會出現AMD規範呢？爲何會出現require.js呢？解決了什麼問題？html

答案：在沒有AMD規範以前，咱們是採用Commonjs規範，可是Commonjs規範是同步加載模塊，它是node普通採用的一種模塊機制，對於node而言，常見的加載本地文件或者其餘各類I/O操做，速度是很快的，咱們採用同步機制去加載模塊文件是沒有問題的，可是對於瀏覽器端而言，請求網絡資源的速度是很慢的，若是依然採用同步方式去請求資源，瀏覽器端極可能形成阻塞問題，node

因此，解決方法是什麼呢？AMD(Asynchronous Module Definition) 異步模塊定義而require.js是AMD規範的具體實現。瀏覽器

例如：以下代碼，bash

咱們但願在index.html，引入main.js, a.js, b.js, c.js四個js文件網絡

第一種：最原始的作法，在index.html裏面，從上到下同步加載異步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./lib/a.js"></script>
<script src="./lib/b.js"></script>
<script src="./lib/c.js"></script>
<script src="./lib/main.js"></script>
</body>
</html>
問題：這樣只能從上到下，同步加載js文件，可能因爲前面的js文件過大，形成阻塞問題
複製代碼

第二種：採用require.js來異步加載js文件函數

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
//data-main去聲明主入口文件
<script src="./require.js" data-main="./main.js"></script>
</body>
</html>
//main.js
//寫法1：直接引入js文件
require(['./a', './b', './c'], function () {
   console.log('文件所有加載成功');
});
//寫法2：設置js文件別名
require.config({
    paths: {
        aaa: './lib/a',
        bbb: './lib/b',
        ccc: './lib/c'
    }
});
或者
require.config({
    baseUrl: './lib',
    paths: {
        aaa: 'a',
        bbb: 'b',
        ccc: 'c'
    }
});

require(['aaa', 'bbb', 'ccc'], function () {
    console.log('文件所有加載成功');
});
複製代碼

二：AMD與require.js的關係

經過上面，能夠知道：ui

AMD是一種規範，而require.js是真正的實現，主要解決了兩個問題：spa

1：實現js文件的異步加載，避免同步加載致使的網頁阻塞code

2: 定義模塊之間如何相互依賴，能夠更好的管理模塊。

三：AMD規範代碼實例

//index.html ： 引入require.js，肯定主入口文件main.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./require.js" data-main="./main.js"></script>
</body>
說明：data-main屬性用於說明require.js加載的模塊主入口是什麼。
複製代碼

//在main.js中引入a.js模塊：
require.config({
    baseUrl: './lib',
    paths: {
        aaa: 'a',
    }
});
require(['aaa'], function (a) {
    console.log(a);//此處，在回調方法中，就能夠獲取define中定義的對象：{name: '111'}
});

複製代碼

//a.js： 使用define方法直接傳入一個對象，或者傳入一個函數，函數返回一個對象
define({
    name: '111'
});

複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。