JS ES6 in export and import Comments

1.Export

Module is a separate file, all the external variables inside the file can not be obtained. If you want to get a variable to be output via export,

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

Or a better way: a set of variables to be specified output braces

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

In addition to the output variable, may also output function or class (class),

export function multiply(x, y) {
  return x * y;
};

Also can batch output, is also to be included in braces, it can also be used as Rename:

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

Attention:

export command specifies that the external interface, you must build one to one relationship with the module internal variables

// writing a 
Export var = m. 1; 

// writing two 
var. 1 = m; 
Export m {}; 

// writing three 
var. 1 = n-; 
Export AS {n-m}; 


// error 
Export. 1; 

// given 
var . 1 = m; 
Export m;

Written reasons being given is: do not provide external interfaces, the first direct output 1, although the second variable m, but still direct output 1, making it impossible deconstruction.

Similarly, functionand classoutput, must also comply with such wording.

// given 
function F () {} 
Export F; 

// correct 
Export function F () {}; 

// correct 
function F () {} 
Export {F};

 

And: export statement output interfaces, and other corresponding relationships are dynamically bound value, i.e., through the interface are taken into the interior of the module values ​​in real time.

Location: export module can be located anywhere in the module, but the module must be at the top level, if the other scope, will complain.

function foo() {
  export default 'bar' // SyntaxError
}
foo()

2.Import command

After the export defines the external interface module, the other JS files can be loaded through this module import,

// main.js
import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

import command accepts a pair of braces, which specifies the variable name from other imported modules, it must be imported modules ( profile.jssame name) of the external interface .

If you want to re-import the variable name, you can use as keywords,

import { lastName as surname } from './profile';

import can be specified from the need to import module pathname can be absolute, or a relative path, .js path may be omitted, if only the module name, with the path, requires a configuration file specifies.

Note that the importcommand has a lifting effect , will be promoted to head the entire module, executed first. (In the implementation phase of compilation)

Because static import is executed, you can not use expressions and variables, that is, at run time to get the results grammatical structure (eg if ... else ...)

3.module overall load

In addition to specifying an output value is loaded, you can use (*) to specify a target, all variables are loaded on this subject.

// circle.js. Two output functions 

Export function Area (RADIUS) { 
  return Math.PI * * RADIUS RADIUS; 
} 

Export function Circumference (RADIUS) { 
  return Math.PI * 2 * RADIUS; 
} 


// main.js loaded module 

import {area , circumference} from './circle'; 

the console.log ( 'circular area:' + area (. 4)); 
the console.log ( 'circumference:' circumference + (14)); 

// The above is written to specify each one the method of loading, the overall load as written. 
Circle from AS * Import './circle'; 

the console.log ( 'circular area:' + circle.area (. 4)); 
the console.log ( 'circumference:' + circle.circumference (14)) ;

Note that the overall target load module resides (the case is circle), should be able to static analysis , so the change does not allow runtime.

Circle from AS * Import './circle'; 

// The following two lines are allowed 
circle.foo = 'Hello'; 
circle.area = function () {};

4.export default

The previous example, the use of import import, need to know the module to be loaded variable or function name, the user may not want to read the source code, just use the interface directly, you can use export default command to specify the output module

// export-default.js
export default function () {
  console.log('foo');
}

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

// import-default.js
import customName from './export-default';
customName(); // 'foo'

export default can also be used before the non-anonymous functions.

Compare the following default output and normal output.

// first set 
export default function crc32 () {// output 
  // ... 
} 

Import from CRC32 'CRC32'; // input 

// second set 
export function crc32 () {// output 
  // ... 
}; 

Import} from {CRC32 'CRC32'; // input

As can be seen, the use of export default, import statements without the use of braces.

 

******* importand exportcommands top module only, not in the code block. Otherwise syntax error.

This design can improve the efficiency of the compiler, but there is no way to load the runtime implementation.

Because it requires runtime is loaded, so there is no way to replace the import command functions require the dynamic loading.

Therefore, the introduction of import () function . Complete dynamic loading.

import(specifier)

specifier for specifying modules to be loaded position. import can accept what parameters, import () can accept the same parameters.

import () Returns a Promise object.

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

5.import () function Applications

 1) demand loading:

 

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

above: import module in the event listener function, only the user clicks the button will load the module.

 2) load conditions:

import () can be placed if ... else statement, to achieve load conditions.

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}