|:-------------------------:|:--------------------------:|
| Arrow functions           | Function bind              |
| Async functions           | Generators                 |
| Async generator functions | Modules                    |
| Block scoping             | Module export extensions   |
| Block scoped functions    | New literals               |
| Classes                   | Object rest/spread         |
| Class properties          | Property method assignment |
| Computed property names   | Property name shorthand    |
| Constants                 | Rest parameters            |
| Decorators                | Spread                     |
| Default parameters        | Sticky regex               |
| Destructuring             | Template literals          |
| Do expressions            | Trailing function commas   |
| Exponentiation operator   | Type annotations           |
| For-of                    | Unicode regex              |
|:-------------------------:|:--------------------------:|

官网地址：http://babeljs.io/

localstorage

2016-07-01

技术文档

王阳

IndexedDB介绍

IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能，在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。

IndexedDB里数据以对象的形式存储，每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里，objectStore就相当于关系数据库里的表。IndexedDB可以有很多objectStore，objectStore里可以有很多对象。每个对象可以用key值获取。

IndexedDB vs LocalStorage

IndexedDB和LocalStorage都是用来在浏览器里存储数据，但它们使用不同的技术，有不同的用途，你需要根据自己的情况适当的选择使用哪种。LocalStorage是用key-value键值模式存储数据，但跟IndexedDB不一样的是，它的数据并不是按对象形式存储。它存储的数据都是字符串形式。如果你想让LocalStorage存储对象，你需要借助JSON.stringify()能将对象变成字符串形式，再用JSON.parse()将字符串还原成对象。但如果要存储大量的复杂的数据，这并不是一种很好的方案。毕竟，localstorage就是专门为小数量数据设计的，它的api是同步的。

IndexedDB很适合存储大量数据，它的API是异步调用的。IndexedDB使用索引存储数据，各种数据库操作放在事务中执行。IndexedDB甚至还支持简单的数据类型。IndexedDB比localstorage强大得多，但它的API也相对复杂。

对于简单的数据，你应该继续使用localstorage，但当你希望存储大量数据时，IndexedDB会明显的更适合，IndexedDB能提供你更为复杂的查询数据的方式。

IndexedDB vs Web SQL

WebSQL也是一种在浏览器里存储数据的技术，跟IndexedDB不同的是，IndexedDB更像是一个NoSQL数据库，而WebSQL更像是关系型数据库，使用SQL查询数据。W3C已经不再支持这种技术。具体情况请看：http://www.w3.org/TR/webdatabase/。

因为不再支持，所以你就不要在项目中使用这种技术了。

IndexedDB vs Cookies

Cookies(小甜点)听起来很好吃，但实际上并不是。每次HTTP接受和发送都会传递Cookies数据，它会占用额外的流量。例如，如果你有一个10KB的Cookies数据，发送10次请求，那么，总计就会有100KB的数据在网络上传输。Cookies只能是字符串。浏览器里存储Cookies的空间有限，很多用户禁止浏览器使用Cookies。所以，Cookies只能用来存储小量的非关键的数据。

IndexedDB的用法

想要理解IndexedDB，最好的方法是创建一个简单的web应用：把一个班的学生的学号和姓名存储在IndexedDB里。IndexedDB里提供了简单的增、删、改、查接口。

打开一个IndexedDB数据库

首先，你需要知道你的浏览器是否支持IndexedDB。请使用最新版的谷歌浏览器或火狐浏览器。低版本的IE是不行的。
1
2
3
4
5
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
if(!window.indexedDB)
{
    console.log("你的浏览器不支持IndexedDB");
}
一旦你的浏览器支持IndexedDB，我们就可以打开它。你不能直接打开IndexedDB数据库。IndexedDB需要你创建一个请求来打开它。
1
var request = window.indexedDB.open("testDB", 2);
第一个参数是数据库的名称，第二个参数是数据库的版本号。版本号可以在升级数据库时用来调整数据库结构和数据。

但你增加数据库版本号时，会触发onupgradeneeded事件，这时可能会出现成功、失败和阻止事件三种情况。
1
2
3
4
5
6
7
8
9
10
11
12
13
var db;
request.onerror = function(event){
    console.log("打开DB失败", event);
}
request.onupgradeneeded   = function(event){
    console.log("Upgrading");
    db = event.target.result;
    var objectStore = db.createObjectStore("students", { keyPath : "rollNo" });
};
request.onsuccess  = function(event){
    console.log("成功打开DB");
    db = event.target.result;
}
onupgradeneeded事件在第一次打开页面初始化数据库时会被调用，或在当有版本号变化时。所以，你应该在onupgradeneeded函数里创建你的存储数据。如果没有版本号变化，而且页面之前被打开过，你会获得一个onsuccess事件。如果有错误发生时则触发onerror事件。如果你之前没有关闭连接，则会触发onblocked事件。

在上面的代码片段里，我们创建了一个Object Store，叫做“students”，用“rollNo”做数据键名。

往ObjectStore里新增对象

为了往数据库里新增数据，我们首先需要创建一个事务，并要求具有读写权限。在indexedDB里任何的存取对象的操作都需要放在事务里执行。
1
2
3
4
5
6
7
8
9
10
11
var transaction = db.transaction(["students"],"readwrite");
transaction.oncomplete = function(event) {
    console.log("Success");
};

transaction.onerror = function(event) {
    console.log("Error");
};
var objectStore = transaction.objectStore("students");

objectStore.add({rollNo: rollNo, name: name});

从ObjectStore里删除对象

删除跟新增一样，需要创建事务，然后调用删除接口，通过key删除对象。
1
db.transaction(["students"],"readwrite").objectStore("students").delete(rollNo);
我把语句合并到了一起，变得更简单，但效果是一样的。

通过key取出对象

往get()方法里传入对象的key值，取出相应的对象。

var request = db.transaction(["students"],"readwrite").objectStore("students").get(rollNo);
request.onsuccess = function(event){
    console.log("Name : "+request.result.name);    
};

更新一个对象

为了更新一个对象，首先要把它取出来，修改，然后再放回去。

var transaction = db.transaction(["students"],"readwrite");
var objectStore = transaction.objectStore("students");
var request = objectStore.get(rollNo);
request.onsuccess = function(event){
    console.log("Updating : "+request.result.name + " to " + name);
    request.result.name = name;
    objectStore.put(request.result);
};

完整代码

为大家更加好的了解整体，下面贴出完整代码

$(function () {
    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    var request, db;

    if (!window.indexedDB) {
        console.log("Your Browser does not support IndexedDB");
    }
    else {
        request = window.indexedDB.open("testDB", 2);
        request.onerror = function (event) {
            console.log("Error opening DB", event);
        };
        request.onupgradeneeded = function (event) {
            console.log("Upgrading");
            db = event.target.result;
            var objectStore = db.createObjectStore("students", {keyPath: "rollNo"});
        };
        request.onsuccess = function (event) {
            console.log("Success opening DB");
            db = event.target.result;
        };
    }

    $("#addBtn").click(function () {
        var name = $("#name").val();
        var rollNo = $("#rollno").val();

        var transaction = db.transaction(["students"], "readwrite");
        transaction.oncomplete = function (event) {
            console.log("Success :)");
            $("#result").html("Add : Success");
        };

        transaction.onerror = function (event) {
            console.log("Error :(");
            $("#result").html("Add : Error");
        };
        var objectStore = transaction.objectStore("students");

        objectStore.add({rollNo: rollNo, name: name});
    });

    $("#removeBtn").click(function () {
        var rollNo = $("#rollno").val();
        db.transaction(["students"], "readwrite").objectStore("students").delete(rollNo);
    });
    $("#getBtn").click(function () {
        var rollNo = $("#rollno").val();
        var request = db.transaction(["students"], "readwrite").objectStore("students").get(rollNo);
        request.onsuccess = function (event) {
            $("#result").html("Name : " + request.result.name);
        };
    });

    $("#updateBtn").click(function () {
        var rollNo = $("#rollno").val();
        var name = $("#name").val();
        var transaction = db.transaction(["students"], "readwrite");
        var objectStore = transaction.objectStore("students");
        var request = objectStore.get(rollNo);
        request.onsuccess = function (event) {
            $("#result").html("Updating : " + request.result.name + " to " + name);
            request.result.name = name;
            objectStore.put(request.result);
        };
    });
});

PPT演示地址;DEMO演示地址。如果有任何的问题，请留言。

Hexo书写博客

2016-06-23

技术文档

王阳

Hexo简介

A fast, simple & powerful blog framework, powered by Node.js.

工具推荐

WebStorm
Visual Studio Code
MarkdownPad

安装步骤

1. 首先得有Node.js.

2. 其次全局安装hexo

1	$ npm install -g hexo

3. git clone 克隆配置完好的Hexo环境

1
2
3

$ git clone git@github.com:TC-Flight-Int-Web/blog.git
$ cd blog
$ git pull origin master //获取最新的代码，防止冲突，搞掉其他人文章

记住一定要获取最新的代码

4. 进入对应目录,安装对应依赖包

1 2	$ cd blog $ npm install

5. 创建一篇文章

1 2	$ hexo new "Hello Hexo" $ INFO Created: [绝对路径]\blog\source\_posts\hello-hexo.md

6. 本地书写文章打开对应目录文件

1	$ 打开对应目录文件【[绝对路径]\blog\source\_posts\hello-hexo.md】

7. 打开markdown，默认情况

markdown默认情况

title 文章标题

date 发布时间

tags 标签

author 作者

8. markdown语法书写

添加图片统一路径
图片添加的语法

9. 启动Hexo Server 本地查看

1
2
3

$ hexo s
$ INFO  Start processing
$ INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

10. 发布文章

$ hexo clean //清除缓存
$ hexo d
$ INFO  Deploying: git
$ INFO  Clearing .deploy_git folder...
$ INFO  Copying files from public folder...
$ INFO  Deploy done: git

发布执行请先hexo clean 清除发布历史数据

目前发布文章需要手动输入github用户名和密码进行发布

11. 提交代码，防止其他人搞掉你的文章

$ git pull origin master
$ git add .
$ git commit -m "文章书写"
$ git push origin master

webpack从入门到精通（一）

2016-06-17

读书笔记

什么是webpack

事实上它是一个打包工具，而不是像RequireJS或SeaJS这样的模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包

webpack安装步骤

首先得有Node.js
其次全局安装webpack
```
npm install -g webpack
```
在项目目录中安装webpack和插件
```
npm install —save-dev webpack
```
配置webpack

webpack配置

默认使用webpack.config.js

var path = require('path');
module.exports = {
    entry:'./jsx/app.jsx',
    output:{
        path: path.join(__dirname , "/build"),
        filename:'app.js'
    },
    module:{
        loaders:[
            {
                test:/\.(js|jsx)$/,
                loaders:['babel'],
                exclude:[path.join(__dirname , "/build")]
            }
        ]
    }
};

其中entry是入口文件，output是编译后输出文件，module中loaders是解析操作

##未完待续

小T有话说

2016-04-20

随笔

每一篇文章都是积累

做一场冒险的表演，当你没有事情做的时候，想想你真的没有事情了吗？很多人可能在没有事情做的时候会想起自己在这个社会中还有什么价值。还有什么意义，我只能对这件事情下个结论，纯属扯淡。每个人都会有自己的烦恼和想法，但是我们不能因为这些事情而影响自己的心情和做的什么。应该做什么。
我们常说不管我们在什么地方都不要忘记了学习，大家就应该知道学习和自我提升的重要性。

同程机票，不一样的体验

2016-04-19

随笔

回首第一次

第一次来同程的时候，感觉整个人还是挺不错的，在一个新的环境中来，可以得到很多的东西，记得第一次看见同程的大楼，还以为以后自己就会在这里工作还是挺高大上的，但是后面才知道我所在的事业部不会到新大楼去，还是有点遗憾的。可以给大家看看同程新大楼的雄伟样子，当初来这里的时候，其实很大一部分，还是很想进去的，但是在最后还是没有进去。给大家欣赏下图片。哈哈。

同程机票

在后来就进入部门，机票事业部，感觉开始很长的一段时间都会在机票事业部里面度过了，从毕业开始基本上就是在机票这个行业里面摸爬滚打，这里可以谈谈同程的机票事业部的情况，基本分为国内机票和国际机票，最近又划分了一个智慧出行，主要做机票相关的其他服务。来到前端组，对前端的东西进行研究，主要分为无线和pc，无线中主要的来源是微信，也就是说基本上每天的票量都来自微信，比较依赖于微信，而微信这个机票平台，也是因为腾讯投资之后才开放的，总共购买了5年，其实太依赖于某个平台其实并不是很好，总有一天你会被其他人取代，所以，同程人也在想很多方法进行引流，希望能在自己的app上能有所收获，记得之前公司也在做app，但是整体效果就是不一样，基本同一个时间做的app，但是最后的效果就完全不一样，只是觉得还是有资金的都是老大，做什么都很快很给力，现在的同程已经部署当年那个向前冲的团队了，这个团队需要更多的规范和套路来推进，所以，需要引进大量的人才。机票事业部基本上很多东西都没有，进来巧合的先去了国内机票听了下国内机票的项目培训，了解了国内机票的整体情况，很多东西都还是处于亏损状态，还是有很大的挑战空间，如果能把这部分的亏损换成不亏损，就是间接的盈利。国际机票就更加的简单。刚刚没有成立多久，但是很有挑战力，所以后来选择来到了国际机票，国际票这边感觉和国内简直是两个世界。这个两个世界我会在后面提到。

两个世界的机票

可能是国内和国际本质上面的不同，国际机票在开发的流程和国内机票选择不同的方式，国内的开发用的jira，国际为了不同用的tapd，这两个版本控制个人觉得是没有什么区别的，都属于敏捷开发模型中的一个产物，但是在使用的过程中，就不得不吐槽。基本上是由组长查看，然后分配，完全把这个工具用成了需求传递的一个东西，为了看整体数据的存在。

如果你知道在敏捷一定会知道故事墙，这个墙上面有各种你需要完成的需求点，每个开发人员需要在上面取自己想做的一些卡片，最后再一步一步的在卡墙上面进行托动。之前在一家敏捷做的很好的外企待过，所以，对于现在的这种模式表示很不理解。其实很多公司都在用敏捷，我承认每家公司不一样，但是，个人觉得还是要有相应的方式。如果想了解敏捷可以去谷歌。也给大家推荐一个文章京麦敏捷团队.

好的产品是需要方向

记得之前给事业部的产品发过一封邮件，但是没有得到很好的重视，我是一个比较喜欢挑战的人，不喜欢做其他人都在做的事情，如果做产品，你还是在老的东西上面寻求不变的话，那么我想你的用户为什么来，我知道对于同程来说，基本上很多东西都已经稳定了，但是没有一个人重视我的个人想法，随时老大找我沟通过，但是还是在给我传各种原因和因素。这些需求不能做，让我想起来同程的时候公司老总的事迹，同程老总吴志祥(一篇老总的文章)，当初在阿里的时候也给马总提过一个大家不理解想法，虽然我个人感觉，我的想法是没有吴老板这样的大，但是我的点也是自己想出来的，也谈不上好，谈不上差，就是希望上面的人能好好的研究下，后面感觉就是没有人管你。

如何做好机票，个人的拙见

未完待续。。。