iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 8
0
Software Development

模組化設計系列 第 8

Day08 - ECMAScript 5 模組規範

ES5 跟 ES6 在模組規範上,採取不同的模式。

CommonJS (CJS)

  • CJS 是採同步的,CJS 規範是為了在瀏覽器環境之外構建 JavaScript 生態系統,為此目標而產生的規範,例如後端環境 (nodejs)。
  • http://wiki.commonjs.org/wiki/CommonJS

宣告模組

function greeting(name) {
  return `Hi, ${name}`
}

module.exports = greeting

使用模組

const greeting = require('./greeting')
console.log(greeting('ALin'))
  • 優點:簡單容易使用
  • 缺點:同步的模塊加載方式不適合在瀏覽器環境中

誰在使用它

  • Browserify:瀏覽器端的 CommonJS 實現,可以使用 NPM 的模塊,但是編譯打包後的文件體積可能很大

AMD

宣告模組

define('myModule', ['jquery'], function($) {
  $('body').text('hello world')
})

使用模組

require(['myModule'], function(myModule) {})

誰在使用它

  • RequireJS:用於前端的模組管理工具

CMD

優點

  • 依賴就近,延遲執行
  • 可以很容易在 Node.js 中運行

誰在使用它

  • Sea.js

AMD vs CMD

  • 對於依賴的模塊,AMD 是提前執行,CMD 是延遲執行。不過 RequireJS 從 2.0 開始,也可支援延遲執行。
  • CMD 推崇 as lazy as possible.CMD 推崇依賴就近,AMD 推崇依賴前置

UMD

  • UMD 提供兼容 CommonJS 和 AMD 的語法糖,又稱混合模式,規範的目的是解決跨平台的使用情境。
  • https://github.com/umdjs/umd

上一篇
Day07 - 與模組模式的第一次相遇
下一篇
Day09 - ECMAScript 6 模組規範
系列文
模組化設計30

尚未有邦友留言

立即登入留言