21

I was going through the WHATWG specs for async and defer attributes for the <script> tag, when I saw this statement:

Classic scripts may specify defer or async; module scripts may specify async.

I went through the WHATWG definitions for classic and module scripts, but didn't really get much clarity. Could someone explain to me like I'm 5, the differences between classic and module scripts in Javascript?

Bergi
  • 513,640
  • 108
  • 821
  • 1,164
nikjohn
  • 16,079
  • 9
  • 45
  • 78

2 Answers2

25

Here are the differences I have noted from various articles. If you want more details, read a complete article on the web:

  1. Modules are singleton. They will be loaded and executed only once.
  2. Modules can use import and export.
  3. Modules are always executed in strict mode.
  4. All objects (class, const, function, let or var) are private unless explicitly exported.
  5. The value of "this" is undefined at the outer scope (not window).
  6. Modules are loaded asynchronously.
  7. Modules are loaded using CORS. see Access-Control-Allow-Origin: *.
  8. Modules don't send cookies and authentication info by default. See crossorigin="use-credentials".
  9. imports are resolved statically at load time rather than dynamically at runtime.
  10. html comments are not allowed.
cquezel
  • 2,567
  • 22
  • 27
10

A classic script is just a standard JavaScript script as you know it. A module script is one that contains an ES6 module, i.e. it uses (or: can use) import and export declarations.

From §8.1.3.8 Integration with the JavaScript module system:

The JavaScript specification defines a syntax for modules, as well as some host-agnostic parts of their processing model. This specification defines the rest of their processing model: how the module system is bootstrapped, via the script element with type attribute set to "module", and how modules are fetched, resolved, and executed. [JAVASCRIPT]

Note: Although the JavaScript specification speaks in terms of "scripts" versus "modules", in general this specification speaks in terms of classic scripts versus module scripts, since both of them use the script element.

Also have a look at https://blog.whatwg.org/js-modules.

Bergi
  • 513,640
  • 108
  • 821
  • 1,164
  • 7
    This is obviously correct, but it supplies so little information that I still feel unsatisfied. The *classic scripts* link the OP provided is useless documentation (which is likely why there was confusion). This answer "simply" gives the underlying mechanics. But my question -- and presumably others' -- is how to use it? For instance, in other languages, a module is anything you (can) import and a script is anything you (can) execute. But the definition is typically a bit "fuzzy". In new JS it seems they want more rigor. But what is the best practice?? – Mike Williamson May 01 '18 at 00:42
  • Actually, presuming [this documentation](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) is still accurate, it was far more helpful. – Mike Williamson May 01 '18 at 00:45
  • @MikeWilliamson JS does use the term "module" in a very fuzzy meaning as well ("some piece of code that creates an object to make things available to the public"), but in the question and therefore this answer we specifically refer to ES6 module syntax. – Bergi May 01 '18 at 07:57
  • @MikeWilliamson I just presumed everyone knew "ES6 modules" by now, that's why I didn't include a link. Edited. – Bergi May 01 '18 at 08:00