多是最詳細的UMD模塊入門指南

時間 2019-11-08

標籤詳細 umd 模塊入門指南简体版

原文原文鏈接

學習UMD

介紹

這個倉庫記錄了一些關於javascript UMD模塊規範的demo，對我學習UMD規範有了很大幫助，但願也能幫助到你。javascript

回顧

以前也寫了幾篇關於javascript模塊的博客，連接以下：html

近幾天準備總結一下javascript模塊的知識點，因此建了這個Git倉庫，若是能幫助到您，麻煩點個star哦，很是感謝！java

這篇博客主要說下本身關於UMD的一點認知和思考，從實現一個簡單的UMD模塊，再到實現一個有依賴關係的UMD模塊，整個過程加深了我對UMD模塊的理解。node

什麼是UMD

所謂UMD (Universal Module Definition)，就是一種javascript通用模塊定義規範，讓你的模塊能在javascript全部運行環境中發揮做用。git

簡單UMD模塊的實現

實現一個UMD模塊，就要考慮現有的主流javascript模塊規範了，如CommonJS, AMD, CMD等。那麼如何才能同時知足這幾種規範呢？github

首先要想到，模塊最終是要導出一個對象，函數，或者變量。shell

而不一樣的模塊規範，關於模塊導出這部分的定義是徹底不同的。編程

所以，咱們須要一種過渡機制。小程序

首先，咱們須要一個factory，也就是工廠函數，它只負責返回你須要導出的內容（對象，函數，變量等）。hexo

咱們從導出一個簡單的對象開始。

function factory() {
    return {
        name: '我是一個umd模塊'
    }
}
複製代碼

全局對象掛載屬性

假設不考慮CommonJS, AMD, CMD，僅僅將這個模塊做爲全局對象的一個屬性應該怎麼寫呢？

(function(root, factory) {
    console.log('沒有模塊環境，直接掛載在全局對象上')
    root.umdModule = factory();
}(this, function() {
    return {
        name: '我是一個umd模塊'
    }
}))
複製代碼

咱們把factory寫成一個匿名函數，利用IIFE（當即執行函數）去執行工廠函數，返回的對象賦值給root.umdModule，這裏的root就是指向全局對象this，其值多是window或者global，視運行環境而定。

打開效果頁面連接（要看源碼的話，點開Git倉庫），觀察Network的文件加載順序，能夠看到，原則就是依賴先行。

再進一步，兼容AMD規範

要兼容AMD也簡單，判斷一下環境，是否知足AMD規範。若是知足，則使用require.js提供的define函數定義模塊。

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        // 若是環境中有define函數，而且define函數具有amd屬性，則能夠判斷當前環境知足AMD規範
        console.log('是AMD模塊規範，如require.js')
        define(factory)
    } else {
        console.log('沒有模塊環境，直接掛載在全局對象上')
        root.umdModule = factory();
    }
}(this, function() {
    return {
        name: '我是一個umd模塊'
    }
}))
複製代碼

打開效果頁面連接，能夠看到，原則是調用者先加載，所依賴的模塊後加載。

起飛，直接UMD

同理，接着判斷當前環境是否知足CommonJS或CMD規範，分別使用相應的模塊定義方法進行模塊定義。

(function(root, factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        console.log('是commonjs模塊規範，nodejs環境')
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) {
        console.log('是AMD模塊規範，如require.js')
        define(factory)
    } else if (typeof define === 'function' && define.cmd) {
        console.log('是CMD模塊規範，如sea.js')
        define(function(require, exports, module) {
            module.exports = factory()
        })
    } else {
        console.log('沒有模塊環境，直接掛載在全局對象上')
        root.umdModule = factory();
    }
}(this, function() {
    return {
        name: '我是一個umd模塊'
    }
}))
複製代碼

最終，使用require.js, sea.js, nodejs或全局對象掛載屬性等方式都能完美地使用umd-module.js這個模塊，實現了大一統。

給個sea.js調用UMD的效果頁面連接，sea.js調用UMD模塊

而nodejs調用UMD模塊須要執行node命令，

node umd-simple-used-by-nodejs
複製代碼

效果以下：

有依賴關係的UMD模塊

固然，咱們不能止步於此，模塊會被調用，固然也會調用其餘模塊。所以咱們還須要實現一個有依賴關係的UMD模塊，來驗證UMD規範的可行性。

全局對象掛載屬性

這個簡單，在html中你的模塊前引入所依賴的模塊便可。umd-module-depended和umd-module都是UMD模塊，後者依賴前者。

<!DOCTYPE html>
<html>
    <head>
        <title>Test UMD</title>
        <!-- 依賴放前面 -->
        <script src="assets/js/umd-dep/umd-module-depended.js"></script>
        <script src="assets/js/umd-dep/umd-module.js"></script>
        <script src="assets/js/umd-dep/umd-global.js"></script>
    </head>
    <body>
        <h1>測試UMD模塊</h1>
        <h2></h2>
        <p id="content"></p>
        <p id="content2"></p>
    </body>
</html>
複製代碼

點開效果頁面連接，看得更清楚明白！

兼容AMD規範

咱們先在入口文件umd-main-requirejs.js中，定義好模塊路徑，方便調用。

require.config({
    baseUrl: "./assets/js/umd-dep/",
    paths: {
        umd: "umd-module",
        depModule: "umd-module-depended"
    }
});
複製代碼

被依賴的模塊umd-module-depended，只須要簡單實現UMD規範便可。

而調用者umd-module，則須要作一些處理。按照require.js的規範來便可， define時，指定依賴的模塊depModule，而匿名工廠函數須要在參數上接收依賴的模塊depModule。

(function(root, factory) {
    if (typeof define === 'function' && define.amd) {
        console.log('是AMD模塊規範，如require.js')
        define(['depModule'], factory)
    } else {
        console.log('沒有模塊環境，直接掛載在全局對象上')
        root.umdModule = factory(root.depModule);
    }
}(this, function(depModule) {
    console.log('我調用了依賴模塊', depModule)
    // ...省略了一些代碼，去代碼倉庫看吧
    return {
        name: '我本身是一個umd模塊'
    }
}))
複製代碼

打開效果頁面連接，看得更清楚明白！

UMD依賴寫法

同理，各類規範要求你怎麼寫模塊依賴，你就怎麼寫就行。

(function(root, factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        console.log('是commonjs模塊規範，nodejs環境')
        var depModule = require('./umd-module-depended')
        module.exports = factory(depModule);
    } else if (typeof define === 'function' && define.amd) {
        console.log('是AMD模塊規範，如require.js')
        define(['depModule'], factory)
    } else if (typeof define === 'function' && define.cmd) {
        console.log('是CMD模塊規範，如sea.js')
        define(function(require, exports, module) {
            var depModule = require('depModule')
            module.exports = factory(depModule)
        })
    } else {
        console.log('沒有模塊環境，直接掛載在全局對象上')
        root.umdModule = factory(root.depModule);
    }
}(this, function(depModule) {
    console.log('我調用了依賴模塊', depModule)
	// ...省略了一些代碼，去代碼倉庫看吧
    return {
        name: '我本身是一個umd模塊'
    }
}))
複製代碼

給個sea.js調用的示例連接。

而nodejs調用也是經過命令行測試，

node umd-dep-used-by-nodejs
複製代碼

效果以下：

總結

以上實現了簡單的UMD模塊，也驗證了UMD模塊間存在依賴關係時的可行性。雖然本文是以簡單對象導出爲例，但足以做爲咱們深刻UMD規範的起點，加油！

最後厚着臉皮求個star，點亮我吧

首發連接

掃一掃下方小程序二維碼或搜索Tusi博客，即刻閱讀最新文章！

相關標籤/搜索