ES6 has had a solution for loading js modules, the most important of which are CommonJS and AMD specifications. commonjs is mainly used on servers and implements synchronous loading, such as nodejs. AMD specifications are applied to browsers such as requirejs, which are loaded asynchronously. There is also a CMD specification, which is a synchronous loading scheme such as seaJS.
ES6 implements module functions at the language specification level, and is implemented quite simply. It can completely replace the existing CommonJS and AMD specifications and become a common module solution for browsers and servers.
The ES6 module has two main functions: export and import
export is used to output the interface of variables of this module (a file can be understood as a module) to the outside world.
import is used to load another module with the export interface in one module.
That is to say, after using the export command to define the external interface of the module, other JS files can load the module (file) through the import command. The following figure (assuming that files a and b are in the same directory)
//
var sex="boy";
var echo=function(value){
(value)
}
export {sex,echo}
// By adding sex, echo variable to braces and exporting, the corresponding variable value can be exposed to other files in the form of sex and echo variable identifiers and read to//You cannot write it as export sex. If this is equivalent to export "boy", the external file cannot obtain the value of the internal variable sex of the file, because there is no external output variable interface, it is just an output string.
//
passimportGet the internal variables of the file，{}The variables in brackets come from the fileexportThe variable identifier。
import {sex,echo} from "./"
(sex) // boy
echo(sex) // boy
The file can also be written in the export syntax as follows, but it is not as intuitive as above and is not very recommended.
//
export var sex="boy";
export var echo=function(value){
(value)
}
//Because function echo(){} is equivalent to var echo=function(){}, it can also be written asexport function echo(value){
(value)
}
The above are the basic usage of export and module, and then expand the learning
As shown in the previous example, when using the import command, the user needs to know the exposed variable identifier, otherwise it will not be loaded. You can use the export default command to specify the default output for the module, so that you do not need to know the variable name of the module to be loaded.
// var sex="boy"; export default sex（sexCan't add braces） //Originally, it was impossible to directly export sex outside, just add default. However, there can only be one export default in a file.Actually, this is equivalent tosexVariable value"boy"A system default variable namedefault，naturedefaultThere can only be one value，So there can't be multiple filesexport default。
// Essentially，Filedexport defaultOutput a name calleddefaultvariables，Then the system allows you to give it any name。So it can beimportany variable name for the module，And no braces are required to include import any from "./" import any12 from "./" (any,any12) // boy,boy
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.