Skip to content

Instantly share code, notes, and snippets.

@branneman
Last active December 7, 2022 22:01
Show Gist options
  • Save branneman/558ef3a37ffd58ea004e00db5b201677 to your computer and use it in GitHub Desktop.
Save branneman/558ef3a37ffd58ea004e00db5b201677 to your computer and use it in GitHub Desktop.
A history of different JavaScript module formats - https://youtu.be/GebL7ToOohE
var MY_CONSTANT = 42
// Implementation of a class
var MyClass = function () {
// constructor
}
MyClass.prototype.getAnswer = function () {
return MY_CONSTANT
}
// Consumer of a class
var myInstance = new MyClass()
myInstance.getAnswer()
// Namespace: still a global, but at least 'scoped'
window.NS = {} || window.NS
// Dependency of MyClass, not in global scope
NS.MY_CONSTANT = 42
// Implementation of a class
NS.MyClass = function () {
// constructor
}
NS.MyClass.prototype.getAnswer = function () {
return NS.MY_CONSTANT
}
//////////////////////////////////////////////////
// functionality available via namespace access
new NS.Carrousel()
;(function () {
// internal definition - truly private, no globals
var MY_CONSTANT = 42
// Implementation of a class
var MyClass = function () {
// constructor
}
MyClass.prototype.getAnswer = function () {
return MY_CONSTANT
}
// Consumer of a class
var myInstance = new MyClass()
myInstance.getAnswer()
})()
// dependencies specified as arguments
var MyClass = (function (jQuery) {
// internal definition - truly private, no globals
var APPROXIMATE_ANSWER = 40
// Implementation of a class
var MyClass = function () {
this.answerModifier = jQuery.get('https://answ.er/')
}
MyClass.prototype.getAnswer = function () {
return APPROXIMATE_ANSWER + this.answerModifier
}
// functionality available via explicit return
return MyClass
})(jQuery) // dependencies given as arguments
//////////////////////////////////////////////////
// Consumer of a class
var myInstance = new MyClass()
myInstance.getAnswer()
// dependencies loaded via require()
var http = require('http')
var router = require('./router.js')
var startServer = function () {
var server = http.createServer(router)
server.listen(8080)
}
// functionality available via explicit export
exports = { startServer } // same as module.exports
//////////////////////////////////////////////////
;(function (exports, require, module, __filename, __dirname) {
//
// ... your source code
//
}.call(thisValue, exports, require, module, filename, dirname))
// dependencies specified as arguments
define(['jquery', 'b'], function (jQuery, b) {
// internal definition - truly private, no globals
var APPROXIMATE_ANSWER = 40
// Implementation of a class
var MyClass = function () {
this.answerModifier = jQuery.get('https://answ.er/')
}
MyClass.prototype.getAnswer = function () {
return APPROXIMATE_ANSWER + this.answerModifier
}
// functionality available via explicit return
return MyClass
})
define(function (require) {
// ..
// async dependencies specified as arguments to require()
require(['jquery'], function (jQuery) {
// internal definition - truly private, no globals
var APPROXIMATE_ANSWER = 40
// Implementation of a class
var MyClass = function () {
this.answerModifier = jQuery.get('https://answ.er/')
}
MyClass.prototype.getAnswer = function () {
return APPROXIMATE_ANSWER + this.answerModifier
}
})
})
// Universal Module Definition
;(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory)
} else if (typeof module === 'object' && module.exports) {
module.exports = factory(require('jquery'))
} else {
root.returnExports = factory(root.jquery)
}
})(typeof self !== 'undefined' ? self : this, function (jquery) {
//
// ... your source code, using `jquery`
//
})
import express from 'npm:express@^4.18'
const ANSWER = 42
class MyClass {
constructor() {
// ...
}
async getAnswer() {
const { sqrt } = await import('math')
return sqrt(1764)
}
}
export { ANSWER } // list of named exports
export default MyClass // single unnamed export
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment