JS-ES6 Study note-module (4)

1, <script> the tag is opened defer or the async property , the script will be loaded asynchronously. When the rendering engine encounters this line of command, it begins to download the external script, but does not wait for it to be downloaded and executed, but executes the following command directly.

deferasyncthe difference is that the former will not be executed until the entire page is rendered normally, and once downloaded, the rendering engine interrupts rendering, executes the script, and then continues rendering. In a word, defer "Render finished and execute" async is "done after downloading". In addition, if there are multiple defer scripts, they are loaded in the order in which they appear in the page, and multiple async scripts do not guarantee the order of loading.

2, Browser load ES6 module, also use <script> tags, but to add type="module" attributes.

The browser for type="module" the with <script> , are asynchronous loading, will not cause clogging the browser, that is, until the entire page rendered, and then execute the module script, the same as the <script> defer properties of the label opened .

3, for the external module script, there are a few points to note.

• The code runs in the scope of the module , not at the global scope. The top-level variable inside the module, not visible externally.
• Module scripts automatically adopt strict mode, whether or not they are declared use strict .
• module, you can use import commands to load other modules ( .js suffixes cannot be omitted, you need to provide an absolute URL or a relative URL), or you can use a export command to output an external interface.
• In the module, the top-level this keyword undefined is returned instead of pointing window . In other words, using keywords at the top of the module this is meaningless.
• The same module will be executed only once if it is loaded more than once.

4, using the top layer this equal to undefined This syntax point, you can detect whether the current code in the ES6 module.

5. Before discussing Node loading the ES6 module, it is important to understand that the ES6 module is completely different from the CommonJS module.

They have two significant differences.

• The CommonJS module outputs a copy of the value, and the ES6 module outputs a reference to the value .
• The CommonJS module is run-time loaded, and the ES6 module is the compile-time output interface.

6, in the static analysis phase, a module script as long as there is a line import or export statement, Node will think that the script is the ES6 module, or the CommonJS module. If you do not output any interfaces, but want to be considered by Node as the ES6 module, you can add a line of statements to the script export {}; .

7, ES6 module, the top of the this point undefined ; the top layer of the CommonJS module this points to the current module, which is a significant difference between the two.

8, Node using CommonJS module format, the output of the module is defined module.exports above this attribute. In the node environment, using import commands to load the CommonJS module, Node automatically treats the module.exports attribute as the default output of the module, which is equivalent to export default .

JS-ES6 Study note-module (4)