Please enable JavaScript.
Coggle requires JavaScript to display documents.
Understanding JavaScript Modules (CommonJS (volunteer working group that…
Understanding JavaScript Modules
Module Import
Code live inside a scope
This lets us hide variables from the parent (global) namespace
Addy osmani - The module Pattern
Carl Danley - The module Pattern
Ask for a module’s interface without going through the global scope
FunctionDeclaration / FunctionExpression
Named function expressions demystified
parenthesis around the anonymous function are required
console.log(failing());
CommonJS
(volunteer working group that designs and implements JavaScript APIs for declaring modules)
Reusable piece of JavaScript which exports specific objects
making them available for other modules using "require"
Each JavaScript file stores modules in its own unique module context (just like wrapping it in a closure)
In this scope, we use the module.exports object to expose modules, and require to import them
EXAMPLE
REQUIRE
Use special object "module" and place a reference of function into module.exports
This lets the CommonJS module system know what we want to expose so that other files can consume it
Benefits
Avoiding global namespace pollution
Making our dependencies explicit
takes a server-first approach and synchronously loads modules. Ff we have three other modules we need to require, it’ll load them one by one
Downsides
For as long as the script to load a module is running, it blocks the browser from running anything else until it finishes loading. It behaves this way because the JavaScript thread stops until the code has been loaded
Syncronous Load
AMD
Asynchronous Module Definition
EXAMPLE - Loading modules using AMD
define function takes as its first argument an array of each of the module’s dependencies
dependencies are loaded in the background (in a non-blocking manner), and once loaded define calls the callback function it was given
Next, the callback function takes, as arguments, the dependencies that were loaded allowing the function to use these dependencies
Finally, the dependencies themselves must also be defined using the define keyword
EXAMPLE MODULE TO BE LOADED
Benefits
browser-first approach alongside asynchronous behavior
modules can be objects, functions, constructors, strings, JSON and many other types, while CommonJS only supports objects as modules
Downsides
Isn’t compatible with io, filesystem, and other server-oriented features available via CommonJS
function wrapping syntax is a bit more verbose compared to a simple require statement
Native JS :check:
TC39 introduced built-in modules
with ECMAScript 6 (ES6)
example Node.js modules, and how they look in JavaScript Next
ES6 Modules
Benefits
compact and declarative syntax and asynchronous loading
better support for cyclic dependencies
imports are live read-only views of the exports. (Compare this to CommonJS, where imports are copies of exports and consequently not alive)
Example
Common JS
:red_cross:
make two copies of the module: one when we export it, and one when we require it
copy in main.js is now disconnected from the original module That’s why even when we increment our counter it still returns 1 — because the counter variable that we imported is a disconnected copy of the counter variable from the module.
So, incrementing the counter will increment it in the module, but won’t increment your copied version. The only way to modify the copied version of the counter variable is to do so manually
EXAMPLE ES6 IMPORT
:check:
ES6 creates a
live read-only view
of the modules we import
live read-only views is how they allow you to split your modules into smaller pieces without losing functionality
Then you can turn around and merge them again, no problem. It just “works.”