Last active
December 7, 2022 22:01
-
-
Save branneman/558ef3a37ffd58ea004e00db5b201677 to your computer and use it in GitHub Desktop.
A history of different JavaScript module formats - https://youtu.be/GebL7ToOohE
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
;(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() | |
})() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
} | |
}) | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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` | |
// | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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