ES6知识点-模块Module

2019-12-23 23:02:21 阅读：204 来源： 互联网

标签：知识点 firstName ES6 default Module export 模块 import 加载

4.5模块Module

4.5.1概念

ES6 之前，制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。
CommonJS用于服务器，AMD用于浏览器。
ES6 在语言标准的层面上，实现了模块功能，成为浏览器和服务器通用的模块解决方案。

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

// CommonJS模块
let { stat, exists, readFile } = require('fs');
// 等同于
let _fs = require('fs');
let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;
//★结果分析：这种加载称为“运行时加载”，
//因为只有运行时才能得到这个对象，导致完全没办法在编译时做“静态优化”

“编译时加载”或者静态加载
- 即 ES6 可以在编译时就完成模块加载，效率比 CommonJS 模块的加载方式高。
- 使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
模块功能主要由两个命令构成：export 和 import。
- export命令用于规定模块的对外接口
- import命令用于输入其他模块提供的功能。

4.5.2严格模式

ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。
严格模式主要有以下限制:
- 变量必须声明后再使用；
- 函数的参数不能有同名属性，否则报错；
- 不能使用with语句；
- 不能对只读属性赋值，否则报错；
- 不能使用前缀0表示八进制数，否则报错；
- 不能删除不可删除的属性，否则报错；
- 不能删除变量delete prop，会报错，只能删除属性delete global[prop]；
- eval不会在它的外层作用域引入变量；
- eval和arguments不能被重新赋值；
- arguments不会自动反映函数参数的变化；
- 不能使用arguments.callee；
- 不能使用arguments.caller；
- 禁止this指向全局对象；
- 不能使用fn.caller和fn.arguments获取函数调用的堆栈；
- 增加了保留字（比如protected、static和interface）。

4.5.3export 命令

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。
如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。

对外部输出变量的方式：

//方式一：var 
export var firstName = 'jack';
export var lastName = 'huang';
//方式二：大括号
var firstName = 'jack';
var lastName = 'huang';
export { firstName,lastName }
//方式三：输出函数或类（class）
export function addd(x, y) {return x * y;};
//方式四：可以使用as关键字重命名
var firstName = 'jack';
var lastName = 'huang';
export { firstName as f1, lastName as f2}

4.5.4import 命令

其他 JS 文件就可以通过import命令加载这个模块。
注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。
import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（main.js）对外接口的名称相同。
如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js路径可以省略。

// a.js
import {firstName, lastName} from './main.js';
console.log(firstName)

import {firstName as newName} from './main.js';

4.5.5export default 命令

为了给用户提供方便，让他们不用阅读文档就能加载模块，就要用到export default命令，为模块指定默认输出。

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

// export-default.js
export default function () {
  console.log('foo');
}
// import-default.js
import customName from './export-default';
customName();    // 'foo'
//★需要注意的是，这时import命令后面，不使用大括号。

比较默认输出与正常输出

// 第一组   默认输出
export default function crc32() { // 输出
  // ...
}
import crc32 from 'crc32'; // 输入
// 第二组    正常输出
export function crc32() { // 输出
  // ...
};
import {crc32} from 'crc32'; // 输入xport-default';
customName(); // 'foo'

4.5.6export 与 import 的复合写法

如果在一个模块之中，先输入后输出同一个模块，import语句可以与export语句写在一起。
```
export { foo, bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';
export { foo, boo};
```

标签：知识点,firstName,ES6,default,Module,export,模块,import,加载
来源： https://www.cnblogs.com/xuzhengguo/p/12088963.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9