Javascript 7的两个亮点

　　Javacript 6规范将在2015年6月完成，现在谈ES7是否太早了呢？其实不是，因为ES7的一些特性已经开始进入浏览器，比如Chrome，ES7和ES6在时间进度上不会像ES5和ES6那样相差很大。

　　Javascript 7主要亮点是在事件机制和异步编程，这两点主要体现在：

　　1. Object.observe使得模型和视图之间很容易同步。

　　2. async函数更易于异步编程，能够实现拉Pull或推Push。

　　这两点提高基础是因为JS6中引入了使用 => 代表函数，箭头函数如下例：

////ES5

function(x, y) { return x + 1; }

function(x, y) { return x + y; }

//ES6

X => X+1;

(x,y) => x+ y;

 

Object.observe

　　当前MVC模式在Angular.JS等冲击下已经变成了View视图和Model模型两个， 控制器由事件驱动机制替代，见 ：MVI是一种Reactive MVC。

　　那么为什么JS不能自然支持事件通知机制呢？ES7引入了Object.observe：

var person = {};
var changesHandler = changes => console.log(changes);
Object.observe(person, changesHandler);

　　这样，当person的内容有更改，将自动触发changes函数，如下：

person = {
　　name: " jdon"
}

　　如果person的名称从jdon改为jdon.com:

person = {
　　name: " jdon.com"
}

　　这种name内容变化，将触发函数changes输出：

[
    {
        "type":"update",
        "name":"name",
        "oldValue: "jdon"
    }
]

　　如果person增加内容：

person = {
　　name: " jdon.com"
　　employer: "banq"
}

　　激活函数输出：

[
    {
        "type":"new",
        "name":"employer",
    }
]

　　如果person删除内容employer，那么输出是：

[
    {
        "type":"delete",
        "name":"employer",
        "oldValue: "banq"
    }
]

　　解除观察是：

Object.unobserve(person, changesHandler);

　　为了防止事件风暴，ES7使用了 Event Loop Queue + Microtasks，当事件处理器EventHandler发出改变事件给ChangeHandler以后，ChangeHandler不会排队在队列后面，而是替换当前EventHandler位置，这样在浏览器渲染页面之前完成所有事件通知：

 

易于异步编程

　　如何使得异步编程如同同步堵塞编程那么简单方便？

function getStockPrice(name) {
    var symbol = getStockSymbol(name);
    var price = getStockPrice(symbol);
    return price;
}

　　这段代码中var price = getStockPrice(symbol); 是一段拉取Pull，必须堵塞等到返回值。但是等待不一定要堵塞，可以如下：

getStockPrice("Devine Inc.", price => { … });

　　这段代码其实是推Push，价格price数据作为参数推入。但是当price进来时还需要判断，如果price值是错误error的情况如何处理：

function getStockPrice(name, cb) {
    getStockSymbol(name, (error, symbol) => {
        if (error) {
            cb(error);
        }
        else {
            getStockPrice(symbol, (error, price) => {
                if (error) {
                    cb(error);
                }
                else {
                    cb(price);
                }
            })
        }
    })
}

　　这段代码中有多个丑陋的if error判断，我们引入promise:

promise.then(value => {…}, error => {…});

　　我们看看下面同步代码和异步代码的比较：

function getStockPrice(name) {
    var symbol = getStockSymbol(name);
    var price = getStockPrice(symbol);
    return price;
}

　　上面是同步，下面是异步

function getStockPrice(name) {
    return getStockSymbol(name).
         then(symbol => getStockPrice(symbol));
}

　　可以看出来异步和同步代码两者完全不同，而在ES7中异步实现代码：

async function getStockPrice(name) {
    var symbol = await getStockSymbol(name);
    var price = await getStockPrice(symbol);
    return price;
}

　　ES7引入了async这个定义。它等同于在ES6中使用Task.js库包的如下写法：

function* getStockPrice(name) {
    var symbol = yield getStockSymbol(name);
    var price = yield getStockPrice(symbol);
    return price;
}
var result =
    spawn(getStockPrice.bind(null, "Pfizer"));
result.then(console.log, console.error);

　　JS7的类型如下：

 

学习Javascript ES6几个重要特性