ES6之代码模块化

代码模块化

  目录：

---

引入模块

import name from 'module-name';
import * as name from 'module-name';
import { member } from 'module-name';
import { member as alias } from 'module-name';
import 'module-name';

引入默认模块

  用法：import namespace from 'module-name';。
    

import http from 'http';
import fs from 'fs';

引入模块部分接口

  用法：import {member1, member2} from 'module-name';。
    

import {isEmpty} from 'loadsh';
import {EventEmitter} from 'event';

console.log(isEmpty({}));  // ture

定义别名

  为模块中局部引用的接口定义一个别名，以避免指代不明或接口重名的情况出现。
  用法：import {member as alias} from 'moudule-name';。
    

import {createServer as createHTTPServer} from 'http';
import {createServer as createHTTPSServer} from 'https';

引入全部局部接口到指定命名空间

  用法：import * as namesapce from 'module-name';。
    

import * as lib from 'module';

lib.method1();
lib.method2();

混入引入默认接口和命名接口

  用法：import {default as <default name>, method} from 'module-name';。
    

import {default as Client, utils} from 'module';

必须要注意的是，引入的默认接口必须要使用 as 语句赋予一个别名，因为在除模块引入语句以外的地方 default 是一个保留关键字，所以无法被使用。

更简洁的语法

  用法：import <default name>, {<named modules>} from 'module-name';。

import Client, {utils} from 'module';
import Client, * as lib from 'module';

不引入接口，仅运行模块代码

  在某些场景下，一些模块并不需要向外暴露任何接口，只需要执行内部的代码(如系统初始化等)。
  用法：import 'module-name'。
    

import 'system-apply';

---

定义模块

  ES6中的模块化机制以文件名及其相对或绝对路径作为该模块被引用时的标识。

暴露模块

暴露单一接口

  用法：export <statement>。
    

// moudule.js
export const apiRoot = 'https://example.com/api';
export function method(){
    // ...
}

export class Foo{
    / ...
}

// app.js
import {method, Foo} from 'module.js';

  export 语句后所跟着的语句需要具有声明部分和赋值部分。

1. 声明部分(Statement)为 export 语句提供了所暴露接口的标识。
2. 赋值部分(Assignment)为 export 语句提供了接口的值。

  不符合上述两个条件的语句无法被暴露在当前文件所定义的模块上：

// 1
export 'foo';

// 2
const foo = 'bar';
export foo;

// 3
export function (){}

暴露模块默认接口

  用法：export default <value>。
    

// client.js
export default class Client{
    // ...
}

// app.js
import Client from 'client.js';

混合使用暴露接口语句

    

// module.js
export default class Client{
    // ...
}

export const foo = 'bar';

// app.js
inport Client, {foo} from 'module';

从其他模块暴露接口

暴露一个模块的所有接口

  用法：export * from 'other-module'。
    

暴露一个模块的部分接口

  用法：export {member} from 'module-name';。

export {member} from 'module';
export {default as Module1Default} from 'module';

暴露一个模块的默认接口

export {default} from 'module';