JavaScript模塊化編程之AMD - requireJS基礎使用

時間 2019-11-18

標籤 javascript 模塊化編程 amd requirejs 基礎使用欄目 JavaScript 简体版

原文原文鏈接

JavaScript模塊化編程之AMD

requireJS基礎使用

標籤（空格分隔）： JavaScriptjavascript

AMD規範html

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。vue

require.js做用java

實現js文件的異步加載，避免網頁失去響應；

管理模塊之間的依賴性，便於代碼的編寫和維護。

首先引入requireJS文件，並在script標籤上指定入口文件(主模塊)：jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript模塊化編程</title>
</head>
<body>

<script type="text/javascript" src="https://cdn.bootcss.com/require.js/2.3.5/require.js" defer async data-main="js/main.js"></script>
</body>
</html>

接下來須要對main.js進行一些配置：git

// 模塊加載的配置
require.config({
    // 基目錄 若是每一個模塊不在一個基目錄
    // 不使用baseUrl直接在paths中具體指定
    baseUrl: "lib",
    paths: {
        'jquery': 'jquery',
        'vue': 'vue.min',
        'pagination': 'my-pager'
    },

    // shim屬性 專門用來配置不兼容的模塊 每一個模塊要定義:
    // (1) exports值（輸出的變量名）代表這個模塊外部調用時的名稱
    // (2) deps數組 代表該模塊的依賴性
    // 好比jq的插件能夠這樣定義
    shim: {
        'jquery.scroll': {
            deps: ['jquery'],
            exports: 'jQuery.fn.scroll'
        }
    }

    // requireJS還有一系列插件 再也不贅述
    // [Plugins](https://github.com/requirejs/requirejs/wiki/Plugins)
});

// 主模塊依賴於其它模塊，這時就須要使用AMD規範定義的require()函數
// require([modules], function (modules) { });
require(['jquery', 'vue', 'pagination'], function ($, Vue, pagination) {
    console.log($);
    console.log(Vue);
    console.log(pagination);
});

關於本身定義符合AMD規範的模塊，好比上面例子中的pagination:github

;(function (factory) {
    if (typeof exports === 'object') {
        // Node/CommonJS
        factory(require('document'), require('window'));
    } else if (typeof define === 'function' && define.amd) {
        // AMD
        define(factory(document, window));
    } else {
        // Browser globals
        factory(document, window);
    }
}(function (document, window) {
    var Test = {
        a: 1
    }

    if (typeof module != 'undefined' && module.exports) {
        module.exports = Test;
    } else if (typeof define == 'function' && define.amd) {
        define(function () { return Test; });
    } else {
        window.Test = Test;
    }
}));

源碼地址編程

The end... Last updated by: Jehorn, Jan 04, 2018, 10:35 AM數組