1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 18:32:22 +00:00

修改docs/class/模块

This commit is contained in:
Ruan Yifeng 2014-12-12 08:40:44 +08:00
parent 97fcf5d921
commit 5e9968e898
3 changed files with 30 additions and 14 deletions

View File

@ -75,11 +75,11 @@ class ColorPoint extends Point {
JavaScript没有模块module体系无法将一个大程序拆分成互相依赖的小文件再用简单的方法拼装起来。其他语言都有这项功能比如Ruby的require、Python的import甚至就连CSS都有@import但是JavaScript任何这方面的支持都没有这对开发大型的、复杂的项目形成了巨大障碍。 JavaScript没有模块module体系无法将一个大程序拆分成互相依赖的小文件再用简单的方法拼装起来。其他语言都有这项功能比如Ruby的require、Python的import甚至就连CSS都有@import但是JavaScript任何这方面的支持都没有这对开发大型的、复杂的项目形成了巨大障碍。
ES6解决了这个问题实现了模块功能而且实现得相当简单完全可以取代现有的CommonJS和AMD规范成为浏览器和服务器通用的模块解决方案。 在ES6之前社区制定了一些模块加载方案最主要的有CommonJS和AMD两种。前者用于服务器后者用于浏览器。ES6在语言规格的层面上实现了模块功能而且实现得相当简单完全可以取代现有的CommonJS和AMD规范成为浏览器和服务器通用的模块解决方案。
**1export命令import命令** **1export命令import命令**
模块功能有两个命令export和import。export命令用于用户自定义模块规定对外接口import命令用于输入其他模块提供的功能同时创造命名空间namespace防止函数名冲突。 模块功能主要由两个命令构成export和import。export命令用于用户自定义模块规定对外接口import命令用于输入其他模块提供的功能同时创造命名空间namespace防止函数名冲突。
ES6允许将独立的JS文件作为模块也就是说允许一个JavaScript脚本文件调用另一个脚本文件。该文件内部的所有变量外部无法获取必须使用export关键字输出变量。下面是一个JS文件里面使用export关键字输出变量。 ES6允许将独立的JS文件作为模块也就是说允许一个JavaScript脚本文件调用另一个脚本文件。该文件内部的所有变量外部无法获取必须使用export关键字输出变量。下面是一个JS文件里面使用export关键字输出变量。
@ -107,9 +107,7 @@ export {firstName, lastName, year};
``` ```
上面代码在export命令后面使用大括号指定所要输出的一组变量。 上面代码在export命令后面使用大括号指定所要输出的一组变量。它与前一种写法直接放置在var语句前是等价的但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部一眼看清楚输出了哪些变量。
它与前一种export命令直接放置在var语句前的写法是等价的但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部一眼看清楚输出了哪些变量。
使用export命令定义了模块的对外接口以后其他JS文件就可以通过import命令加载这个模块文件 使用export命令定义了模块的对外接口以后其他JS文件就可以通过import命令加载这个模块文件
@ -213,7 +211,6 @@ export default function () {
// import-default.js // import-default.js
import customName from './export-default'; import customName from './export-default';
customName(); // 'foo' customName(); // 'foo'
``` ```
@ -277,6 +274,7 @@ export default class { ... }
// main.js // main.js
import MyClass from 'MyClass' import MyClass from 'MyClass'
let o = new MyClass();
``` ```

View File

@ -33,8 +33,6 @@
- Dmitry Soshnikov, [ES6 Notes: Default values of parameters](http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/): 介绍参数的默认值 - 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数据结构 - 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修饰符 - 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 ## Generator
@ -56,6 +54,12 @@
- Jafar Husain, [Async Generators](https://docs.google.com/file/d/0B4PVbLpUIdzoMDR5dWstRllXblU/view?sle=true): 对async与Generator混合使用的一些讨论 - 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规格和用法的详细介绍 - 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编译器 - Google, [traceur-compiler](https://github.com/google/traceur-compiler): Traceur编译器

View File

@ -379,14 +379,28 @@ r.sticky // true
var name = "Bob", time = "today"; var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?` `Hello ${name}, how are you ${time}?`
var x = 1;
var y = 2;
console.log(`${ x } + ${ y } = ${ x + y}`)
// "1 + 2 = 3"
``` ```
上面代码表示,在模板字符串中嵌入变量,需要将变量名写在${}之中。 上面代码中的字符串,都是用反引号表示。如果在模板字符串中嵌入变量,需要将变量名写在`${}`之中。
大括号内部可以进行运算,以及引用对象属性。
```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
```
模板字符串使得字符串与变量的结合,变得容易。下面是一个例子。 模板字符串使得字符串与变量的结合,变得容易。下面是一个例子。