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

黃小波波發表於2021-10-11
JS

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

唉，?‍?，午覺沒睡醒就叫起來開會。累了，不想寫了

相關文章