JavaScript import&export

The two main keywords ES6 support module is to import and export. They have their own characteristics in grammar, this article focuses on these characteristics.

The first thing to note is that these two keywords must be used at the top level scope. That is, they appear to be outside all code blocks and functions.

A. Export Members

export keywords can be placed in front of the declaration, or as an operator bound to export list. example:

//放在声明前面
export function foo(){ //... };
export var a = [1,2,3];

// 与导出列表绑定
function b(){ // ... };
var c = [1,2,3];
var d = 'd';
export { b,c,d };

All of the above named called export, because the export of variable and function names and bindings.

important point:

1. Content module scope is not identified with the export are private.
2. Here that the top-level scope is the scope of the module itself, not globally. Although the module can also access the "Global" scope, but "global" scope is not a lexical scope on the top floor.

---------------------------Dividing line--------------------- ----------

function item(){ .. }
export { item as newItem };

var year = 2019;
export { year };

// 导出 year 之后再对它进行操作
year = 2020; 

The above example:

1. If you import item, only newItem can import, item is hidden inside the module.
2. After another year it exported assigned value year is 2020.

The nature of this phenomenon is binding (export derived variable) references to the variable itself or a pointer, rather than the value of this replication.

The case is cited for simple data types for export, the export value does not point to that, but the reference value; pointer concept in JavaScript and not, say this means that the export complex data type, the export point the address is pointing to the heap, not the stack contents.

Default export details, for example:

function foo(){...}
export default foo;

function boo(){...}
export {boo as default};

important point:

1. export default foo function expression is derived binding, that is to say the equivalent of export default function foo (...), if after foo to assign a different value from module import foo, it is still the original function, not new value.
2. The export boo, boo bound to be an identifier rather than its value, and said before the binding is the same.

So, if you need to update the default values ​​derived using export {boo as default}; if no update, anyone can use.

II. Importing members

If you want to name the members of a particular import to the top of a module api scope, you can use the following syntax:

import { foo, boo } from 'file';

{Foo, boo} syntax looks like the object literal syntax and object deconstruction. But it's not, it is dedicated to a form of module only.

Foo identifiers listed, boo api module must match the name is derived. And they will be bound to the top-level identifiers in the current scope.

You can rename import binding identifier, for example:

	import {foo as redFoo } from 'file';
	redFoo();

If only one default is derived, may be omitted {...} syntax, for example:

function foo(){...}
export default foo;

import foo from 'file';
// 或者
import { default as foo} from 'file'; 

---

These are introduced separately, if one wants to block all api into a namespace, a way, also referred to as import namespace.

export function foo(){...}
export var x = 42;
export function boo(){...}

import * as container from 'file';
container.foo();
container.x; 		// 42 

In the above example, to export all the container is bound to this namespace.

---

Another point, import import is promoted. example:

foo();
import foo from 'file';

foo () can be performed properly, the foo been elevated to the uppermost top level scope.

import 'file'

The above example, generally no effect, it is equivalent to load it again 'file' module (if it is not loaded too). This can be used to perform some of the side effects of modules.