这次组会上分享的内容主要有以下几个方面：

• 抓包工具Fiddler和Rythem的一些功能和主要用途的介绍
• git 分支管理 规范化
• ES6中 Promise, Generate, 异步编程，co 以及ES7中Async函数的简单讲解，以及异步编程的各种上述实现方式的对比
• 自动构建项目工具 Yeoman ，react-webpack 生成的配置文件的讲解，以及推荐用react, vue, electron等框架去尝构建项目

ES6 Promise Generator

相关博客: （ES6博大精深，这里肯定讲不完，大家可以在下面给出的参考链接中深入学习）
Promise对象
Generator 函数
异步操作和Async函数

Promise

Promise的两个特点：

1. 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

Example:

var promise = new Promise(function(resolve, reject) {
    // ... some code 
    if (/* 异步操作成功 */){ 
        resolve(value); 
    } else { 
        reject(error); 
    }
});
//Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。
//Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。
promise.then(function(value) {  
    // success
}, function(error) {  
    // failure
});

Promise.prototype.then()

then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。
采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。

getJSON("/post/1.json").then(function(post) { 
    return getJSON(post.commentURL);
}).then(function funcA(comments) { 
         console.log("Resolved: ", comments);
}, function funcB(err){
          console.log("Rejected: ", err);
});

Generator

• Function*(){}
• Yield/yield*
  -- return undefined
  -- caculate the expression immediately
  {value:caculate,done:boolean}
  -- breakpoint
• Methods prototype iterable-- next()
  -- throw()-- return(value)

Generator yield语句

由于Generator函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield语句就是暂停标志。

遍历器对象的next方法的运行逻辑如下。

1.遇到yield语句，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
2.下一次调用next方法时，再继续往下执行，直到遇到下一个yield语句。
3.如果没有再遇到新的yield语句，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
4.如果该函数没有return语句，则返回的对象的value属性值为undefined。

异步编程

QQ20160919-0@2x.png

1.回调函数

回调函数大家都很熟悉，就不多说了。回调函数本身并没有问题，但是在异步操作过多的情况下，嵌套的callback，会使程序的可读性和可维护性大大降低。

fs.readFile(fileA, function (err, data) { 
    fs.readFile(fileB, function (err, data) {  
         // ... 
    });
});

2.观察监听

通过监听事件，获得事件触发的消息，并针对消息进行操作。 发布订阅为其改进

3.Promise

Promise就是为了解决"回调函数噩梦"而提出的。Promise 对象是一个返回值的代理，表示一个将来可能会完成或拒绝的动作。它不是新的语法功能，而是一种新的写法，允许将回调函数的嵌套，改成链式调用。采用Promise，连续读取多个文件，写法如下。

var readFile = require('fs-readfile-promise');
readFile(fileA).then(function(data){
   console.log(data.toString());
}).then(function(){ 
    return readFile(fileB);
}).then(function(data){ 
    console.log(data.toString());
}).catch(function(err) { 
    console.log(err);
});

可以看到，Promise 的写法只是回调函数的改进，使用then方法以后，异步任务的两段执行看得更清楚了，除此以外，并无新意。
Promise 的最大问题是代码冗余，原来的任务被Promise 包装了一下，不管什么操作，一眼看去都是一堆 then，原来的语义变得很不清楚。

generator

Es6实现的协程，在某一时间只有一任务在执行，任务状态被记录，多任务可以传递执行权。

ES6在异步编程方面提升还是很大的

QQ20160921-0.png

Co /Async await

• yieldable-- promise
  -- thunk-- array,object-- generator/gen func
• Serial
• parallel
  -- [promise1,...]-- {0:promise1,...}
• co(function*(){})=asyncfunction(){}

ES6 中新增的 generator，本质是可以将一个函数执行暂停，并保存上下文，再次调用时恢复当时的状态。Co 模块是个不错的封装。
ES7 中有了更加标准的解决方案，新增了 async/await 两个关键词。async 可以声明一个异步函数，此函数需要返回一个 Promise 对象。await 可以等待一个 Promise 对象 resolve，并拿到结果。
比如下面的例子，以往我们无法在 JavaScript 中使用常见的 sleep 函数，只能使用 setTimeout 来注册一个回调函数，在指定的时间之后再执行。有了 async/await 之后，我们就可以这样实现了：

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
         setTimeout(function () {
            resolve();
          }, time);
    });
};
var start = async function () {
    console.log(‘start’);
    await sleep(3000);
    console.log(‘end’);
};

在Node.js编程中，往往有大量的异步I/O操作，通过下面使用Co和Generator和不使用的对比，可以看出，使用Co 和Generator可以使程序的可维护性易读性大大提高。


git分支管理 以及多人协作规范化

通常我们用git就是用add commit push pull clone这几个命令，分支也千古不变地用master，并且一般也就是自嗨一下，给自己的仓库提交，然后多人协作起来有的时候就只靠U盘或者QQ文件传送。。。最近在写招新网站，合PC还有移动端的时候就深刻体会到不会用git 多人协作的严重弊端，这里就简单讲一下：
总体上来讲，git多人协作的分支应该大致像下面的图这样：

0.png

一般有这么几个规范：

1.master分支是主分支，一般只通过合并dev或者其他开发分支来前进，一般主分支上不要直接commit
2.dev分支，用来开发。一般开发某一功能，或者某个人的工作，都从dev分支上再引feature或者是个人分支，在这个功能完成前，或者某个人的工作完成前，他都在自己的feature分支上commit，这样不会影响到其功能的开发和他人的工作，然后每个feature或者某个人的阶段任务完成后，就把feature分支合并到的dev分支上
3.release分支：当一些功能都开发完合并到dev分支上之后，可以发布一个新版本时，就从dev分支上fork出release分支，用于发布循环，之后的新功能就不应该再加入到这个分支上，这个分支只应做当前发布版本的bug修复
4.hotfix分支：用于紧急修复bug。当代码出现问题，或者需要临时更改一些资源的时候，就要用到hotfix分支。修改完之后，将hotfix合并到master和dev分支上.

相关教程可以参考：
廖雪峰的官方网站 分支管理策略
廖雪峰的官方网站 bug分支
廖雪峰的官方网站 Feature分支
廖雪峰的官方网站 多人协作

然后是介绍一个管理git分支的工具——git flow

下去之后，我也用了用，简单在这里说一下吧。

安装git flow:

Mac OS X:

$ brew install git-flow-avh

Linux

$ apt-get install git-flow

使用 git-flow，从初始化一个现有的 git 库内开始

下面通过我写的一个txt文件讲解一下git flow 怎么用！

git flow init

然后会问几个分支命名的问题，一般使用默认值就好，如下图

QQ20160919-0@2x.png

然后就开始开发新功能了，现在假如有成员A要开发feature1功能，
那么他就可以通过下面的命令，创建并切换到feature/feature1分支下。

**$ git flow feature start feature1**

QQ20160919-1@2x.png

然后feature开发完了，可以像下面这样

git flow feature finish feature1

这个命令会：

• 合并 MYFEATURE 分支到 'develop'
• 删除这个新特性分支
• 切换回 'develop' 分支

然后就可以向远程仓库push了，如果发生冲突，和平时发生冲突的处理方式一样先pull再push。

如果是两个人合作开发一个feature，那么可以通过下面的命令发布feature到远程服务器，所以，其它用户也可以使用这分支。

git flow feature publish feature3

其他人可以通过如下命令，取得其它用户发布的新特性分支，并签出远程的变更。

git flow feature pull origin feature3

关于release版本，和紧急修复，由于时间问题，这里就不细讲了，可以到git flow网站上，看相关的介绍。
关于git分支管理和多人协作，有很多这方面的介绍，从事任何开发的开发者都有必要学习一下，如何利用好git，而不是只用到那五个命令。

其他

1.慕课网课程分享——React实战--打造画廊应用（上）& React实践图片画廊应用（下）

2. project generator ---- Yeoman
3. Webpack傻瓜式指南（一）
4. Webpack傻瓜式指南（二）
   5.抓包工具 ---- Fiddler