Front-end knowledge JavaScript-modules module learning-JS Tutorial-php.cn

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=&#39;a&#39;;
let b=&#39;b&#39;;
let c=&#39;c&#39;;
export {a,b,c}

Copy after login

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 &#39;.../xxx.js&#39;

Copy after login

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 &#39;.../xxx.js&#39;
console.log(a.area(4));
console.log(a.cire(4));

Copy after login

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不需要大括号

Copy after login

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

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

Copy after login

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

import {b} from &#39;.../xxx.js&#39;
import {c} from &#39;.../xxx.js&#39;
//等同于
import {b,c} from &#39;.../xxx.js&#39;

Copy after login

The browser loads the ES6 module and also uses the