A much more comprehensive documentation is written by Addy Osmani:
- By the <
script src="”source.js”" async="" defer="defer">
tag. You can defer it, or make it asynchronous use the new attributes, although buggy.
- Use document.write:
var tag = <
- Use appendchild(script):
var script = document.createElement(‘script’);
script.src = “http://googleapis.com”;
- XHR and eval:
- In Chrome, use <link rel=”prefetch” > to load resources
- Script loaders: CommonJS, AMD, RequireJS, curl.js, UMD, etc..
CommonJS defines a module format such that it works on both client and server side. The drawback for CommonJS in web browser is that it won’t simply allow asynchronous loading.
The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded.
The signature function: define(id?, [dependencies?], factory)
It implements AMD and caters for simplified CommonJS wrapping.
The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others). In many cases it uses AMD as a base, with special-casing added to handle CommonJS compatibility.
G. Modules in ES5
An ES6 module is a file containing JS code. There’s no special module keyword; a module mostly reads just like a script. There are two differences.
- ES6 modules are automatically strict-mode code, even if you don’t write “use strict”;in them.
- You can useimport and export in modules.
You differentiate the normal script and module by giving type attribute in the script tag,
i.e.: set script tag with type=”module”