【读书笔记】ES6 Module的语法
概述
1.es6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。
2.commonjs 和 amd 模块,都只能在运行时确定这些东西。
// es6模块 import { stat, exists, readfile } from 'fs';
3.上面代码的实质是从fs
模块加载 3 个方法,其他方法不加载。
这种加载称为“编译时加载”或者静态加载,即 es6 可以在编译时就完成模块加载,效率要比 commonjs 模块的加载方式高。
当然,这也导致了没法引用 es6 模块本身,因为它不是对象。
严格模式
1.es6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";
。
2.严格模式的限制
- 变量必须声明后再使用
- 函数的参数不能有同名属性,否则报错
- 不能使用
with
语句 - 不能对只读属性赋值,否则报错
- 不能使用前缀 0 表示八进制数,否则报错
- 不能删除不可删除的属性,否则报错
- 不能删除变量
delete prop
,会报错,只能删除属性delete global[prop]
-
eval
不会在它的外层作用域引入变量 -
eval
和arguments
不能被重新赋值 -
arguments
不会自动反映函数参数的变化 - 不能使用
arguments.callee
- 不能使用
arguments.caller
- 禁止
this
指向全局对象 - 不能使用
fn.caller
和fn.arguments
获取函数调用的堆栈 - 增加了保留字(比如
protected
、static
和interface
)
3.es6 模块之中,顶层的this
指向undefined
,即不应该在顶层代码使用this
。
export命令
1.模块功能主要由两个命令构成:export
和import
。
export
命令用于规定模块的对外接口,import
命令用于输入其他模块提供的功能。
// profile.js export var firstname = 'michael'; export var lastname = 'jackson'; export var year = 1958;
2.一个模块就是一个独立的文件。
该文件内部的所有变量,外部无法获取。
如果你希望外部能够读取模块内部的某个变量,就必须使用export
关键字输出该变量。
// profile.js var firstname = 'michael'; var lastname = 'jackson'; var year = 1958; export {firstname, lastname, year};
3.上面代码在export
命令后面,使用大括号指定所要输出的一组变量。
export function multiply(x, y) { return x * y; };
4.export
命令除了输出变量,还可以输出函数或类(class)。
function v1() { ... } function v2() { ... } export { v1 as streamv1, v2 as streamv2, v2 as streamlatestversion };
5.export
输出的变量就是本来的名字,但是可以使用as
关键字重命名。
// 报错 export 1; // 报错 var m = 1; export m;
// 写法一 export var m = 1; // 写法二 var m = 1; export {m}; // 写法三 var n = 1; export {n as m};
6.export
命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
上面两种写法都会报错,因为没有提供对外的接口。
第一种写法直接输出 1,第二种写法通过变量m
,还是直接输出 1。
1
只是一个值,不是接口。
// 报错 function f() {} export f; // 正确 export function f() {}; // 正确 function f() {} export {f};
7.function
和class
的输出,也必须遵守这样的写法。
export var foo = 'bar'; settimeout(() => foo = 'baz', 500);
8.export
语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。
上面代码输出变量foo
,值为bar
,500 毫秒之后变成baz
。
function foo() { export default 'bar' // syntaxerror } foo()
9.export
命令可以出现在模块的任何位置,只要处于模块顶层就可以。
这是因为处于条件代码块之中,就没法做静态优化了,违背了 es6 模块的设计初衷。
import
// main.js import {firstname, lastname, year} from './profile.js'; function setname(element) { element.textcontent = firstname + ' ' + lastname; }
1.使用export
命令定义了模块的对外接口以后,其他 js 文件就可以通过import
命令加载这个模块。
import
命令接受一对大括号,里面指定要从其他模块导入的变量名。
大括号里面的变量名,必须与被导入模块(profile.js
)对外接口的名称相同。
import { lastname as surname } from './profile.js';
2.import
命令要使用as
关键字,将输入的变量重命名。
import {a} from './xxx.js' a = {}; // syntax error : 'a' is read-only;
3.import
命令输入的变量都是只读的,因为它的本质是输入接口。
也就是说,不允许在加载模块的脚本里面,改写接口。
import {a} from './xxx.js' a.foo = 'hello'; // 合法操作
4.但是,如果a
是一个对象,改写a
的属性是允许的。
a
的属性可以成功改写,并且其他模块也可以读到改写后的值。
不过,这种写法很难查错,建议凡是输入的变量,都当作完全只读,轻易不要改变它的属性。
import {mymethod} from 'util';
5.import
后面的from
指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js
后缀可以省略。
如果只是模块名,不带有路径,那么必须有配置文件,告诉 javascript 引擎该模块的位置。
上面代码中,util
是模块文件名,由于不带有路径,必须通过配置,告诉引擎怎么取到这个模块。
foo(); import { foo } from 'my_module';
6.import
命令具有提升效果,会提升到整个模块的头部,首先执行。
这种行为的本质是,import
命令是编译阶段执行的,在代码运行之前。
// 报错 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'; }
7.由于import
是静态执行,所以不能使用表达式和变量,这些只有在运行时才能得到结果的语法结构。
import 'lodash';
8.import
语句会执行所加载的模块,因此可以有下面的写法。
上面代码仅仅执行lodash
模块,但是不输入任何值。
import 'lodash'; import 'lodash';
import { foo } from 'my_module'; import { bar } from 'my_module'; // 等同于 import { foo, bar } from 'my_module';
9.如果多次重复执行同一句import
语句,那么只会执行一次,而不会执行多次。
模块的整体加载
import * as circle from './circle'; console.log('圆面积:' + circle.area(4)); console.log('圆周长:' + circle.circumference(14));
1.除了指定加载某个输出值,还可以使用整体加载,即用星号(*
)指定一个对象,所有输出值都加载在这个对象上面。
import * as circle from './circle'; // 下面两行都是不允许的 circle.foo = 'hello'; circle.area = function () {};
2.注意,模块整体加载所在的那个对象(上例是circle
),应该是可以静态分析的,所以不允许运行时改变。
export default 命令
// export-default.js export default function () { console.log('foo'); }
1.从前面的例子可以看出,使用import
命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。
为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default
命令,为模块指定默认输出。
// import-default.js import customname from './export-default'; customname(); // 'foo'
2.其他模块加载该模块时,import
命令可以为该匿名函数指定任意名字。
需要注意的是,这时import
命令后面,不使用大括号。
// export-default.js export default function foo() { console.log('foo'); } // 或者写成 function foo() { console.log('foo'); } export default foo;
3.export default
命令用在非匿名函数前,也是可以的。
上面代码中,foo
函数的函数名foo
,在模块外部是无效的。
加载的时候,视同匿名函数加载。
4.export default
命令用于指定模块的默认输出。
显然,一个模块只能有一个默认输出,因此export default
命令只能使用一次。
所以,import命令后面才不用加大括号,因为只可能唯一对应export default
命令。
// modules.js function add(x, y) { return x * y; } export {add as default}; // 等同于 // export default add; // app.js import { default as foo } from 'modules'; // 等同于 // import foo from 'modules';
5.本质上,export default
就是输出一个叫做default
的变量或方法,然后系统允许你为它取任意名字。
// 正确 export var a = 1; // 正确 var a = 1; export default a; // 错误 export default var a = 1;
6.正是因为export default
命令其实只是输出一个叫做default
的变量,所以它后面不能跟变量声明语句。
// 正确 export default 42; // 报错 export 42;
7.因为export default
命令的本质是将后面的值,赋给default
变量,所以可以直接将一个值写在export default
之后。
import _, { each, foreach } from 'lodash';
8.如果想在一条import
语句中,同时输入默认方法和其他接口,可以写成下面这样。
// myclass.js export default class { ... } // main.js import myclass from 'myclass'; let o = new myclass();
9.export default
也可以用来输出类。
export与import的复合写法
export { foo, bar } from 'my_module'; // 可以简单理解为 import { foo, bar } from 'my_module'; export { foo, bar };
1.如果在一个模块之中,先输入后输出同一个模块,import
语句可以与export
语句写在一起。
foo
和bar
实际上并没有被导入当前模块,只是相当于对外转发了这两个接口,导致当前模块不能直接使用foo
和bar
。
// 接口改名 export { foo as myfoo } from 'my_module'; // 整体输出 export * from 'my_module';
2.模块的接口改名和整体输出,也可以采用这种写法。
export { default } from 'foo';
3.默认接口的写法如下。
export { es6 as default } from './somemodule'; // 等同于 import { es6 } from './somemodule'; export default es6;
4.具名接口改为默认接口的写法如下。
export { default as es6 } from './somemodule';
5.默认接口也可以改名为具名接口。
import * as someidentifier from "somemodule"; import someidentifier from "somemodule"; import someidentifier, { namedidentifier } from "somemodule";
6.三种import
语句,没有对应的复合写法。
模块的继承
// circleplus.js export * from 'circle'; export var e = 2.71828182846; export default function(x) { return math.exp(x); }
1.注意,export *
命令会忽略circle
模块的default
方法。
// circleplus.js export { area as circlearea } from 'circle';
2.也可以将circle
的属性或方法,改名后再输出。
跨模块常量
// constants.js 模块 export const a = 1; export const b = 3; export const c = 4; // test1.js 模块 import * as constants from './constants'; console.log(constants.a); // 1 console.log(constants.b); // 3 // test2.js 模块 import {a, b} from './constants'; console.log(a); // 1 console.log(b); // 3
1.如果想设置跨模块的常量(即跨多个文件),或者说一个值要被多个模块共享。
// constants/db.js export const db = { url: 'http://my.couchdbserver.local:5984', admin_username: 'admin', admin_password: 'admin password' }; // constants/user.js export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];
// constants/index.js export {db} from './db'; export {users} from './users';
// script.js import {db, users} from './constants/index';
2.如果要使用的常量非常多,可以建一个专门的constants
目录,将各种常量写在不同的文件里面,保存在该目录下。
将这些文件输出的常量,合并在index.js
里面。
使用的时候,直接加载index.js
就可以了。