ES6 knowledge - Module Module

4.5 Module Module

4.5.1 concept

Before ES6, developed a number of modules to load programs, the most important there are two kinds of CommonJS and AMD .
CommonJS for servers, AMD for the browser.
ES6 in the language standard level on the realization of the module functions, as the browser and server universal module solutions .

ES6 module design is as much as possible static , so that when the compiler can determine module dependencies, as well as input and output variables.

// CommonJS模块
let { stat, exists, readFile } = require('fs');
// 等同于
let _fs = require('fs');
let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;
//★结果分析：这种加载称为“运行时加载”，
//因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”

"Loading a compile-time" or static loading
- I.e. ES6 may be completed at compile time the module is loaded , the efficiency ratio of the module loading CommonJS high .
- Using the overall rate of the carrier, i.e. with an asterisk ( *) specifies an object, all the output values in the object loaded on it.
Function block mainly composed of two commands: export and import.
- export command is used to specify the external interface module
- import command input function provided by other modules.

4.5.2 Strict Mode

ES6 modules automatically use strict mode , whether you have add "use strict" in the module header ;.
Strict Mode There are the following restrictions :
- Variables must be declared before use;
- Function parameters can not have the same name attribute, otherwise an error;
- You can not use the with statement;
- Can not assign read-only attribute, otherwise an error;
- You can not use the prefix 0 indicates octal number, otherwise an error;
- You can not delete the property can not be deleted, otherwise an error;
- You can not delete variables delete prop, will complain, you can only remove property delete global [prop];
- eval not introduce variable in its enclosing scope;
- eval and arguments can not be reassigned;
- arguments do not automatically reflect the change of function parameters;
- You can not use arguments.callee;
- You can not use arguments.caller;
- Prohibit this point to the global object;
- You can not use fn.caller and fn.arguments get the stack of function calls;
- An increase of reserved words (such as protected, static and interface).

4.5.3export command

A module is a stand-alone document . The internal document all variables, can not get outside .
If you want an external able to read take a variable inside the module, you must use the keyword export the output variable .

On the way external output variables:

//方式一：var 
export var firstName = 'jack';
export var lastName = 'huang';
//方式二：大括号
var firstName = 'jack';
var lastName = 'huang';
export { firstName,lastName }
//方式三：输出函数或类（class）
export function addd(x, y) {return x * y;};
//方式四：可以使用as关键字重命名
var firstName = 'jack';
var lastName = 'huang';
export { firstName as f1, lastName as f2}

4.5.4import command

Other JS file you can import command to load the module .
Note, import command with a lifting effect , will be promoted to head the entire module, performed first .
import command accepts a pair of braces , which is designated from the other modules of variable names to import . Braces inside the variable name, must (main.js) is introduced into the external interface module with the same name .
If you want to re-enter the variable new a name , import commands to be used as a keyword , variable input renamed.
import from behind the location of the specified file module , may be a relative path , may be an absolute path , .js path may be omitted .
```
// a.js
import {firstName, lastName} from './main.js';
console.log(firstName)

import {firstName as newName} from './main.js';
```

4.5.5export default command

In order to provide convenience to the user , so that they do not read the documents will be able to load modules , it is necessary to use export default command , specify the module default output .

When other modules to load the module, import command can specify any name for the anonymous function .

// export-default.js
export default function () {
  console.log('foo');
}
// import-default.js
import customName from './export-default';
customName();    // 'foo'
//★需要注意的是，这时import命令后面，不使用大括号。

The default output compare with the normal output

// 第一组   默认输出
export default function crc32() { // 输出
  // ...
}
import crc32 from 'crc32'; // 输入
// 第二组    正常输出
export function crc32() { // 输出
  // ...
};
import {crc32} from 'crc32'; // 输入xport-default';
customName(); // 'foo'

4.5.6export and import of complex wording

If one module among the first same input and output modules , import and export statements statements can write together .
```
export { foo, bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';
export { foo, boo};
```