Compared to Python, PHP and other languages, JavaScript seems to have a lack of module management features in its design. However, the good news is that these issues will soon be resolved. In the next generation of JavaScript, ECMASCRIPT 6, this problem is well addressed.

Features of ES6 Module

The module feature was fully confirmed in July 2014, which means that the syntax has been relatively stable up to now.

Module consists of two main parts, the definition of the module export and the introduction of the module import. For those who have written Python, the concept here is quite easy to understand, as the syntax is really very similar.

1. Export

export, as the name suggests, is used to define the output of the module. The basic syntax is very simple:

export {export Name}

However, depending on the output parameters, its representation may vary.

export var a = '123';

export function name(arguments){ //... }

export {nameA, nameB}

export default function name(arguments){ //.. }

export *

1. Direct Output

In the first two lines, we exported a variable a and a method name. You might have noticed that both our method and variable declarations are directly following the export keyword. So what would happen if we directly fill in the variable name after the export keyword?

Try the following:

// BAD EXAMPLE !!

var a = '123';

function name(arguments) { //... }

export a;

// or
// export name;

After executing, you'll find that writing the variable name directly after the export keyword triggers an Error. In this case, we can only write the definition after the export. So the question arises, if all definitions are written behind export, beginners might feel uneasy. Don't worry, we have a second method.

2. Output Variables

This situation should be more common than the first method. Many times we define the method or variable before outputting it. If we need to export, we can add a pair of curly braces. Let's illustrate this using the previous example:

var a = '123';

function name(arguments) { //... }

export {a,name};

// or
// export {a}
// export {name}

In this way, we can happily output variables. However, unlike return, we can continue to export after export.

This means that the following two statements behave exactly the same:

Single-line Mode

export {a,name}

Multi-line Mode

export {a}
export {name}

3. default

The default mode is quite special and useful, let's look at an example:

a.js

var $ = function(){}

$.prototype.show = function(){ //.. }

export default $

b.js

import jQuery from 'a.js'

Since we haven't discussed import, let's temporarily ignore b.js. Here, export default $ means that this file returns the $ function/class, and when importing, you can customize the import name.

In simple terms, this situation is often used to encapsulate large libraries, which is very convenient when importing libraries like jQuery, backbone, and others.

4. *

It is said that it can export all variables and methods, but I have not actually tested this, and I will elaborate on it when I encounter it later.

2. Import

After introducing export, there is no need to elaborate much on import. It simply means importing, and its basic method is also exceptionally simple:

import Name from Module

It also has several forms of representation:

import CustomerName from 'module';

import {nameA,nameB} from 'module'

import CustomerName,{nameA} from 'module'

import {name as alias} from 'module'

import 'module'

1. Import default

As mentioned before, the default output defined using export can be simply imported by customizing the method name.

Refer to the example of export default, so I won't elaborate further.

2. Import independent variables/methods

Using curly braces, we can import multiple or single variables/methods declared in export.

For example:

a.js

var a = 1;
var b = 2;
var c = function(){ return 3 }

export {a,b,c}

b.js

// Import one variable/method at a time
import {a} from 'a.js';

// Import multiple variables/methods at once
import {b,c} from 'a.js';

console.log(a,b,c());

3. Mixing default and variable/method imports

In practice, imports can be very flexible. We can even mix imports, for example:

a.js

var a = 1;
var b = 2;
var c = function(){ return 3 };
var d = function(){ return 4 };
export {a,b,c};
export default d;

b.js

// Importing default mixed with others
import funD,{a,b,c} from 'a.js'
console.log(funD(), a, b, c())

4. Alias Imports

In addition to custom names for default imports, we can use as to declare aliases.

import {a as vara,c as func} from 'a.js'

5. Execute Imports

This is a strange method that executes the JS of the imported method but does not return any value.

a.js

var a = 1;
console.log(a)
export {a}

b.js

import 'a.js';
// The console will output 1 from a.js

console.log(a);
// Returns undefined because importing a module does not return any value, and the executing environment is also in an independent scope.

Conclusion

In summary, the module management of ES6 brings us much hope and provides us with more possibilities. I wonder if it will slowly drive AMD and CMD towards extinction.

As for the frequently asked question of when we can use ES6, the answer is that we can use it now. We have many compilation tools that can smoothly downgrade ES6 code into compatible ES5 code. Later, I will talk separately about how to use ES6 in projects. For now, let's leave it here.