【读书笔记】ES6 Module的语法

2018-12-19 01:45:06来源：博客园阅读 ()

概述

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就可以了。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：撩课-Web大前端每天5道面试题-Day11

下一篇：React初识整理（四）--React Router(路由)

Jquery插件写法笔记整理 2020-03-29
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
manifest.json 解析--手机web app开发笔记（三-2) 2019-08-14
es6学习笔记（二） 2019-08-14
前端笔记之微信小程序（四）WebSocket&Socket.io&am 2019-08-14

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签