My sort of JavaScript cheat in one place 😄
Or Module Systems in JavaScript. Where "modules" refers to a small unit of independent, reusable code.
- Maintainability
- Namespacing
- Reusability
-
AMD (Asynchronous Module Definition)
- Browser-first approach
- Loads modules asynchronously
define([], function() { /* ... */ });
-
- Used in Node.js
- Server-first approach
- Loads modules synchronously
// module.js module.exports = { /* ... */ }; // app.js require('./module');
-
- Compact and declarative syntax, also asynchronous module loading
- imports are live read-only views of the exports (with
CommonJS
imports are copies of exports, consequently not alive)
// module.js export const HELLO_WORLD = 'Konnichiwa ES6'; export default { /* ... */ }; // app.js import * as modules from './module';
-
IIFE (Immediately-Invoked Function Expression)
(function() { /* ... */ })();
-
UMD (Universal Module Definition)
- Supports both
CommonJS
andAMD
features
- Supports both
-
var JSFramework = { bias: 'ReactJS' };
-
function JSFramework() { this.bias = 'ReactJS'; } // Instantiation var frontend = new JSFramework();
-
// CLASS DECLARATION class JSFramework { constructor() {} /* ... */ } // CLASS EXPRESSION const JSFramework = class { constructor() {} /* ... */ }; // Instantiation var frontend = new JSFramework();
Proper usage of these features can potentially improve the efficiency of loading the script as well as the loading performance of the page.
The common practice would be to inject the script to the bottom of the page (before the closing </body>
tag), specially when you need to support older browsers (do not support async
and defer
).
// Async
<script async src="script.js"></script>
// Defer
<script defer src="script.js"></script>
Make sure to inject the script in the head, otherwise putting them in the bottom will make these attributes useless
Script is fetched asynchronously, once it's ready the HTML parsing is paused to execute the script, then it's resumed. Hence, aysnc
blocks the parsing of the page.
Scripts is fetched asynchronously, executed only after the HTML parsing is done. Hence, defer
does not block the parsing and it's overall execution may even finishes well before, because it has been downloaded in parallel with the HTML parsing.
defer
is obviously the winning solution in terms of speeddefer
in thehead
triggers the fasterdomInteractive
eventdomInteractive
event happens after the HTML is loaded, parsed and the DOM is built. CSS and images at this point are still to be parsed and loaded. Once this is done, the browser will emit the domComplete event, and then onLoad.async
is executed in casual order, when they become available. Whiledefer
is executed in the order it appears in the pageasync
works best with independent script
-
JavaScript is the third layer of the layer cake of standard web technologies (
HTML
&CSS
) -
Its common use is to dynamically modify HTML and CSS
-
JavaScript is case sensitive
-
Ways to add JavaScript to a page:
- Internal - added in the HTML markup via the
<script>
tag - External - script is an external file also added via the
<script>
tag wheresrc
contains the path to the file
- Internal - added in the HTML markup via the