Front-end knowledge JavaScript-modules module learning

modules are JS modules. My understanding is that when there are a large number of data and functions of the same type or related, methods need to be displayed as a whole, It can be defined separately as a module, that is, module . The meaning of Module is to modularize the code, dividing your code into logically independent subsets. Each subset handles specific functions and is then called separately.

modules, that is, modules,

automatically adopt strict mode, regardless of whether "user strict" is added to the module header, agruments will not automatically Reflect changes in function parameters, and prohibit this from pointing to the global object

modules has two keywords, Imports and Exports

• Imports : Used to input the functions provided by other modules

• Exports: Used to specify the external interface

A module is an independent File , all variables inside the file cannot be obtained externally . If you want to externally read a variable inside the module, you must use the export keyword to output the variable, export, in addition to output Variables can also output functions, class

let a='a';
let b='b';
let c='c';
export {a,b,c}

If you rename the output variable, use the

as keyword in the import command and change the name to a, for example:

import {name as a} from '.../xxx.js'

In addition,

, import has a promotion effect , no matter where it is referenced, it will be promoted to the top of the entire module , first execute

in addition to the specified load A certain value can also be loaded as a whole, that is, an asterisk (*) is used to specify an object, and all output values ​​are loaded on this object. For example

import * as a from '.../xxx.js'
console.log(a.area(4));
console.log(a.cire(4));

export default, set the default output of the module file, each module is only allowed to have one default output, the default output is not required Know the variable name of the module. In addition, export default does not need to add braces , because, in essence, export default outputs a variable or method called default, and then the system allows you to get it Any name

var name="李四";
export { name }
//import { name } from "/.a.js" 
可以写成：
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as xxx } from 'modules';
// 等同于
// import xxx from 'modules';

If loaded multiple times, it is equivalent to loading after merging. For example,

import {b} from '.../xxx.js'
import {c} from '.../xxx.js'
//等同于
import {b,c} from '.../xxx.js'

The browser loads the ES6 module and also uses the

3f1c4e4b6b16bbbd69b2ee476dc4f83a tag , but add the type="module" attribute.

<script type="module">
</script>

The browser loads

3f1c4e4b6b16bbbd69b2ee476dc4f83a with type="module" asynchronously, which will not block the browser, that is, wait until the entire After the page is rendered, executing the module script is equivalent to turning on the defer attribute of the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. In the

module, the

this keyword in the top-level returns undefined instead of pointing to window. In other words, it is meaningless to use the this keyword at the top level of the module. At the same time, using the syntax point ## that this at the top level of the is equal to undefined #, you can detect whether the current code is in an ES6 module. . Related articles:

Detailed introduction to common knowledge points for learning web front-end

JavaScript Basic knowledge for entry Friends who want to learn js can refer to it Down

The above is the detailed content of Front-end knowledge JavaScript-modules module learning. For more information, please follow other related articles on the PHP Chinese website!