[Morning Reading Meeting] Shanghai @jean-lee "ES6 Standard Introduction" Notes
Preface
This article is the morning reading the third exchange of activities from reading notes of Shanghai @ jean-lee.
The text starts here~
Module
The design idea of ES6 modules is to be as static as possible, so that the dependencies of the modules, as well as input and output variables, can be determined at compile time. The ES6 module is not an object, but the output code is explicitly specified through the export command, and then input through the import command.
Advantages of ES6 modules:
Static loading
The UMD module format is no longer needed. In the future, servers and browsers will support the ES6 module format. At present, through various tool libraries, this has actually been achieved.
In the future, the new API of the browser can be provided in module format, and it is no longer necessary to make global variables or attributes of navigator objects. Objects are no longer needed as namespaces (such as Math objects), and these functions can be provided through modules in the future.
Strict mode
Strict mode has the following limitations:
Variables must be declared before use
Function parameters cannot have attributes with the same name, otherwise an error will be reported
Cannot use with statement
Cannot assign value to read-only attribute, otherwise an error will be reported
The prefix 0 cannot be used to represent an octal number, otherwise an error will be reported
Undeletable attributes cannot be deleted, otherwise an error will be reported
The variable delete prop cannot be deleted, an error will be reported, only the attribute delete global[prop] can be deleted
eval does not introduce variables in its outer scope
eval and arguments cannot be reassigned
arguments will not automatically reflect changes in function parameters
Cannot use arguments.callee
Cannot use arguments.caller
Prevent this from pointing to the global object
Cannot use fn.caller and fn.arguments to get the stack of function calls
Added reserved words (such as protected, static and interface)
export command
The module function mainly consists of two commands: export and import. The export command is used to specify the external interface of the module, and the import command is used to enter the functions provided by other modules.
A module is an independent file. All variables inside the file cannot be obtained from outside. If you want the external to be able to read a variable inside the module, you must use the export keyword to export the variable. Below is a JS file that uses the export command to output variables.
The above code is after the export command, using braces to specify a set of variables to be exported. It is equivalent to the previous way of writing (placed directly before the var statement), but this way of writing should be given priority. Because in this way, you can clearly see which variables are output at the end of the script.
In addition to outputting variables, the export command can also output functions or classes.
The above code outputs a function multiply externally.
The above code uses the as keyword to rename the external interfaces of functions v1 and v2. After renaming, v2 can output twice with different names.
It is important to note that the export command specifies the external interface and must establish a one-to-one correspondence with the variables inside the module.
// error export 1;
// Error report var m = 1; export m; The above two writing methods will report an error because there is no external interface provided
The interface output by the export statement and its corresponding value are dynamically bound, that is, the real-time value inside the module can be obtained through this interface.
The above code outputs the variable foo, the value is bar, and becomes baz after 500 milliseconds.
The export command can appear anywhere in the module, as long as it is at the top level of the module. If it is in the block-level scope, an error will be reported because it cannot be statically optimized.
important command
Use the import command to load the external interface of the module defined by the export command
The import command accepts a pair of braces, which specify the name of the variable to be imported from other modules. The variable name in the braces must be the same as the name of the external interface of the imported module (profile.js).
If it is only the module name without the path, then there must be a configuration file that tells the JavaScript engine the location of the module.
Util is the module file name. Since it does not have a path, it must be configured to tell the engine how to get this module.
The import command has a boosting effect. It will be boosted to the head of the entire module and executed first.
The above code will not report an error, because the execution of import is earlier than the call of foo. The essence of this behavior is that the import command is executed during the compilation phase, before the code runs.
Since import is executed statically, expressions and variables cannot be used. These grammatical structures can only be obtained at runtime.
The import statement will execute the loaded module, so the following can be written.
The above code only executes the lodash module, but does not enter any values.
If the same import statement is executed multiple times, it will only be executed once, not multiple times. The import statement is Singleton mode
Overall loading of modules
In addition to specifying to load a certain output value, you can also use overall loading, that is, use an asterisk (*) to specify an object, and all output values are loaded on this object
export default command
In order to provide users with convenience, so that they can load the module without reading the document, it is necessary to use the export default command to specify the default output for the module.
// export-default.js export default function () { console.log('foo'); }
When other modules load the module, the import command can specify any name for the anonymous function. At this time, braces are not used after the import command.
It is also possible to use the export default command before non-anonymous functions.
The export default command is used to specify the default output of the module. Obviously, a module can only have one default output, so the export default command can only be used once. Therefore, there is no need to increase the parentheses after the import command, because it can only correspond to one method.
With the export default command, the input module is very intuitive, take the input lodash module as an example.
import _ from'lodash'; If you want to enter the default method and other variables in an import statement, you can write it as follows.
The export statement corresponding to the above code is as follows.
The last line of the above code means that the forEach interface is exposed and points to the each interface by default, that is, forEach and each point to the same method.
If you want to export the default value, you only need to follow the export default value.
Compound wording of export and import
If in a module, the same module is imported first and then exported, the import statement can be written together with the export statement.
The interface rename and overall output of the module can also be written in this way.
The default interface is written as follows.
The wording of changing the named interface to the default interface is as follows.
Similarly, the default interface can also be renamed to a named interface.
Module inheritance
Suppose there is a circleplus module that inherits the circle module.
The export * in the above code means to export all the attributes and methods of the circle module. Note that the export * command will ignore the default method of the circle module. Then, the above code outputs the custom e variable and default method.
At this time, you can also rename the circle attribute or method before outputting.
The above code indicates that only the area method of the circle module is output, and it is renamed circleArea.
The writing method of loading the above module is as follows.
The import exp in the above code means that the default method of the circleplus module is loaded as the exp method.
The essence of ES6 module loading
The loading mechanism of ES6 modules is completely different from CommonJS modules. The output of the CommonJS module is a copy of the value, and the output of the ES6 module is a reference to the value.
The output of the CommonJS module is a copy of the output value, that is, once a value is output, changes within the module will not affect this value. The operating mechanism of ES6 modules is different from CommonJS. When it encounters the module loading command import, it will not execute the module, but only generates a dynamic read-only reference. When you really need to use it, then go to the module to get the value. In other words, the input of ES6 is a bit like the "symbolic link" of the Unix system. The original value changes, and the value of the import input will also change. Therefore, ES6 modules are dynamically referenced, and values are not cached, and the variables in the module are bound to the module where they are located.
Browser module loading
The syntax for browsers using ES6 modules is as follows.
Since the type attribute is set to module, the browser knows that this is an ES6 module.
For the external module script (foo.js in the above example), there are a few things to note.
The script automatically adopts strict modules.
The top-level variables inside the script are only valid inside the script and are not visible outside.
The this keyword at the top level inside the script returns undefined instead of pointing to window.
Cyclic loading
"Circular dependency" means that the execution of script a depends on script b, and the execution of script b depends on script a. Generally, "cyclic loading" means that there is strong coupling. If it is not handled well, it may also lead to recursive loading, making the program impossible to execute, so it should be avoided.
For the JavaScript language, the two most common module formats, CommonJS and ES6, deal with "cyclic loading" in different ways and return different results.