Write the Code. Change the World.

10月 17

前边

es6 语法使用也越来越多了,本来已经落后了,再不学习就更落后落后了。

es6模块设计思想更是突出。es6模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。es6模块加载是静态加载,使得静态分析成为可能。有了它,就能进一步拓宽 JavaScript 的语法,比如引入宏(macro)和类型检验(type system)这些只能靠静态分析实现的功能。

es6模块自动采用严格模式,不管你有没有在模块头部加上”use strict”;。

既然是模块,模块功能怎么构成呢。模块功能有 exportimport 两部分构成。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

export

一个模块,就是一个独立的文件。通过export,将内部的变量,对象,方法,类输出给外部。并且export在顶级使用,如果在块内部使用就会报错。

export有以下一些规定。

  1. export 必须在顶级使用。

  2. export命令规定的是对外的接口。必须用{}包裹起来,或直接 export。

  3. export 输出接口与外是动态绑定的。 无论改变哪个,该数据都会改变。

  4. 既然export是输出接口,就有一个接受接口。接受用import,也需要要用{}包裹起来。

  5. 一个模块中,可以有多个 export。

  6. export可以使用 as 关键字重命名。

    eg:

// 错误
export 1

// 错误
var num = 2
export num

// 正确(对外的接口)
var num = 2
export {num}

// 正确
export var num = 2

// 正确(log 可以作为两个名字输出)
function log(value){}
export {
    log as log1,
    log as log2
}

模块通过export输出,通过import接受。

import

使用 export 命令定义了模块的对外接口以后,其他 JS 文件就可以通过 import 命令加载这个模块。

import 命令有以下规则。

  1. 使用大括号,接受 export 过来的对象。两边的接口名称,必须相同。如果想重命名,请使用as

  2. import 和 from配对使用,from指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js后缀可以省略。如果只是模块名,不带有路径,那么必须有配置文件,告诉 JavaScript 引擎该模块的位置。

  3. import命令具有提升效果,会提升到整个模块的头部,首先执行。

  4. 由于import是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。

  5. 如果多次重复执行同一句import语句,那么只会执行一次,而不会执行多次。

eg:

// 正确
import {name, gender} from './userinfo'

// 正确
import {sendernickname as nickname} from './giftinfo'

// 报错
import { 'f' + 'oo' } from 'my_module';

// 报错
let module = 'my_module';
import { foo } from module;

// 报错
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

import { foo } from 'my_module';
import { bar } from 'my_module';

// 等同于
import { foo, bar } from 'my_module';

注意:通过 Babel 转码,CommonJS 模块的require命令和 ES6 模块的import命令,可以写在同一个模块里面,但是最好不要这样做。因为import在静态解析阶段执行,所以它是一个模块之中最早执行的。下面的代码可能不会得到预期结果。

模块整体加载。

# 整体加载,所export的对象都成为circle的对象了,但是 circle的对象不能再赋值改变了。
import * as circle from './circle'

// 错误
circle.area = function(){}
// 错误
circle.abc = 'abc'

不仅export可以输出, export default 也是可以输出的。

export default

export default 和 export一样,也是用来输出接口的。不过,一个模块中,只有一个 export default,并且,import的时候,也不需要使用{}

export 与 import 的复合写法

export { foo, bar } from 'my_module';

// 等同于
import { foo, bar } from 'my_module';
export { foo, bar };

模块的继承

模块之间也是可以继承的。

参考

http://es6.ruanyifeng.com/#docs/module#export-default-

http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632

发表评论

电子邮件地址不会被公开。 必填项已用*标注