mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
修改docs/class/模块
This commit is contained in:
parent
97fcf5d921
commit
5e9968e898
@ -75,11 +75,11 @@ class ColorPoint extends Point {
|
||||
|
||||
JavaScript没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如Ruby的require、Python的import,甚至就连CSS都有@import,但是JavaScript任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。
|
||||
|
||||
ES6解决了这个问题,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。
|
||||
在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和AMD两种。前者用于服务器,后者用于浏览器。ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。
|
||||
|
||||
**(1)export命令,import命令**
|
||||
|
||||
模块功能有两个命令:export和import。export命令用于用户自定义模块,规定对外接口;import命令用于输入其他模块提供的功能,同时创造命名空间(namespace),防止函数名冲突。
|
||||
模块功能主要由两个命令构成:export和import。export命令用于用户自定义模块,规定对外接口;import命令用于输入其他模块提供的功能,同时创造命名空间(namespace),防止函数名冲突。
|
||||
|
||||
ES6允许将独立的JS文件作为模块,也就是说,允许一个JavaScript脚本文件调用另一个脚本文件。该文件内部的所有变量,外部无法获取,必须使用export关键字输出变量。下面是一个JS文件,里面使用export关键字输出变量。
|
||||
|
||||
@ -107,9 +107,7 @@ export {firstName, lastName, year};
|
||||
|
||||
```
|
||||
|
||||
上面代码在export命令后面,使用大括号指定所要输出的一组变量。
|
||||
|
||||
它与前一种export命令直接放置在var语句前的写法是等价的,但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。
|
||||
上面代码在export命令后面,使用大括号指定所要输出的一组变量。它与前一种写法(直接放置在var语句前)是等价的,但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。
|
||||
|
||||
使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。
|
||||
|
||||
@ -213,7 +211,6 @@ export default function () {
|
||||
// import-default.js
|
||||
|
||||
import customName from './export-default';
|
||||
|
||||
customName(); // 'foo'
|
||||
|
||||
```
|
||||
@ -277,6 +274,7 @@ export default class { ... }
|
||||
|
||||
// main.js
|
||||
import MyClass from 'MyClass'
|
||||
let o = new MyClass();
|
||||
|
||||
```
|
||||
|
||||
|
@ -33,8 +33,6 @@
|
||||
- Dmitry Soshnikov, [ES6 Notes: Default values of parameters](http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/): 介绍参数的默认值
|
||||
- Mozilla Developer Network, [WeakSet](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet):介绍WeakSet数据结构
|
||||
- Mathias Bynens, [Unicode-aware regular expressions in ES6](https://mathiasbynens.be/notes/es6-unicode-regex): 详细介绍正则表达式的u修饰符
|
||||
- Jack Franklin, [An introduction to ES6 classes](http://javascriptplayground.com/blog/2014/07/introduction-to-es6-classes-tutorial/): ES6 class的入门介绍
|
||||
- Jack Franklin, [JavaScript Modules the ES6 Way](http://24ways.org/2014/javascript-modules-the-es6-way/): ES6模块入门
|
||||
|
||||
## Generator
|
||||
|
||||
@ -56,6 +54,12 @@
|
||||
- Jafar Husain, [Async Generators](https://docs.google.com/file/d/0B4PVbLpUIdzoMDR5dWstRllXblU/view?sle=true): 对async与Generator混合使用的一些讨论
|
||||
- Axel Rauschmayer, [ECMAScript 6 promises (2/2): the API](http://www.2ality.com/2014/10/es6-promises-api.html): 对ES6 Promise规格和用法的详细介绍
|
||||
|
||||
## Class与模块
|
||||
|
||||
- Jack Franklin, [An introduction to ES6 classes](http://javascriptplayground.com/blog/2014/07/introduction-to-es6-classes-tutorial/): ES6 class的入门介绍
|
||||
- Jack Franklin, [JavaScript Modules the ES6 Way](http://24ways.org/2014/javascript-modules-the-es6-way/): ES6模块入门
|
||||
- Axel Rauschmayer, [ECMAScript 6 modules: the final syntax](http://www.2ality.com/2014/09/es6-modules-final.html): ES6模块的介绍,以及与CommonJS规格的详细比较
|
||||
|
||||
## 工具
|
||||
|
||||
- Google, [traceur-compiler](https://github.com/google/traceur-compiler): Traceur编译器
|
||||
|
@ -379,14 +379,28 @@ r.sticky // true
|
||||
var name = "Bob", time = "today";
|
||||
`Hello ${name}, how are you ${time}?`
|
||||
|
||||
```
|
||||
|
||||
上面代码中的字符串,都是用反引号表示。如果在模板字符串中嵌入变量,需要将变量名写在`${}`之中。
|
||||
|
||||
大括号内部可以进行运算,以及引用对象属性。
|
||||
|
||||
```javascript
|
||||
|
||||
var x = 1;
|
||||
var y = 2;
|
||||
|
||||
console.log(`${x} + ${y} = ${x+y}`)
|
||||
// "1 + 2 = 3"
|
||||
|
||||
```
|
||||
console.log(`${x} + ${y*2} = ${x+y*2}`)
|
||||
// "1 + 4 = 5"
|
||||
|
||||
上面代码表示,在模板字符串中嵌入变量,需要将变量名写在${}之中。
|
||||
var obj = {x: 1, y: 2};
|
||||
console.log(`${obj.x + obj.y}`)
|
||||
// 3
|
||||
|
||||
```
|
||||
|
||||
模板字符串使得字符串与变量的结合,变得容易。下面是一个例子。
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user