Skip to content

Commit 085632c

Browse files
heibaiyingheibaiying
committed
ES6基础
1 parent 0b50623 commit 085632c

5 files changed

Lines changed: 208 additions & 6 deletions

File tree

code/ES6/src/12_proxies_and_reflection/01_proxies.js renamed to code/ES6/src/11_proxies_and_reflection/01_proxies.js

File renamed without changes.

‎code/ES6/src/12_modules/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport"
6+
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
<script type="module" src="index.js"></script>
10+
</head>
11+
<body>
12+
INDEX!
13+
</body>
14+
</html>

‎code/ES6/src/12_modules/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {multiply} from "./module.js";
2+
3+
let result = multiply(2, 2);
4+
alert(result);
5+
6+
7+
var RegExp = "Hello!";
8+
console.log(window.RegExp); // 在模块顶级作用域中创建的变量，不会被自动添加到共享的全局作用域，它们只会在模块顶级作用域内部存在
9+
console.log(this); // 模块顶级作用域的 `this` 值为 undefined
10+
console.log(window.RegExp === RegExp);

‎code/ES6/src/12_modules/module.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// 1.导出变量或常量
2+
export var color = "red";
3+
export let name = "Nicholas";
4+
export const magicNumber = 7;
5+
6+
// 2.导出函数
7+
export function sum(num1, num2) {
8+
return num1 + num1;
9+
}
10+
11+
// 3.导出类
12+
export class Rectangle {
13+
constructor(length, width) {
14+
this.length = length;
15+
this.width = width;
16+
}
17+
}
18+
19+
function multiply(num1, num2) {
20+
return num1 * num2;
21+
}
22+
23+
// 4.导出已有的函数
24+
export {multiply};

‎notes/ES6_基础.md‎

Lines changed: 160 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1200,11 +1200,7 @@ console.log(ceo instanceof Manager);
12001200

12011201

12021202

1203-
## 十一、异步编程
1204-
1205-
1206-
1207-
## 十二、代理与反射
1203+
## 十一、代理与反射
12081204

12091205
ES6 支持对象代理，你可以通过 `new Proxy(target)` 来基于目标对象创建一个代理对象，这个代理对象对目标对象进行了虚拟，因此该代理对象与目标对象在表面上可以被当作同一个对象来对待：
12101206

@@ -1272,4 +1268,162 @@ ES6 支持对底层的多种行为进行代理，具体如下：
12721268

12731269

12741270

1275-
## 十三、模块化
1271+
## 十二、模块化
1272+
1273+
从 ES6 开始，JavaScript 开始支持模块化加载，相比于传统的 JS 脚本，模块化 JS 具有以下特性：
1274+
1275+
- 模块中的代码自动运行在严格模式下，并且无法退出严格模式；
1276+
- 在模块顶级作用域中创建的变量，不会被自动添加到共享的全局作用域，它们只会在模块顶级作用域内部存在；
1277+
- 模块顶级作用域的 `this` 值为 undefined ；
1278+
- 模块中的内容只有使用 `export` 导出后才能被外部访问；
1279+
- 允许使用 `import` 从其他模块导入绑定。
1280+
1281+
### 12.1 基本导出
1282+
1283+
使用 `export` 可以进行基本的导出：
1284+
1285+
```javascript
1286+
// 1.导出变量或常量
1287+
export var color = "red";
1288+
export let name = "Nicholas";
1289+
export const magicNumber = 7;
1290+
1291+
// 2.导出函数
1292+
export function sum(num1, num2) {
1293+
return num1 + num1;
1294+
}
1295+
1296+
// 3.导出类
1297+
export class Rectangle {
1298+
constructor(length, width) {
1299+
this.length = length;
1300+
this.width = width;
1301+
}
1302+
}
1303+
1304+
function multiply(num1, num2) {
1305+
return num1 * num2;
1306+
}
1307+
1308+
// 4.导出已有的函数
1309+
export {multiply};
1310+
```
1311+
1312+
### 12.2 基本导出
1313+
1314+
使用 `import` 可以实现基本的导入，可以导入单个绑定，也可以一次性导入多个绑定：
1315+
1316+
```javascript
1317+
import { sum } from "./example.js";
1318+
console.log(sum(1, 2)); // 3
1319+
1320+
import { sum, multiply, magicNumber } from "./example.js";
1321+
```
1322+
1323+
也可以将整个模块一次性导入，然后再使用 `模块名.导出名称` 的格式进行调用：
1324+
1325+
```javascript
1326+
import * as example from "./example.js";
1327+
console.log(example.sum(1,example.magicNumber));
1328+
console.log(example.multiply(1, 2));
1329+
```
1330+
1331+
如果想要在浏览器中使用导入模块化的 JS ，需要指定其 type 类型为 `module`，它会告诉浏览器要将内联代码或是指定文件中的代码当作模块来解析，而不是当作脚本：
1332+
1333+
```javascript
1334+
<script type="module" src="index.js"></script>
1335+
```
1336+
1337+
### 12.3 导入路径
1338+
1339+
导入模块的路径必须以 `/` ， `./` ， `../` 开头，它们的含义分别如下：
1340+
1341+
- 以 `/` 为起始，表示从根目录开始解析；
1342+
- 以 `./` 为起始，表示从当前目录开始解析；
1343+
- 以 `../` 为起始，表示从父级目录开始解析。
1344+
1345+
### 12.3 导入导出重命名
1346+
1347+
ES6 支持对导入导出的原始名称进行重命名：
1348+
1349+
```javascript
1350+
function sum(num1, num2) {
1351+
return num1 + num2;
1352+
}
1353+
// 对导出名称进行重命名
1354+
export { sum as add };
1355+
```
1356+
1357+
```javascript
1358+
// 对导入名称进行重命名
1359+
import { add as sum } from "./example.js";
1360+
console.log(typeof add); // "undefined"
1361+
console.log(sum(1, 2)); // 3
1362+
```
1363+
1364+
### 12.4 导入导出默认值
1365+
1366+
ES6 支持使用 `default` 关键字来实现默认值导出，一个模块只能有一个导出默认值，它代表的就是整个模块，实现方式如下：
1367+
1368+
```javascript
1369+
// 方式一
1370+
export default function(num1, num2) {
1371+
return num1 + num2;
1372+
}
1373+
1374+
// 方式二
1375+
function sum(num1, num2) {
1376+
return num1 + num2;
1377+
}
1378+
export default sum;
1379+
1380+
// 方式三
1381+
function sum(num1, num2) {
1382+
return num1 + num2;
1383+
}
1384+
export { sum as default };
1385+
```
1386+
1387+
因为默认值代表的就是整个模块，所以导入时就无需使用 `{}` 进行绑定，直接导入即可：
1388+
1389+
```javascript
1390+
import sum from "./example.js";
1391+
console.log(sum(1, 2)); // 3
1392+
```
1393+
1394+
### 12.5 导入再导出
1395+
1396+
ES6 支持对导入的模块进行再导出：
1397+
1398+
```java
1399+
// 导入再导出
1400+
export { sum } from "./example.js";
1401+
// 对导入模块进行重命名后再导出
1402+
export { sum as add } from "./example.js";
1403+
// 将导入模块的所有值再导出
1404+
export * from "./example.js";
1405+
```
1406+
1407+
### 12.6 无绑定导入
1408+
1409+
有些模块可以没有任何导出，例如只修改了全局作用域的对象，如下：
1410+
1411+
```javascript
1412+
Array.prototype.pushAll = function(items) {
1413+
if (!Array.isArray(items)) {
1414+
throw new TypeError("Argument must be an array.");
1415+
}
1416+
return this.push(...items);
1417+
};
1418+
```
1419+
1420+
尽管没有任何导入与导出，这依然是一个有效的模块。由于它没有任何导出，因此可以使用简化的语法来导入，而无须任何绑定：
1421+
1422+
```javascript
1423+
import "./example.js";
1424+
1425+
let colors = ["red", "green", "blue"];
1426+
let items = [];
1427+
items.pushAll(colors);
1428+
```
1429+

0 commit comments

Comments
 (0)