commonJs、AMD、UMD、es6 到底是怎麼用的

黃小波波 發表於 2021-10-11
JavaScript ES6

https://segmentfault.com/a/11... 這篇文章寫的比較詳細,但是有一些以前困惑我的點還是需要單獨記一下的。

commonjs

Node 應用由模組組成,採用 CommonJS 模組規範。也就是說CommonJs是應用在node伺服器端的,如果瀏覽器想使用CommonJs規範的話需要用 browserify庫 來進行轉化。CommonJs分為兩部分:moudle物件和requeire命令。也就是說要用 node 執行的程式碼,就只能遵循 commonjs 規範,使用 module.export 物件匯出,使用 require 方法匯入。想要寫 export default / import 之類的 node 端執行的程式碼就需要單獨配置(網上另找)。node 內部提供一個 module 的構建函式直接使用 console.log(module) 就可以看到所有的屬性
image.png

amd

因為 commonjs 規範載入依賴資源是同步載入的,載入過程中是一直卡住的,所以 amd 是這樣的寫一堆需要載入的內容,然後將要執行的程式碼放在載入完成之後,require.js 就是 amd 規範的實踐。使用方式是這樣的

<script src='../node_modules/requirejs/require.js' data-main='./index'></script>
// data-main屬性的作用是,指定網頁程式的主模組。在上例中,就是js目錄下面的index.js,這個檔案會第一個被require.js載入。由於require.js預設的檔案字尾名是js,所以可以把index

amd 規範的 lib 庫該如何寫呢

// moduleA.js
  define(function (){
    var add = function (x,y){
      return x+y;
    };
    return {
      add: add
    };
  });

是的,引入 require.js 之後會提供全域性的 define 方法,所以 lib 庫只需要直接使用 define 方法就好了。使用的時候是這樣的

// index.js
  require(['moduleA'], function (moduleA){
    console.log(moduleA)
       //moduleA就是moduleA.js模組傳入的函式執行後返回的物件{add:function}
 });

umd

umd

唉,😮‍💨,午覺沒睡醒就叫起來開會。累了,不想寫了