我在多年前爱上了coffeScript。关于javaScript,我一向保持着深邃深挚的爱,也十分高兴得看到node.js的疾速生长,然则作为一个有python背景的程序员,我更喜好coffeeScript的精练语法。
在任何一个活泼的社区中,事物的迭代更新都是必定的,如今,我们看见了javaScript向着ES6范例的巨大进步。ES6包含了比拟于CoffeeScript更多好的特征,而且经由过程如Babel如许的东西,我们已能够最先动手运用他们。以下是从coffeeScript迁移到ES6的一些注重点和我的主意。
标记
摒弃空格(whitespace
),从新转而运用圆括号,花括号和分号。请接收在运用ES6时,你会敲上更多的标记。不过在范例的代码花样下,它们看上去照样挺整齐的。
语法校验
过去我运用的是CoffeeLint,如今我经由过程babel-eslint来运用ESLint。遵照Airbnb ES6 style guide这个语法作风指南。最好将你的编辑器设置成在输入或保留时举行语法搜检。Atom’s eslint plugin这个语法校验插件异常不错,你能够将上面的Airbnb ES6 style guide
链接中的内容,放入你的.eslintrc
配置文件中。SublimeText也有类似的插件。
代码转换(Transpiling)
由于如今离对ES6的圆满支撑还很远,所以最好照样运用代码转换器(Transpiling),如Babel,就像在用CoffeeScript时一样。不过和CoffeeScript差别的是,这里有一些值得申明的:
1,并非一切的ES6特征全部都可用,诸如Proxies
。
2,尚有一些ES6特征须要运用polyfill/runtime
才可用,如Symbols,generator函数,WeakMap。一段package.json
的例子:
json
{ ... "scripts": { "lint": "eslint --ext .js,.es6 src", "precompile": "npm run lint", "compile": "babel --optional runtime src --out-dir lib", }, "dependencies": { "babel-runtime": "^5.3.3" }, "devDependencies": { "babel": "^5.3.3", ... } ... }
请不要将babel
放入dependencies
中,如许会下载很多你并不须要的package,请将babel-runtime
写在dependencies
中,将babel
写在devDependencies
中。
3,一些CoffeeScript即有的特征如数组推导(list comprehensions)在ES6中也是不可用的,由于这些特征的范例还未被完整完美。
Let和Const
var
已过期了,如今盛行的是它的好基友let
和const
。以后在javaScript中,假如要声明不可变的变量,请运用const
,反之,请运用let
。
语法校验会给出正告当你仍在运用var
或不经由过程任何关键字声明变量时。
有一个值得注重的点是,const
仅仅是指向变量地点的地点,这能够须要花一点时候去顺应:
js
const name = 'Daniel'; // This is a compile error name = 'Kari'; // --------- const options = {}; const items = []; // This is *not* a compile error options.foo = 'bar'; options.baz = 5; items.push(1); items.push(2); // This *is* a compile error options = {}; items = null;
字符串替代
荣幸的是,CoffeScript和ES6关于字符串替代方面区分很小,你要做的只是转变一下你的手指肌肉影象:
js
const name = 'World'; console.log(`Hello, ${name}!`);
注重反引号替代了双引号。
请确保你的编辑器能准确的高亮这些新语法,我敢保证在一最先你任然会时不时敲出#{name}
。。
函数
ES6中,有了一些新的函数范例,如generator函数和胖箭头(=>)函数。胖箭头函数在ES6和CoffeeScript中表现一致,如绑定函数中的上下文(this)为它被定义时的上下文。
函数的变参也一样被支撑,然则与coffeeScript语法差别的是,ES6中省略号在别的一侧。参数默认值和解构赋值也一样被支撑。
coffeeScript:
Coffee
square = (value) -> value * value someTask (err, result) => # Handle err and result myFunc = ({source, flag}, args...) -> otherFunc source, args...
javaScript:
js
const square = value => value * value; someTask((err, result) => { // Handle err and result }); function myFunc({source, flag}, ...args) { return otherFunc(source, ...args); }
generator函数:
generator函数供应了一种迭代一系列超长使命的便利体式格局,例子:
js
// Instead of creating a 10000 item array, we yield each item as // needed. function *squares() { for (let n = 0; n < 10000; n++) { yield n * n; } } for (let square of squares()) { console.log(square); }
经由过程function*
语法来声明一个generator函数。这与CoffeScript中只需函数体内包含yield
关键字,本函数就是generator函数差别。generator函数一样也能够yield和返回值。
类(Classes)
二者关于类的语法异常的类似,不过在ES6中,只能够在class
中声明函数。下面的例子申清楚明了二者语法的靠近,包含继续:
coffeeScript:
Coffee
class Account extends Foo @types = ['checking', 'savings'] constructor: (@balance) -> history: (done) -> someLongTask (err, data) -> # Do something with data done null, data deposit: (amount) -> @balance += amount
javaScript:
js
class Account extends Foo { constructor(balance) { this.balance = balance; } history(done) { someLongTask((err, data) => { // Do something with data done(null, data); }); } deposit(amount) { this.balance += amount; return this.balance; } } // Currently, you can only declare functions in a class Account.types = ['checking', 'savings'];
一个不错的特征是类有了定义getter
和setter
的才能,不过它们不能是generator函数:
js
class Account { constructor() { this.balance = 0; } get underBudget() { return this.balance >= 0; } get overBudget() { return this.balance < 0; } } const myAccount = Account(); myAccount.balance = 100; console.log(myAccount.underBudget); // => true
可遍历类(Iterable Classes)
另一个天真的特征就是能够建立可遍历类,而且能够将generator函数用于遍历器。
js
class MyIterable { constructor(items) { this.items = items; } *[Symbol.iterator]() { for (let item of this.items) { yield `Hello, ${item}`; } } } const test = new MyIterable([1, 2, 3, 4, 5]); for (let item of test) { console.log(item); // => Hello, 1... }
模块
ES6供应了一个新的模块语法,这也须要花肯定时候顺应,由于它同时供应了匿名导出和一般导出:
js
import _ from 'lodash'; import {item1, item2} from './mylib'; import * as library from 'library'; //一般导出 export const name = 'Daniel'; export function abc() { return 1; } export class Toaster { // ... } //匿名导出 export default function() { return new Toaster(); }
几个值得注重的点:
1,假如不运用匿名导出,你不能直接经由过程import moduleName from 'moduleName';
来猎取一切的导出对象,而是要运用import * as moduleName from 'moduleName';
:
js
// mymodule.js // ----------- export function yes() { return true; } // script-broken.js // ---------------- import mymodule from './mymodule'; // This gives an error about `undefined`! console.log(mymodule.yes()); // script-working.js // ----------------- import * as mymodule from './mymodule'; console.log(mymodule.yes());
2,假如剧本中仅仅只要一个匿名导出,那末在运用Node.js的require
敕令引入时,这个匿名导出的对象表现得像被传递给了module.exports
一样。然则假如剧本中另有其他的一般导出,就会获得异常新鲜的效果:
js
// mymodule.js // ----------- export function yes() { return true; } function no() { return false; } export default {yes, no}; // script-working.js // ----------------- import mymodule, {yes} from './mymodule'; console.log(mymodule.no()); console.log(yes()); // script-broken.js // ---------------- const mymodule = require('./mymodule'); // Wat? This is an error. console.log(mymodule.no()); // This works instead. Turns out the module is an object with a 'default' // key that contains the default export. console.log(mymodule.default.no());
这个坑爹的状况现在还没有任何好的解决方案。所以假如你正在写一个库而且预备让Node.js运用者运用require
敕令对其举行导入,最好只运用一次匿名导出,而且把一切的一切都绑定在这个匿名导出的对象的属性上。
结语
愿望本文能够协助到一些预备从coffeeScript迁移到ES6的人,我本人也在进修ES6的过程当中感受到实足的兴趣,而且我对我的新玩具ESLint和Babel实在是爱不释手。。