「JavaScript」如何讓你的插件兼容CommonJS, AMD, CMD 和原生 JS

ShevaKuilin 發布于2019-08-21 10:40 / 548人閱讀

摘要：模塊標準有三個全局變量和。模塊中有兩種方式提供對外的接口，一種是，一種是使用進行返回。規范中，函數同樣有一個公有屬性。由于和都可以使用來定義對外接口，故可以合并成一句代碼。

模塊標準 CommonJS

CommonJS 有三個全局變量 module、exports 和 require。但是由于 AMD 也有 require 這個全局變量，故不使用這個變量來進行檢測。

如果想要對外提供接口的話，可以將接口綁定到 exports （即 module.exports）上。

function MyModule() {
    // ...
}

if(typeof module !== `undefined` && typeof exports === `object`) {
    module.exports = MyModule;
}

CMD

CMD 規范中定義了 define 函數有一個公有屬性 define.cmd。

CMD 模塊中有兩種方式提供對外的接口，一種是 exports.MyModule = ...，一種是使用 return 進行返回。

AMD

AMD 規范中，define 函數同樣有一個公有屬性 define.amd。

AMD 中的參數便是這個模塊的依賴。那么如何在 AMD 中提供接口呢？它是返回一個對象，這個對象就作為這個模塊的接口，故我們可以這樣寫：

function MyModule() {
    // ...
}

if(typeof define === `function` && define.amd) {
    define(function() { return MyModule; });
}

總結

我們除了提供 AMD 模塊接口，CMD 模塊接口，還得提供原生的 JS 接口。
由于 CMD 和 AMD 都可以使用 return 來定義對外接口，故可以合并成一句代碼。

一個直接可以用的代碼如下：

;(function(){
    function MyModule() {
        // ...
    }
    
    var moduleName = MyModule;
    if (typeof module !== "undefined" && typeof exports === "object") {
        module.exports = moduleName;
    } else if (typeof define === "function" && (define.amd || define.cmd)) {
        define(function() { return moduleName; });
    } else {
        this.moduleName = moduleName;
    }
}).call(this || (typeof window !== "undefined" ? window : global);

云服務器 GPU云服務器原生js彈窗插件 amd_cmd區別原生js和jquery 原生js如何寫動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85985.html

OMD: javascript模塊化開發兼容CommonJS, AMD, CMD 以及原生 JS

摘要：它就是一套兼容方案，目前兼容的有以及原生支持。返回值問題在第一次使用時，。具體是什么意義呢的返回值，其實就是插件提供的對外接口，而實際上，就是一個對象。而在環境下，只需要將這個返回值賦予即可完成該模塊的接口。有更新，請到github上看源碼什么是OMD 在node.js流行起來之前，javascript的開發方式都是函數式的順序依賴關系，直到node火起來。CommonJS其實首先...

lavor 2019-08-19 17:31 評論0 收藏0
讓你基于jQuery的插件兼容commonjs,amd規范

摘要：示例小明小明小明小明小花小花姓名價格基于上面的方法我寫了個簡易的基于的自動生成表格的插件，可以合并單元格。對于兼容這些規范，寫法也很多，希望多多指教完整代碼事情是這樣的，我寫了一個基于jQuery的插件，在傳統的開發模式中，我們需要現在頁面引入jQuery.js，然后在引入我們的插件，我們的插件才能使用。但是隨著webpack的興起，我不在想一步步的寫入script標簽，寫著一堆的s...

GeekGhc 2019-08-20 16:20 評論0 收藏0
JavaScript模塊化發展

摘要：所有依賴這個模塊的語句，都定義在一個回調函數中，等到所有依賴加載完成之后前置依賴，這個回調函數才會運行。如果將前面的代碼改寫成形式，就是下面這樣定義了一個文件，該文件依賴模塊，當模塊加載完畢之后執行回調函數，這里并沒有暴露任何變量。模塊化是我們日常開發都要用到的基本技能，使用簡單且方便，但是很少人能說出來但是的原因及發展過程。現在通過對比不同時期的js的發展，將JavaScript模...

mengbo 2019-08-22 18:05 評論0 收藏0
庫&插件&框架&工具

摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享淺談前端線上部署與運維說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...

Codeing_ls 2019-08-01 18:22 評論0 收藏0
庫&插件&框架&工具

摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享淺談前端線上部署與運維說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...

xiaowugui666 2019-08-21 18:43 評論0 收藏0