In the 30 minutes to master the ES6 / ES2015 core (on) us to explain the es6 most commonly used syntax:let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
The saying goes, strike while the iron is hot, and today we continue to talk about several other useful new features es6.
import export
These two guys is es6 their corresponding modulefunctions.
Before we write Javascript has been no modular system, it can not be a huge project js split into a separate but interdependent functions relatively small project, then a simple way to connect with these small projects.
This may lead to two problems:
-
On the one hand js code becomes bloated, difficult to maintain
-
On the other hand we very often pay attention to the position of each script tag in html, because they usually have dependencies, the order was wrong might bug out
Before es6 to solve the problems mentioned above, we have to use some third-party programs, there are two main CommonJS (server-side) and AMD (browser, such as require.js).
If you want to know more AMD, especially require.js, you can see this tutorial: Why modules ON at The Web and at The Mechanisms that are Useful CAN BE ON Used to enable Them at The Web Today
And now we have es6 of module functions, it is very simple to achieve, it can be a common server and browser module solutions.
Module dependencies can be determined, as well as input and output variables when ES6 design module of static is to try to make the building. CommonJS and AMD modules, these things can only be determined at runtime.
The above design ideas do not understand it does not matter, we first learn how to use, so after much use, go to skilled research design ideas behind it too late! Well, then we on the code ...
The traditional wording
First, we review the wording under require.js. Suppose we have two js files: index.jsand content.jsnow we want to index.jsuse content.jsthe returned results, how should we do it?
First define:
//content.js
define('content.js', function(){ return 'A cat'; }) Then require:
//index.js
require(['./content.js'], function(animal){ console.log(animal); //A cat }) That CommonJS is how to write it?
//index.js
var animal = require('./content.js')
//content.js module.exports = 'A cat' ES6 wording
//index.js
import animal from './content'
//content.js export default 'A cat' I put more than three are listed, my mother no longer have to worry about I wrote confused ...
Other advanced usage of ES6 module
//content.js
export default 'A cat'
export function say(){ return 'Hello!' } export const type = 'dog' As can be seen above, except Export command output variable, may also output function, or even class (REACT module basically output class)
//index.js
import { say, type } from './content' let says = say() console.log(`The ${type} says ${says}`) //The dog says Hello When you enter here to note: variable names inside the braces must be the same as the imported modules (content.js) the name of the external interface.
If you want the default value (default) input content.js in output, can be written on the outside braces.
//index.js
import animal, { say, type } from './content' let says = say() console.log(`The ${type} says ${says} to ${animal}`) //The dog says Hello to A cat Modify the variable name
At this point we do not like this type variable name, because it is possible the same name, so we need to modify its variable name. In es6 can asachieve a key name change.
//index.js
import animal, { say, type as animalType } from './content' let says = say() console.log(`The ${animalType} says ${says} to ${animal}`) //The dog says Hello to A cat Overall load module
In addition to specifying an output value is loaded, you can use the whole load, that is, with an asterisk ( *specify an object), all output values are loaded on top of the object.
//index.js
import animal, * as content from './content' let says = content.say() console.log(`The ${content.type} says ${says} to ${animal}`) //The dog says Hello to A cat The asterisk is usually *combined asuse with more appropriate.
Ultimate Cheats
Consider the following scenario: The above content.jstotal output of the three variables ( default, say, type), if our actual projects which only need to use typethis variable, we do not need the other two. We can only enter a variable:
import { type } from './content'
Since the other two variables are not being used, we want to package your code, they also ignore them, abandon them, so that large projects can significantly reduce the file size.
ES6 help us achieve!
However, there is webpack whether or browserify still do not support this feature ...
If you now want to achieve this function, you can try using rollup.js
They put this function is called Tree-shaking, ha ha ha, meaning that the front pack the entire document tree shake, those things are not dependent on the use of all or shake it. . .
Look at their official explanation of it:
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
Want a more comprehensive understanding es6 partners can see the e-book written by Ruan Yifeng ECMAScript 6 entry