javascript-export、import用法

`export语法`

export语句用于在创建JavaScript模块时，从模块中导出函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var (const 定义的是常量，需要在初始化的时候赋值)
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName() {...}
export class ClassName {...}

export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

有两种不同的导出方式，每种方式对应于上述的一种语法：

命名导出：

// exports a function declared earlier
export { myFunction };

// exports a constant
export const foo = Math.sqrt(2);

默认导出（函数）：

1	export default function() {}

默认导出（类）：

1	export default class {}

命名导出对导出多个值很有用。在导入期间，必须使用相应对象的相同名称。

对于默认导出，可以以任何名称导入，并且导入时不需要{}

export default k = 12; // in file test.js

import m from './test' // note that we got the freedom to use import m instead of import k, because k was default export

console.log(m);        // will log 12

`export示例`

使用命名导出
在模块中，我们可以使用以下代码：

// module "my-module.js"
function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube,foo };

这样的话，在其它脚本 (比如import)，我们可以这样使用：

1
2
3

import { cube, foo } from 'my-module.js';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

使用默认导出
如果我们要导出一个值或模块中的返回值，就可以使用默认导出：

// module “my-module.js”
export default function cube(x) {
return x x x;
}
然后，在另一个脚本中，可以直接导入默认导出：

// module “my-module.js”
import cube from ‘my-module’;
console.log(cube(3)); // 27
注意，不能使用var，let或const作为默认导出。

`import语法`

import语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode ，导入的模块都运行在严格模式下。import语句不能在嵌入式脚本中使用。

现在浏览器们才刚刚开始去实现这个功能。但它在许多转换器中已经实现，例如 Traceur Compiler ， Babel ， Rollup 或 Webpack。

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

defaultExport
将引用模块默认导出的名称。
module-name
要导入的模块。这通常是包含模块的.js文件的相对或绝对路径名，不包括.js扩展名。某些打包工具可以允许或要求使用该扩展；检查你的运行环境。只允许单引号和双引号的字符串。
name
引用时将用作一种命名空间的模块对象的名称。
export, exportN
要导入的导出名称。
alias, aliasN
将引用指定的导入的名称。

name参数是“模块对象”的名称，它将用一种名称空间来引用导出。导出参数指定单个命名导出，而import * as name语法导入所有导出。以下示例阐明该语法。

导入整个模块的内容
这将myModule插入当前作用域，其中包含来自位于/modules/my-module.js文件中导出的所有模块。

1	import * as myModule from '/modules/my-module.js';

在这里，访问导出意味着使用模块名称（在这种情况下为“myModule”）作为命名空间。例如，如果上面导入的模块包含一个doAllTheAmazingThings()，你可以这样调用：

1	myModule.doAllTheAmazingThings();

导入单个导出
给定一个名为myExport的对象或值，它已经从模块my-module导出（因为整个模块被导出）或显式地导出（使用export语句），将myExport插入当前作用域。

1	import {myExport} from '/modules/my-module.js';

导入多个导出
这将foo和bar插入当前作用域。

1	import {foo, bar} from '/modules/my-module.js';

导入带有别名的导出
导入时可以重命名导出。例如，将shortName插入当前作用域。

1 2	import {reallyReallyLongModuleExportName as shortName} from '/modules/my-module.js';

导入时重命名多个导出
使用别名导入模块的多个导出。

import {
  reallyReallyLongModuleMemberName as shortName, 
  anotherLongModuleName as short
} from "my-module";

仅为副作用而导入一个模块
模块仅为副作用（中性词，无贬义含义）而导入，而不导入模块中的任何内容。这将运行模块中的全局代码, 但实际上不导入任何值。

1	import '/modules/my-module.js';

导入默认值
在defaultexport（无论是对象，函数，类等）有效时可用。然后可以使用import语句来导入这样的默认值。

最简单的用法是直接导入默认值：

1	import myDefault from "my-module";

也可以同时将default语法与上述用法（命名空间导入或命名导入）一起使用。在这种情况下，default导入必须首先声明。例如：

import myDefault, * as myModule from "my-module";
// myModule used as a namespace
//或者

import myDefault, {foo, bar} from "my-module";
// specific, named imports

`import示例`

从辅助模块导入以协助处理AJAX JSON请求。

模块：file.js

function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
    callback(this.responseText) 
  };
  xhr.open('GET', url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

主程序：main.js

import { getUsefulContents } from '/modules/file.js';

getUsefulContents('http://www.example.com',
    data => { doSomethingUseful(data); });