Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Classic scripts vs. module scripts in JavaScript

Tags:

I was going through the WHATWG specifications 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 I didn't really get much clarity. In simple terms, what are the differences between classic and module scripts in JavaScript?

like image 564
nikjohn Avatar asked Sep 23 '16 04:09

nikjohn

People also ask

What is the difference between modules and standard scripts?

Module Script has its Own Scope The scope of variables, functions etc in a <script type="module"> tag is limited to that block. In a normal <script> tag variables, functions etc have global scope. These are available even inside module script tags.

What is a module script JavaScript?

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.

What is the benefit of using modules JavaScript?

1) Maintainability: By definition, a module is self-contained. A well-designed module aims to lessen the dependencies on parts of the codebase as much as possible, so that it can grow and improve independently. Updating a single module is much easier when the module is decoupled from other pieces of code.

What is script type module?

A script tag having type="module" attribute specifies that it to be considered as a Javascript module. It may be importing other Javascript module(s) inside it and becomes a "top-level" module for the imported modules.

What is the difference between a module script and classic script?

The difference between the module script and the classic script is summarized at the Classic scripts v/s module scripts in Javascript Stack Overflow Answer . Quoting: Modules are singleton.

What is the difference between @jsmodule and @JavaScript?

The main difference is that @JsModule always loads the script as the module script, while @JavaScript loads the script either as the module script (if the path to script is prefixed with ./ - then the script will be loaded from the frontend/ folder), or as a classic script (if loading from the external URL such as https:// ).

What is a module type in JavaScript?

The module type serves roughly the same purpose as the type="module" attribute does for a script tag. It tells the browser the worker script being loaded is an ES6 module (which is necessary meta data to know how to parse and run it, as this article goes into a bit ).

How do I load a JavaScript script as a module script?

The only way to load a script as a classic script is to place the javascript file into e.g. src/main/webapp/js/test.js and call Page.addJavaScript ("context://js/test.js"). You can use both @JsModule and @JavaScript to load script as a module script.

1 Answers

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.
like image 155
cquezel Avatar answered Oct 14 '22 08:10

cquezel
Sign in to Comment

Related questions

How do I use Binder to perform dynamic bindings in my C# Function?
Set password on Zip file using DotNetZip
Hangfire DisableConcurrentExecution: What happens when the timeout expires?
Why do Python yield statements form a closure?
How Logstash is different than Kafka
c program that runs itself using system
When to use Docker HEALTHCHECK vs livenessProbe / readinessProbe
Updating a field with a nested array in Elastic Search
Concatenate tuples using sum()
Initializers are not allowed in ambient contexts error when installing Blueprint
How to prevent embedded netty server from starting with spring-boot-starter-webflux?
Spring Boot not recognizing application.properties file

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!