Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to realize the modularization of ES6 basic grammar". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

ES6 introduces modularization, and the modularization of ES6 is divided into two modules: export @ and import.

ES6 modularization features:

(1) ES6 module automatically turns on strict mode, regardless of whether you add use strict; to the module header or not.

(2) various types of variables can be imported and exported in the module, such as functions, objects, strings, numbers, Boolean values, classes, etc.

(3) each module has its own context, and the variables declared in each module are local variables and will not pollute the global scope.

(4) each module is loaded only once (it is a singleton). If you load the same file in the same directory again, read it directly from memory.

1. Basic use of export and import

The export command is used to export, and the import command is used to import:

Module1.js

/ / export let name = "Sun WuKong"; / / export let sex = "male"; / / or let name = "Sun WuKong"; let sex = "male"; export {name,sex}

Test1.js

/ / import {name,sex} from ".. / export/module1.js"; / / console.log (name); / / Sun WuKong / / console.log (sex); / / male / / or import some variables import {sex} from ".. / export/module1.js"; console.log (sex); / / male

Demo01.html

2. Direct import module in the web page

Module1.js

/ / export let name = "Sun WuKong"; / / export let sex = "male"; / / or let name = "Sun WuKong"; let sex = "male"; export {name,sex}

HTML:

Import module name in the web page: gender: import {name,sex} from ". / export/module1.js"; document.getElementById ("spanName") [xss_clean] = name; document.getElementById ("spanSex") [xss_clean] = sex; III. Use of as

(1) usage of as in export: variables use aliases to hide variables inside the module.

Module2.js:

Let name = "Sun WuKong"; let sex = "male"; export {name as expName,sex as expSex}

HTML:

Usage name of as in export: gender: import {expName,expSex} from ". / export/module2.js"; document.getElementById ("spanName") [xss_clean] = expName; document.getElementById ("spanSex") [xss_clean] = expSex

(2) the usage of as in import: import variables from multiple modules and use as to resolve naming conflicts.

Module1.js

/ / export let name = "Sun WuKong"; / / export let sex = "male"; / / or let name = "Sun WuKong"; let sex = "male"; export {name,sex}

Module3.js

/ / export let name = "Sun WuKong"; / / export let sex = "male"; / / or let name = "Zhu Bajie"; let sex = "male"; export {name,sex}

HTML:

Name: gender: name: gender: import {name as name1,sex as sex1} from ". / export/module1.js"; import {name as name2,sex as sex2} from ". / export/module3.js" Document.getElementById ("spanName1") [xss_clean] = name1; document.getElementById ("spanSex1") [xss_clean] = sex1; document.getElementById ("spanName2") [xss_clean] = name2; document.getElementById ("spanSex2") [xss_clean] = sex2; IV. Import functions and classes in the module (1) Import functions in the module

Module4.js

/ / function Add (... items) / / {/ / let sum = 0. / for (let item of items) / {/ / sum + = item;//} / / return sum;//} / / export {Add}; / / or export function Add (. Items) {let sum = 0 For (let item of items) {sum + = item;} return sum;}

HTML

/ / Import function import {Add} from'. / export/module4.js'; let result = Add; console.log (result); / / 15 (2) Import the classes in the module:

Module4.js

/ / class Student// {/ / constructor (stuno,stuname) / / {/ / this.stuno = stuno;// this.stuname = stuname;//} / / sayHi () / / {/ / console.log ("Hello everyone, I am" + this.stuname+ ", my student number is" + this.stuno ") / /} / /} / / export {Student}; / / or export class Student {constructor (stuno,stuname) {this.stuno = stuno; this.stuname = stuname;} sayHi () {console.log ("Hello everyone, I am" + this.stuname+ ", my student number is" + this.stuno);}}

HTML

/ / Import class import {Student} from'. / export/module4.js'; let stu = new Student ("001", "Sun WuKong"); stu.sayHi (); 5. Characteristics of import

Module5.js

Let name = "Sun WuKong"; let sex = "male"; let emp = {name: "Sun WuKong", sex: "male"}; export {name,sex,emp}

HTML

/ / import {name,sex,emp} from'. / export/module5.js'; / / (1) ordinary type values cannot be changed / / name = "Zhu Bajie"; / / error report / / sex = "male"; / / error report / / (2) cannot directly change the object / / emp = {name: "Zhu Bajie", sex: "male"} / / (3) you can change the attribute value of the variable / / emp.name = "Zhu Bajie"; / / emp.sex = "male"; / / singleton characteristics / / (1) the following two sentences of import will only be executed once / / import {name,sex,emp} from'. / export/module5.js' / / import {name,sex,emp} from'. / export/module5.js'; / / (2) the following two sentences of import are equivalent to import {name,sex} from'. / export/module5.js'; / / import {name} from'. / export/module5.js'; / / import {sex} from'. / export/module5.js' / / static feature / / (1) does not support the expression / / import {"na" + "me"} from'. / export/module5.js'; / / error report / / (2) does not support dynamic import, the following code will also report an error / / if (true) / / import {name,sex} from'. / export/module5.js' / / else / / import {emp} from'. / export/module5.js'; VI. Overall import loading of the module

Module5.js

Let name = "Sun WuKong"; let sex = "male"; let emp = {name: "Sun WuKong", sex: "male"}; export {name,sex,emp}

HTML

/ / load all exposed content in module5 import * as test from'. / export/module5.js'; console.log (test.name); console.log (test.emp.name); VII. Export default command

When using the import command, the user needs to know the name of the variable or function to load, otherwise it cannot be loaded, and the export default exposes the

Member, which can be received using any variable to solve the above problem.

Export default command features:

(1) in a file or module, there can be multiple export and import, and only one export default.

(2) default in export default is the corresponding export interface variable.

(3) the {} symbol is not required for import and export.

(4) members exposed by export default can be received using any variable.

(1) export default derived variables

Module6.js

/ / var//export var a = 10 is not required for export default export variables; / / correct / / correct var a = 10 *

HTML

/ / accept the default variable import b from'. / export/module6.js'; / / here you can use any variable (b) to accept console.log (b); (2) export default export function

Module6.js

Function Add (... items) {let sum = 0; for (let item of items) {sum + = item;} return sum;} / / here Add does not need {} export default Add

HTML

/ / accept the default function import sum from'. / export/module6.js'; / / here you can accept let result = sum with any variable (sum); console.log (result); 8. Compound writing of export and import.

Export and import can be used in the same module, which we call compound use.

(1) the basic grammar of compound use.

Module1.js

/ / export let name = "Sun WuKong"; / / export let sex = "male"; / / or let name = "Sun WuKong"; let sex = "male"; export {name,sex}

Module7.js

/ / compound syntax let emp = {name: "Zhu Bajie", sex: "male"}; export {name, sex} from'. / module1.js';// the above export equals the following: / import {name, sex} from'. / module1.js';// export {name, sex}; export {emp}

HTML

/ / Import module7, export module1 content import {name,sex,emp} from ". / export/module7.js" in module7; console.log (name); console.log (emp.name); (2) compound writing to rename the interface

Module1.js

/ / export let name = "Sun WuKong"; / / export let sex = "male"; / / or let name = "Sun WuKong"; let sex = "male"; export {name,sex}

Module7.js

/ / rename the interface let emp = {name: "Zhu Bajie", sex: "male"}; export {name as myname, sex as mysex} from'. / module1.js';export {emp}

HTML

/ / Import the renamed variable / / import {myname,mysex,emp} from ". / export/module7.js"; / / console.log (myname); / / console.log (emp.name); (3) convert to the default interface

Module1.js

/ / export let name = "Sun WuKong"; / / export let sex = "male"; / / or let name = "Sun WuKong"; let sex = "male"; export {name,sex}

Module7.js

/ / converted to the default interface let emp = {name: "Zhu Bajie", sex: "male"}; export {name as default,sex} from'. / module1.js';export {emp}

HTML

/ / Import name modified to the default interface, and use abc to receive import abc from ". / export/module7.js"; import {sex,emp} from ". / export/module7.js"; console.log (abc); console.log (emp.name); (4) convert default interface to named interface

Module6.js

Function Add (... items) {let sum = 0; for (let item of items) {sum + = item;} return sum;} / / here Add does not need {} export default Add

Module7.js

/ / convert the default interface to the named interface export {default as sum} from'. / module6.js'

HTML

/ / Import the sum interface import {sum} from ". / export/module7.js" converted from the default interface; let result = sum; console.log (result); (5) Export all interfaces

Module1.js

/ / export let name = "Sun WuKong"; / / export let sex = "male"; / / or let name = "Sun WuKong"; let sex = "male"; export {name,sex}

Module7.js

/ / Export all export * from'. / module1.js'

HTML

/ / receive all the interfaces import {name,sex} from ". / export/module7.js"; console.log (name); console.log (sex); "how to implement the modularization of ES6 basic syntax". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.