Preface
existMaster the core content of ES6/ES2015 in 30 minutes (Part 1)We explained some of the most commonly used syntaxes in es6: let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
As the saying goes, we should make a blacksmith while it is hot. Today we will continue to talk about several other very useful new features of es6.
import export
These two guys correspond to es6's own module function.
The Javascript we wrote before has never had a modular system, and it is impossible to split a huge js project into small projects with relatively independent functions but interdependent functions, and then use a simple method to connect these small projects together.
This can lead to two problems:
- On the one hand, the js code becomes very bloated and difficult to maintain
- On the other hand, we often pay attention to the position of each script tag in the html because they usually have dependencies. If the order is wrong, there may be bugs.
In order to solve the above mentioned problems before es6, we have to use some solutions provided by third parties, mainly two types of CommonJS (server side) and AMD (browser side, such as).
If you want to learn more about AMD, especially, you can refer to this tutorial:why modules on the web are useful and the mechanisms that can be used on the web today to enable them
Now we have the module function of es6, which is very simple to implement and can become a common module solution for servers and browsers.
The design idea of ES6 module is to be static as much as possible so that the dependencies of the module and the variables of input and output can be determined during compilation. Both CommonJS and AMD modules can only determine these things at runtime.
It doesn’t matter if you don’t understand the design ideas above. Let’s learn how to use them first. It’s not too late to study the design ideas behind them if you use them too much and become proficient in the future! OK, then we will upload the code...
Traditional writing
First, let’s review the writing method. Suppose we have two js files: and, now we want to use the returned result in, how do we do it?
First define:
//
define('', function(){
return 'A cat';
})
Then require:
//
require(['./'], function(animal){
(animal); //A cat
})
So how do CommonJS be written?
//
var animal = require('./')
//
= 'A cat'
How to write ES6
// import animal from './content' // export default 'A cat'
I have listed all three of them above, and my mother no longer has to worry about confusing me writing...
Other advanced usages of ES6 module
//
export default 'A cat'
export function say(){
return 'Hello!'
}
export const type = 'dog'
As can be seen above, in addition to outputting variables, the export command can also output functions and even classes (react modules are basically output classes)
//
import { say, type } from './content'
let says = say()
(`The ${type} says ${says}`) //The dog says Hello
When entering here, please note that the variable name in the braces must be the same as the name of the external interface of the imported module ().
If you also want the default value (default) output in the input, you can write it outside the braces.
//
import animal, { say, type } from './content'
let says = say()
(`The ${type} says ${says} to ${animal}`)
//The dog says Hello to A cat
Change the value name
At this time, we don't like the variable name type because it may be duplicated, so we need to modify its variable name. In es6, you can use as to achieve one-click replacement.
//
import animal, { say, type as animalType } from './content'
let says = say()
(`The ${animalType} says ${says} to ${animal}`)
//The dog says Hello to A cat
Overall loading of modules
In addition to specifying the loading of a certain output value, you can also use overall loading, that is, specify an object with an asterisk (*), and all output values are loaded on this object.
//
import animal, * as content from './content'
let says = ()
(`The ${} says ${says} to ${animal}`)
//The dog says Hello to A cat
Usually, it is more appropriate to use asterisks* in combination with as.
The ultimate secret
Consider the following scenario: the above outputs three variables (default, say, type). If only type is needed in our actual project, we do not need the other two for the time being. We can enter only one variable:
import { type } from './content'
Since the other two variables are not used, we hope that when the code is packaged, we will also ignore them and discard them, which can significantly reduce the file size in large projects.
ES6 helped us realize it!
However, at present, neither webpack nor browserify supports this function...
If you want to implement this function now, you can try it
They call this function Tree-shaking, hahaha, which means that before packaging, let the entire document tree shake and shake off all the things that are not depended on or used. . .
Let's take a look at their official explanation:
Normally if you require a module, you import the whole thing. ES2015 lets you just import the bits you need, without mucking around with custom builds. It's a revolution in how we use libraries in JavaScript, and it's happening right now.
To be continued
I hope to have a more comprehensive understanding of es6 partners, and you can read the e-book ECMAScript 6 Introduction
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.