• 1995 LiveScript发布      随后改名为 JavaScript
• 1997 ECMAScript 1 
• 1999 ES3 (大变化）
• ES4 流产 (harmony)
• 2009  ES5（ES3.1）
• 2015. 06. 17   ES6  ECMAScript 2015 

JavaScript简史

Brendan Eich  @Netscape

->1993年的小鲜肉

Via

《JavaScript at 20》

ECMAScript 5 在浏览器的实现情况

数据来源：http://kangax.github.io/compat-table/es5/

声明 - Declarations

let  && const 

var num = 222;

if (true) {
  num = 666; 
  let num;
  console.log('此时的num是什么：' + num );
}

for (var i=0; i<6; i++) {
  setTimeout(function() {
    console.log(i)
  },0);
}

Arrows

Syntax

const name = 'object name';
let obj = {
  name,
  init() {
    // Lexical this
    $.on('click', () => this.name);
  }
};

//改造一下上面例子，this变成什么？
let obj = {
    init: ()=> this
};

注意点(keng) ：

Template String

Syntax

// 多行字符串，引号
var multiStr = `In 'JavaScript' this is
                not legal.`;

// 字符串插值
var name = "QCon", time = "today";
console.log(`Hello ${name},
how are you ${time}?`);

Classes

Syntax

class Animal {
  constructor(name) {
    this.name = name;
  }
  say(msg){
    alert(`${this.name} says ${msg}`);
  }
  static staticMethod() {
    return '不能被实例继承，子类可继承父类';
  }
}
class Panda extends Animal {
  say(msg = 'hi') {
    super(msg); // 调用父类say方法
  }
}
let panda = new Panda('Tuan');
panda.say(); // 'Tuan says hi'
panda.say('Ooooh'); // 'Tuan says Ooooh'

• constructor
• this
• default
• extends
• super
• 静态方法

// 上面代码转换为ES5 
'use strict';

function _inherits(subClass, superClass) { 
if (typeof superClass !== 'function' && superClass !== null) { 
throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); 
} subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); 
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ superClass; 
}
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var Animal = (function () {
  function Animal(name) {
    _classCallCheck(this, Animal);
    this.name = name;
  }
  Animal.prototype.say = function say(msg) {
    alert(this.name + ' says ' + msg);
  };
  Animal.staticMethod = function staticMethod() {
    return '不能被实例继承，子类可继承父类';
  };
  return Animal;
})();
var Panda = (function (_Animal) {
  _inherits(Panda, _Animal);
  function Panda() {
    _classCallCheck(this, Panda);
    _Animal.apply(this, arguments);
  }
  Panda.prototype.say = function say() {
    var msg = arguments.length <= 0 || arguments[0] === undefined ? 'hi' : arguments[0];
    _Animal.prototype.say.call(this, msg); // 调用父类say方法
  };
  return Panda;
})(Animal);
var panda = new Panda('Tuan');
panda.say(); // 'Tuan says hi'
panda.say('Ooooh'); // 'Tuan says Ooooh'

Modules

Syntax

// 模块导入
import { lightRed } from './colors';
import { Component } from 'angular2/core';
import * as UserModule from './user.module';

let userCtrl = UserModule.ctrl;
// 模块导出
export { userCtrl };
export class App{
  constructor() {}
};
export default lightRed;

AMD, CommonJS, UMD

More Detail in: 下一代模块化的js

More Info About ES6：

•   ES6features(中文版)
•   es6features(Github)
• 《Exploring ES6》- Free Online Book
• 《Understanding ECMAScript 6》-  Book
• 《ECMAScript 6 入门》
•   Mozilla: ES6 In Depth
•   Learn ES6 by doing it

Angular - ES6

⬇️

Babel

⬇️

 Webpack & Gulp & JSPM

⬇️

ESlint

⬇️

Debug & Unit Test

⬇️

React , Node, Meteor - ES6

Angular.js

• Angular ES5
• Angular ES6
• Angular 2.0

Angular ES6 VS ES5

angular.module('myapp', ['localInfos'])
.service('locationService', ['localInfo', '$q',
 function(localInfo, $q) {
    $scope.localInfo = localInfo;

    // 打印当前状态
    $scope.printInfo = function(msg) {
       msg = msg || 'unknown';
       console.log('State:' + msg);  
    };

    // 寻找当前位置
    $scope.findLocation = function() {
      var deferred = $q.defer();
      var self = this;
      
      navigator.geolocation.getCurrentPosition(function(pos) {
        pos = pos || {};
        self.printInfo('Location');
        self.localInfo.save(pos);
        deferred.resolve('You are at ' + pos.coords.latitude);
      }, deferred.reject);

      return deferred.promise;
    };
  }
]);

ES5 Angular 1.x Service

angular.module('myapp', ['localInfos'])
.service('locationService', LocationService);

class LocationService {
    constructor(localInfo, $q) {
        'ngInject';
        this.localInfo = localInfo;
        this.$q = $q;
    }

    // 打印当前状态
    printInfo(msg = 'unknown') {
       console.log(`State: ${msg}`);  
    }

    // 寻找位置
    findLocation() {
        return this.$q((resolve, reject) => {

            navigator.geolocation.getCurrentPosition((pos = {}) => {
                this.printInfo('Location');
                this.localInfo.save(pos);
                resolve(`You are at ${pos.coords.latitude}`);
            }, reject);
        });
    }
}

ES6 Angular 1.x Service

// 'app/index.js'
import angular from 'angular';
import UserService from './user.service';
import UserController from './user.controller';

angular.module('myApp',[])
.factory('userService', UserService)
.controller('userController', UserController);

Angular with es6 In Depth

// "shop/shop.module.js"
import { ShopController } from './shop/shop.controller';
import { ShopService } from './shop/shop.service';
 
let ctrl = ShopController;
let svc = ShopService.init; 
 
export { svc };
export { ctrl };

另一种按页面进行分模块导入导出，

并可DIY暴露特定方法的模式

// 调用方 'index.js'
import * as ShopModules from './shop/shop.module';
 
angular.module('microshop',[])
.factory('shopSvc', ShopModules.svc)
.controller('shopCtrl', ShopModules.ctrl);

// 'user.service.js'
class UserService {
    constructor($http) {
        'ngInject';

        this.$http = $http;
        this.userUrl = '/serve/user/';
    }
    getUser(name = 'Hanmeimei') {
        return this.$http.get(this.userUrl + name)
            .then((response) => response.data);
    }
}

export default UserService;

Angular ES6 VS 2.0

Angular 2.0

• Why

• What

• When

// Angular 2.0
import { UnicornHorn } from "../animals/unicorn";
class UnicornHype {
    constructor(unicornHorn:UnicornHorn) {
        this.horn = unicornHorn;
    }
    findUnicorn() {
        return new Promise((resolve, reject) => {
            navigator.geolocation.getCurrentPosition((pos) => {
                this.horn.thrust();
                resolve(`The unicorn is at ${pos.coords.latitude}`);
            }, reject);
        });
    }
}

差异在哪儿？

di-in-angular-2

完美

More Info about Angular 2.0：

• 广发证券技术博客
• https://slides.com/tangguichuan/dissect-angular2/#
• Angualr.js 2.0 官网
• Try angular2 today
• asm.js , Flow
• Change detection in angular 2
• Angular2 template syntax(ng-model) 
• Building applications in Angular
• The core concepts of angular 2

Angular - ES6

⬇️

Babel

⬇️

Webpack & Gulp & JSPM

⬇️

ESlint

⬇️

Debug & Unit Test

⬇️

React , Node, Meteor - ES6

1.Compatibility(支持度高):

• WHY

Eg:引擎优化

More Detail：

• Don't leak arguments
• Optimization-killers​
• immutable-js

// ES6 
(...args) => args


// 转换为ES5
(function () {
  for (
        var _len = arguments.length, 
        args = Array(_len),
         _key = 0; 
        _key < _len;
         _key++
      ) {
    
    args[_key] = arguments[_key];
  }

  return args;
});

Babel中有哪些优雅的实现？

More Information:

• Babel 官网
• Babel Polyfill For Old Browser 兼容
• Babel 6.0 新版本
• Babel在线转换ES6代码

Angular - ES6

⬇️

Babel

⬇️

Webpack & Gulp & JSPM 

⬇️

ESlint

⬇️

Debug & Unit Test

⬇️

React , Node, Meteor - ES6

// gulp与babel结合

var gulp = require("gulp");
var babel = require("gulp-babel");

gulp.task("default", function () {

  return gulp.src("src/app.js")

    .pipe(babel())

    .pipe(gulp.dest("dist"));
});

• Webpack官网
• Gulp.js官网
• Babel wtih Gulp and Webpack
• Writing client-side ES6 with webpack
• Webpack babel-loader

More Information:

Angular - ES6

⬇️

Babel

⬇️

Webpack & Gulp & JSPM

⬇️

ESlint

⬇️

Debug & Unit Test

⬇️

React , Node, Meteor - ES6

• SystemJS - Module Loader 

        -- ES6,AMD,CommonJS...

        -- babel-runtime

How

What

Angular - ES6

⬇️

Babel

⬇️

Webpack & Gulp & JSPM

⬇️

ESlint

⬇️

Debug & Unit Test

⬇️

React , Node, Meteor - ES6

ESLint

By Nicholas C. Zakas

Configuring:

• rules

• ecmaFeatures

• Parser: 

1. espree(Default)
2. esprima (Base)
3. esprima-fb (JSX)
4. babel-eslint

The pluggable linting utility for JavaScript and JSX

Angular - ES6

⬇️

Babel

⬇️

Webpack & Gulp & JSPM

⬇️

ESlint

⬇️

Debug & Unit Test

⬇️

React , Node, Meteor - ES6

HOW

• - > ES5
• Source Maps
• Runtime Transpiler

Angular - ES6

⬇️

Babel

⬇️

Webpack & Gulp & JSPM

⬇️

ESlint

⬇️

Debug & Unit Test

⬇️

React , Node, Meteor - ES6

Tools

• jasmine.js
• karma.js

Setting up the test environment:

• package.json
• karma.config.js
• test-context.js

ES6 化的单元测试

// karma.config.js
module.exports = function(config) {
    config.set({
        browsers: ['PhantomJS'],
        frameworks: ['jasmine'],
        webpack: {
            module: {
                loaders: [{
                    test: /\.js/, 
                    loader: 'babel-loader', 
                    exclude: /node_modules/ 
                }]
            },
            watch: true
        }
    });
};

// test.js
export class Calculator{

    add(op1,op2){
        return op1 + op2;
    }

    subtract(op1,op2){
        return op1 - op2;
    }
}

测试的目标文件如下：

// calculator-spec.js
import {Calculator} from './calculator';

describe('Calculator', () => {
   it('should add two numbers', () => {
       let calculator = new Calculator();
       let sum = calculator.add(1,4);
       expect(sum).toBe(5);
   });
    it('should subtract two numbers', () => {
        let calculator = new Calculator();
        let sum = calculator.subtract(4,1);
        expect(sum).toBe(3);
    });
});

ES6化的Unit Test 文件:

Angular - ES6

⬇️

Babel

⬇️

Webpack & Gulp & JSPM

⬇️

ESlint

⬇️

Debug & Unit Test

⬇️

React , Node, Meteor - ES6

React v0.13  

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { 
    initialCount: React.PropTypes.number 
};
Counter.defaultProps = { initialCount: 0 };

Tools for react, jsx

More Info:

• React On ES6 Plus
• React v0.14 (Symbol  - XSS)
• Jest -PAINLESS JS UNIT TESTING
• Redux
• Refactoring React Components To ES6 Classes 

Angular - ES6

⬇️

Babel

⬇️

Webpack & Gulp & JSPM

⬇️

ESlint

⬇️

Debug & Unit Test

⬇️

React , Node, Meteor - ES6

• ES6 on io.js

           No more --harmony (Node v0.12)

• ES6 in Node.js  - V4

• shipping
• staged
• in progress

• Node V6

   支持93% ES6

Angular - ES6

⬇️

Babel

⬇️

Webpack & Gulp & JSPM

⬇️

ESlint

⬇️

Debug & Unit Test

⬇️

React , Node, Meteor - ES6

Announcing Meteor 1.2

  – ES6, Angular, React, and More

 ES6 is now the official JavaScript

  of the Meteor platform.

 Every new Meteor project now uses ES6

  by default, in every JS file. 

标准是怎样炼成的

方案生命周期 - stages：

   Stage 0  : Strawman  建议方案

   Stage  1  : Proposal     提案       

   Stage  2 :  Draft           草案          

   Stage  3 :  Candidate  候选方案   

   Stage  4 :  Finished     定案

• See: ECMAScript Current Status

EMCAScript 2016

Stage 0

• es7.comprehensions - [ for (i of [ 1, 2, 3]) i*i ]
• es7.classProperties - 静态类属性
• es7.doExpressions
• es7.functionBind - ::

Stage 1

• es7.decorators - 装饰器语法 Angular 2
• es7.exportExtensions
• es7.trailingFunctionCommas

Stage 2

• es7.exponentiationOperator
• es7.objectRestSpread - ...

 Object observe 

Babel 支持

Stage 3

• es7.async-await - koa2

使用Babel玩转ES7 - 插件导入

• 开启某特性支持

{
  "plugins": [
    ["transform-async-to-module-method", {
      "module": "bluebird",
      "method": "coroutine"
    }]
  ]
}

• async-to-generator
• async-to-module-method
• class-constructor-call
• class-properties
• decorators

• do-expressions
• exponentiation-operator
• export-extensions
• function-bind
• object-rest-spread

• 开启Babel ES7支持
• ecmascript-7
• Brendan Eich Blog
• Mozilla JavaScript Reference
• TC39 On Github
• ES7支持性

More Information:

Homework

1. 在Babel线上平台编写ES6代码，并观察转换后的代码是怎么样的，是否有问题？
2. 使用ES6语法改写一个不少于200行代码的文件（可拆解为多个文件）
3. 将这些ES6文件用Babel，gulp等工具或脚手架 运行起来
4. 制造错误，看看怎么来调试ES6的代码