[ES6] Module

#

import

Syntax

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

 

用于导入从外部模块、其他脚本导出的函数。

name参数用于接收导出成员的对象名称。

member参数指定独立成员，而name参数导入所有成员。

如果模块导出单个默认参数，而不是一系列成员，name也可以是函数。

 

导入整个模块的内容。以下代码将myModule添加到当前作用域，其中包括所有导出绑定。

import myModule from "my-module.js";

导入模块的单个成员。以下代码将myMember添加到当前作用域。

import {myMember} from "my-module.js";

导入模块的多个成员。以下代码会将foo和bar都添加到当前作用域。

import {foo, bar} from "my-module.js";

导入成员并指定一个方便的别名。以下代码将shortName添加到当前作用域。

import {reallyReallyLongModuleMemberName as shortName} from "my-module.js";

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

导入整个模块，具有不导入绑定的副作用。

import "my-module.js";

 

生成一个Collection对象包含 my-module所有的export

import * as Collection from 'my-module.js'

 

#以下代码将myDefault，foo，bar插入到当前作用域。
注意，myDefault是默认导出的项；foo,bar为exort导出的项（即my-module.js中的代码为：...;export foo;export bar;export default myDefault;）

import myDefault, {foo, bar} from "my-module.js"

eg：

import myDefault, {foo, bar} from "my-module.js"
console.log(foo);
console.log(bar);
console.log(myDefault);

上面的代码，babel后：
可以看出，myDefault并不是整个module，而只是module的default这一个导出项。

"use strict";

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var _myModuleJs = require("my-module.js");

var _myModuleJs2 = _interopRequireDefault(_myModuleJs);

console.log(_myModuleJs.foo);
console.log(_myModuleJs.bar);
console.log(_myModuleJs2["default"]);

 

#辅助处理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 "file.js";
getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
});

 

export

Syntax
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const

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 …;

 

用于从给定文件（或模块）导出函数和对象。
有两种不同的导出方式，每种方式对应于上述的一种语法：
    命名导出：
    export { myFunction }; // 导出一个函数声明
    export const foo = Math.sqrt(2); // 导出一个常量

    默认导出 (每个脚本只能有一个)：
    export default myFunctionOrClass
    // 这里没有分号

对于只导出一部分值来说，命名导出的方式很有用。
在导入时候，可以使用相同的名称来引用对应导出的值。
关于默认导出方式，每个模块只有一个默认导出。
一个默认导出可以是一个函数，一个类，一个对象等。
当最简单导入的时候，这个值是将被认为是”入口”导出值。

#命名导出
在这个模块里，我们可以这么导出：

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

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

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

 

#默认导出
如果我们只想导出一个简单的值或者想在模块中保留一个候选值，就可以使用默认导出：

// module "my-module.js"
let cube = function cube(x) {
  return x * x * x;
}
export default cube;

然后，在另一个脚本中，默认的导出值就可以被简单直接的导入：

// module "my-module.js"
import myFunction from 'my-module';
console.log(myFunction(3)); // 27​​​​​

 

#

            //export
            
            //file msample.js
            class ColorRectangle extends Rectangle {
                constructor(height, width, color) {
                    super(height, width);
                    this.color = color;
                }
                toString() {
                    return this.color + ' ' + super.toString();
                }
            }
            export {
                ColorRectangle
            };
            // export ColorRectangle;
            
            //export default
            
            //file msample.js
            export default ColorRectangle;
            
            //import
            
            //file main.js
            import ColorRectangle from 'msample';
            //import {ColorRectangle} from 'msample';
            //import * as Polygon from 'msample';
            //import DefatulPolygon from 'msample';