ES6 笔记二

ES6 笔记一

思维导图

1. 函数

1.1 函数参数默认值

• 基本用法

  function log(x, y='Worlds'){
      console.log(x,y)
  }
  log('Hello'); // Hello, World
  
  function Poin(x=0,y=0){
      this.x = x;
      this.y = y;
  }
  
  var p = new Point();
  p // {x:0, y:0}

  参数变量是默认声明的，不能用 let const 再次声明

  function foo(x = 1){
      let x = 2; // error
      const x = 3; // error
  }

• 与解构赋值默认值结合使用

  function fetch(url, {method='GET'}={}){
      console.log(method)
  }
  fetch('/index.html') // 'GET'
  
  function m({x=0,y=0}={}){
      console.log([x,y])
  }
  
  m() // [0,0]
  m({x:1, y:2}) // [1,2]
  m({x:3}) // [3,0]
  m({}) // [0,0]
  m({xx:1}) // [0,0]

• 参数默认值位置

  通常把函数的尾参数作为有默认值的参数。因为这样比较容易看出到底忽略那些参数。

  function f(x,y=1,z){
      console.log([x,y,z])
  }
  
  f() // [undefined, 1, undefined]
  f(1) // [1, 1, undefined]
  f(1,,2) // 出错
  f(1,undefined,3) // [1, 1, 3]

  上面的函数，有默认值的参数不是尾参数，因此无法省略该参数而不省略其后的参数，除非显式的输入 undefined

• 函数length属性

  指定了默认值后函数的 length 属性将返回没有指定默认值的参数个数

  (function(a){}).length // 1
  (function(a,b,c=1){}).length //2

  PS: rest参数不会计入 length 属性

• 作用域

  如果参数默认值是一个变量，则该变量所处的作用域与其它变量的作用域规则是一样的，即先是当前函数的作用域，然后才是全局作用域。

  var x = 1;
  function f(x, y=x){
      console.log(y)
  }
  f(2)  // 2

  由于函数作用域内部的变量 x 已经生成所以 y 等于参数 x 而不是全局变量x。

  let x = 1;
  function f(y=x){
      let x= 2;
      console.log(y)
  }
  f() // 1

  上述代码函数调用时 y 的默认值变量 x 尚未在函数内部生成，所以 x 指向全局变量。

  如果函数A的默认值是函数B
  那么由于函数的作用域是其声明时的作用域，函数B的作用域就不是函数A，而是全局作用域。如下：

  let foo = 'outer';
  
  function bar(func = x => foo){
      let foo = 'inner';
      console.log(func());
  }
  bar(); // outer

  上述代码等同于

  let foo = 'outer';
  let f = x => foo;
  
  function bar(func = f) {
    let foo = 'inner';
    console.log(func()); 
  }
  bar(); // outer

  关于babel的一个bug

• 应用

  可指定函数某一个参数不得省略，省略就会抛出错误

  function throwIfMissing() {
    throw new Error('Missing parameter');
  }
  
  function foo(mustBeProvided = throwIfMissing()) {
    return mustBeProvided;
  }
  
  foo()
  // Error: Missing parameter

  上述代码可知参数 mustBeProvided 的默认值等于 throwIfMissing 函数的运行结果。这说明函数参数的默认值不是在定义时执行，而是在运行时执行。

  如果把函数参数默认值设置为 undefined 则表示这个参数是可以省略的。

1.2 rest 参数

rest参数("...变量名"),用于获取函数的多余参数。rest参数搭配的变量是一个数组，该变量将多余的参数放入其中。

function push(array, ...items){
    items.forEach(item => {
        array.push(item);
    })
}
var a = [];
push(a,1,2,3)

rest 参数只能作为最后一参数。

函数的 length 属性不包括 rest 参数。

(function(...a){}).length // 0
(function(a, ...b){}).length // 1

1.3 扩展运算符

• 含义

  扩展运算符(spread)是三个点(...)。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。

  console.log(...[1,2,3])
  // 1 2 3
  
  console.log(1, ...[2,3,4], 5)
  // 1 2 3 4 5

  该运算符主要用于函数的调用

  function add(x,y){
      console.log(x+y);
  }
  var arr = [1,10];
  add(...arr); // 11  ...运算符把arr数组变为参数序列

• 替代数组的 apply 方法

  由于扩展运算符可以展开数组，所以不需要apply将数组转为函数的参数了。

  // ES5
  function f(x,y,z){}
  var args = [1,2,3];
  f.apply(null, args)

  // ES6
  function f(x,y,z){}
  var args = [1,2,3];
  f(...args)

  • 使用 Math.max 求数组最大元素

    // ES5
    Math.max.apply(null, [1,2,3,4])

    // ES6
    Math.max(null, ...[1,2,3,4])

  • 通过 push 将一个数组添加到另一数组尾部

    // ES5
    var arr1 = [0,1,2];
    var arr2 = [3,4,5];
    Array.prototype.push.apply(arr1,arr2)

    // ES6
    var arr1 = [0,1,2];
    var arr2 = [3,4,5];
    arr1.push(...arr2)

• 扩展运算符的应用

  1. 合并数组

     //ES5
     [1,2].concat(more);
     arr1.concat(arr2,arr3)
     
     //ES6
     [1,2, ...more]
     [...arr1, ...arr2, ...arr3)

  2. 与解构赋值结合生成数组

     // ES5
     a = list[0], rest = list.slice(1)
     // ES6
     [a, ...rest] = list
     
     const [first, ...rest] = [1, 2, 3, 4, 5];
     first // 1
     rest  // [2, 3, 4, 5]
     
     const [first, ...rest] = [];
     first // undefined
     rest  // []:
     
     const [first, ...rest] = ["foo"];
     first  // "foo"
     rest   // []

     如果将扩展运算符用于数组赋值，只能放在参数的最后一位

  3. 字符串
     将字符串转为真正的数组

     [...'hello']
     // [ "h", "e", "l", "l", "o" ]

     还有一个好处是 能够正确识别32位的Unicode字符

     其中Unicode字符如: 'x\uD83D\uDE80y' 也就是 "x🚀y"

     'x\uD83D\uDE80y'.length // 4
     [...'x\uD83D\uDE80y'].length // 3

     JavaScript会将32位Unicode字符，识别为2个字符，采用扩展运算符就没有这个问题。因此可以这样来写：

     function length(str) {
       return [...str].length;
     }
     
     length('x\uD83D\uDE80y') // 3

     凡是涉及到操作32位Unicode字符的函数，都有这个问题。因此，最好都用扩展运算符改写。

     let str = 'x\uD83D\uDE80y';
     
     str.split('').reverse().join('')
     // 'y\uDE80\uD83Dx'
     
     [...str].reverse().join('')
     // 'y\uD83D\uDE80x'

  • 类似数组的对象

    任何类似数组的对象都可以用扩展运算符转为真正的数组

    [...document.quertSelectorAll('div')];
    // [<div>, <div>, <div>]

  • Map和Set结构，Generator函数

    扩展运算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对象，都可以使用扩展运算符。

    let map = new Map([
          [1, 'one'],
          [2, 'two'],
          [3, 'three'],
        ]);
    
    let arr = [...map.keys()]; // [1, 2, 3]

    Generator函数运行后，返回一个遍历器对象，因此也可以使用扩展运算符。

1.4 name 属性

name属性返回该函数的函数名

匿名函数：

var fn = function(){}

//ES5
fn.name // ""

//ES6
fn.name // fn

Function构造函数返回的函数实例，name属性的值为“anonymous”。

(new Function).name // "anonymous"

bind返回的函数，name属性值会加上“bound ”前缀。

function foo() {};
foo.bind({}).name // "bound foo"

(function(){}).bind({}).name // "bound "

1.4 箭头函数

• 基本用法

  var f = v => v;
  
  var f = function(v){
      return v;
  }

  由于大括号被解释为代码块，所以如果箭头函数要返回一个对象，必须在对象外面加上括号。

  var getTempItem = id => ({ id: id, name: "Temp" });

  与解构赋值一起使用：

  const full = ({first, last}) => first + ',' + last;
  //等同于
  function full(person){
      return person.first + person.last;
  }

  简化回调函数：

  [1,2,3,4].map(x => x * x);
  //等同于
  [1,2,3,4].map(function(x){
      return x * x;
  });
  
  var result = values.sort((a,b) => a-b);
  //等同于
  var result = values.sort(function(a,b){
      return a - b;
  })

  结合rest参数使用

  const numbers = (...nums) => nums;
  numbers(1,2,3,4,5)
  // [1,2,3,4,5]
  
  
  headAndTail(1, 2, 3, 4, 5);
  // [1,[2,3,4,5]]

• 注意点

  1. 函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象
  2. 不可以当做构造函数。也就是不可使用new命令，否则会抛出一个错误。
  3. 不可以使用arguments对象，该对象在函数体内不存在。如果用，可以用rest参数代替。
  4. 不可以适用于 yeild 命令，因此箭头函数不可以用于 Generator 函数。

  第一条尤其重要。this对象的指向是可变的，但是在箭头函数内部是固定的。

  function foo(){
      setTimeout(() => {
          console.log("id:" + this.id)
      },1000)
  }
  foo.call({id:11})
  
  //转为ES5代码
  function foo() {
      var _this = this;
      setTimeout(function () {
          console.log("id:" + _this.id);
      }, 1000);
  }

  如果是个普通函数，执行的this应该指向 window 对象，但是箭头函数导致this对象总是指向函数所在的对象。

  再比如：

  function Timer(){
      this.seconds = 0;
      setInterval(()=>this.seconds++,1000)
  }
  
  var t = new Timer();
  setTimeout(()=>console.log(t.seconds), 3100);
  
  // 3

  Timer函数内的 setInterval 调用了 this.seconds 属性，通过箭头函数让this总是指向Timer的实例对象。否则输出0 而不是3.

  this 指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正因为没有this，所以不能用作构造函数。

  除了this，arguments super new.target 这三个变量在箭头函数中也是不存在的，分别指向外层函数对应的变量。

  function foo() {
    setTimeout(() => {
      console.log('args:', arguments);
    }, 100);
  }
  
  foo(2, 4, 6, 8)
  // args: [2, 4, 6, 8]

  箭头函数内部的变量 arguments 其实是函数 foo 的 arguments 变量。

  由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

  (function() {
    return [
      (() => this.x).bind({ x: 'inner' })()
    ];
  }).call({ x: 'outer' });
  
  // outer

  上面的代码中箭头函数没有自己的 this，所以 bind 无效，内部的 this 指向外部的 this。

• 函数绑定

  ES7提出了『函数绑定』运算符用来取代 call apply bind 调用。

  函数绑定运算符是并排的双冒号 :: ，昨天冒号绑定一个对象，右边是一个函数。会自动将左边的对象作为上下文环境(this对象)绑定到右边的函数上。

  foo::bar;
  bar.bind(foo);
  
  foo::bar(...arguments);
  bar.apply(foo, arguments);
  
  var foo = {ss: 112}
  var bar = function(){console.log(this.ss)};
  foo::bar(); // 112

  双冒号运算符返回的还是原对象，因此可以采用链式写法

  let { find, html } = jake;
  
  document.querySelectorAll("div.classA")
  ::find("p")
  ::html("this is p");

洗牌算法(shuffle)的js实现

Fisher-Yates

先看最经典的 Fisher-Yates 的洗牌算法

这里有一个该算法的可视化实现

其算法**就是 从原始数组中随机抽取一个新的元素到新数组中

1. 从还没处理的数组（假如还剩n个）中，产生一个[0, n]之间的随机数 random
2. 从剩下的n个元素中把第 random 个元素取出到新数组中
3. 删除原数组第random个元素
4. 重复第 2 3 步直到所有元素取完
5. 最终返回一个新的打乱的数组

按步骤一步一步来就很简单的实现

function shuffle(arr){
    var result = [],
        random;
    while(arr.length>0){
        random = Math.floor(Math.random() * arr.length);
        result.push(arr[random])
        arr.splice(random, 1)
    }
    return result;
}

这种算法要去除原数组 arr 中的元素，所以时间复杂度为 O(n2)

Knuth-Durstenfeld Shuffle

Fisher-Yates 洗牌算法的一个变种是 Knuth Shuffle

每次从未处理的数组中随机取一个元素，然后把该元素放到数组的尾部，即数组的尾部放的就是已经处理过的元素，这是一种原地打乱的算法，每个元素随机概率也相等，时间复杂度从 Fisher 算法的 O(n2)提升到了 O(n)

1. 选取数组(长度n)中最后一个元素(arr[length-1])，将其与n个元素中的任意一个交换，此时最后一个元素已经确定
2. 选取倒数第二个元素(arr[length-2])，将其与n-1个元素中的任意一个交换
3. 重复第 1 2 步，直到剩下1个元素为止

function shuffle(arr){
    var length = arr.length,
        temp,
        random;
    while(0 != length){
        random = Math.floor(Math.random() * length)
        length--;
        // swap
        temp = arr[length];
        arr[length] = arr[random];
        arr[random] = temp;
    }
    return arr;
}

Durstenfeld Shuffle的算法是从数组第一个开始，和Knuth的区别是遍历的方向不同

Other

Array.sort()

利用Array的sort方法可以更简洁的实现打乱，对于数量小的数组来说足够。因为随着数组元素增加，随机性会变差。

[1,2,3,4,5,6].sort(function(){
    return .5 - Math.random();
})

ES6

Knuth-Durstenfeld shuffle 的 ES6 实现，代码更简洁

function shuffle(arr){
    let n = arr.length, random;
    while(0!=n){
        random =  (Math.random() * n--) >>> 0; // 无符号右移位运算符向下取整
        [arr[n], arr[random]] = [arr[random], arr[n]] // ES6的结构赋值实现变量互换
    }
    return arr;
}

Node.js 事件循环一: 浅析

理解事件循环系列第一步 浅析和总览

多数的网站不需要大量计算，程序花费的时间主要集中在磁盘 I/O 和网络 I/O 上面

SSD读取很快，但和CPU处理指令的速度比起来也不在一个数量级上，而且网络上一个数据包来回的时间更慢：

一个数据包来回的延迟平均320ms(我网速慢，ping国内网站会更快)，这段时间内一个普通 cpu 执行几千万个周期应该没问题

因此异步IO就要发挥作用了，比如用多线程，如果用 Java 去读一个文件，这是一个阻塞的操作，在等待数据返回的过程中什么也干不了，因此就开一个新的线程来处理文件读取，读取操作结束后再去通知主线程。

这样虽然行得通，但是代码写起来比较麻烦。像 Node.js V8 这种无法开一个线程的怎么办？

先看下面函数执行过程

栈 Stack

当我们调用一个函数，它的地址、参数、局部变量都会压入到一个 stack 中

function fire() {
    const result = sumSqrt(3, 4)
    console.log(result);
}
function sumSqrt(x, y) {
    const s1 = square(x)
    const s2 = square(y)
    const sum = s1 + s2;
    return Math.sqrt(sum)
}
function square(x) {
    return x * x;
}

fire()

下面的图都是用 keynote 做的 keynote地址

函数 fire 首先被调用

fire 调用 sumSqrt 函数 参数为3和4

之后调用 square 参数为 x, x==3

当 square 执行结束返回时，从 stack 中弹出，并将返回值赋值给 s1
s1加入到 sumSqrt 的 stack frame 中

以同样的方式调用下一个 square 函数

在下一行的表达式中计算出 s1+s2 并赋值给 sum

之后调用 Math.sqrt 参数为sum

现在就剩下 sumSqrt 函数返回计算结果了

返回值赋值给 result

在 console 中打印出 result

最终 fire 没有任何返回值 从stack中弹出 stack也清空了

当函数执行完毕后本地变量会从 stack 中弹出，这只有在使用 numbers string boolean 这种基本数据类型时才会发生。而对象、数组的值是存在于 heap(堆) 中的，stack 只存放了他们对应的指针。

当函数之行结束从 stack 中弹出来时，只有对象的指针被弹出，而真正的值依然存在 heap 中，然后由垃圾回收器自动的清理回收。

事件循环

通过一个例子来了解函数的执行顺序

'use strict'

const express = require('express')
const superagent = require('superagent')
const app = express()

app.get('/', getArticle)

function getArticle(req, res) {
    fetchArticle(req, res)
    print()
}

const aids = [4564824, 4506868, 4767667, 4856099, 7456996];

function fetchArticle(req, res) {
    const aid = aids[Math.floor(Math.random() * aids.length)]
    superagent.get(`http://news-at.zhihu.com/api/4/news/${aid}`)
        .end((err, res) => {
            if(err) {
                console.log('error ......');
                return res.status(500).send('an error ......')
            }
            const article = res.body
            res.send(article)
            console.log('Got an article')
        })

    console.log('Now is fetching an article')
}

function print(){
    console.log('Print something')
}


app.listen('5000')

请求 http://localhost:5000/ 后打印出

Now is fetching an article

Print something

Got an article

虽然 V8 是单线程的，但底层的 C++ API 却不是。这意味着当我们执行一些非阻塞的操作，Node会调用一些代码，与引擎里的js代码同时执行。一旦这个隐藏的线程收到了等待的返回值或者抛出一个异常，之前提供的回调函数就会执行。

上面的说的Node调用的一些代码其实就是 libuv，一个开源的跨平台的异步 I/O 。最初就是为 Node.js 开发的，现在很多项目都在用

任务队列

javascript 是单线程事件驱动的语言，那我们可以给时间添加监听器，当事件触发时，监听器就能执行回调函数。

当我们去调用 setTimeout http.get fs.readFile, Node.js 会把这些定时器、http、IO操作发送给另一个线程以保证V8继续执行我们的代码。

然而我们只有一个主线程和一个 call-stack ，这样当一个读取文件的操作还在执行时，有一个网络请求request过来，那这时他的回调就需要等stack变空才能执行。

回调函数正在等待轮到自己执行所排的队就被称为任务队列(或者事件队列、消息队列)。每当主线程完成前一个任务，回调函数就会在一个无限循环圈里被调用，因此这个圈被称为事件循环。

我们前面那个获取文章的例子的执行顺序就会如下：

1. express 给 request 事件注册了一个 handler，并且当请求到达路径 '/' 时来触发handler
2. 调过各个函数并且在端口 5000 上启动监听
3. stack 为空，等待 request 事件触发
4. 根据传入的请求，事件触发，express 调用之前提供的函数 getArticle
5. getArticle 压入(push) stack
6. fetchArticle 被调用 同时压入 stack
7. Math.floor 和 Math.random 被调用压入 stack 然后再 弹出(pop), 从 aids 里面取出的一个值被赋值给变量 aid
8. superagent.get 被执行，参数为 'http://news-at.zhihu.com/api/4/news/${aid}' ,并且回调函数注册给了 end 事件
9. 到 http://news-at.zhihu.com/api/4/news/${aid} 的HTTP请求被发送到后台线程，然后函数继续往下执行
10. 'Now is fetching an article' 打印在 console 中。 函数 fetchArticle 返回
11. print 函数被调用, 'Print something' 打印在 console 中
12. 函数 getArticle 返回，并从 stack 中弹出， stack 为空
13. 等待 http://news-at.zhihu.com/api/4/news/${aid} 发送相应信息
14. 响应信息到达，end 事件被触发
15. 注册给 end 事件的匿名回调函数被执行，这个匿名函数和他闭包中的所有变量压入 stack，这意味着这个匿名函数可以访问并修改 express, superagent, app, aids, req, res, aid 的值以及之前所有已经定义的函数
16. 函数 res.send() 伴随着 200 或 500 的状态码被执行，但同时又被放入到后台线程中，因此 响应流 不会阻塞我们函数的执行。匿名函数也被 pop 出 stack。

Microtasks Macrotasks

任务队列不止一个，还有 microtasks 和 macrotasks

microtasks:

• process.nextTick
• promise
• Object.observe

macrotasks:

• setTimeout
• setInterval
• setImmediate
• I/O

这两个的详细区别下一篇再写，先看一段代码

console.log('start')

const interval = setInterval(() => {  
  console.log('setInterval')
}, 0)

setTimeout(() => {  
  console.log('setTimeout 1')
  Promise.resolve()
      .then(() => {
        console.log('promise 3')
      })
      .then(() => {
        console.log('promise 4')
      })
      .then(() => {
        setTimeout(() => {
          console.log('setTimeout 2')
          Promise.resolve()
              .then(() => {
                console.log('promise 5')
              })
              .then(() => {
                console.log('promise 6')
              })
              .then(() => {
                clearInterval(interval)
              })
        }, 0)
      })
}, 0)

Promise.resolve()
    .then(() => {  
        console.log('promise 1')
    })
    .then(() => {
        console.log('promise 2')
    })

理解了node的事件循环还是比较容易得出答案的：

start
promise 1
promise 2
setInterval
setTimeout 1
promise 3
promise 4
setInterval
setTimeout 2
promise 5
promise 6

根据 WHATVG 的说明，在一个事件循环的周期(cycle)中一个 (macro)task 应该从 macrotask 队列开始执行。当这个 macrotask 结束后，所有的 microtasks 将在同一个 cycle 中执行。在 microtasks 执行时还可以加入更多的 microtask，然后一个一个的执行，直到 microtask 队列清空。

规范理解起来有点晦涩，来看下上面的例子

Cycle 1

1) setInterval 被列为 task

2) setTimeout 1 被列为 task

3) Promise.resolve 1 中两个 then 被列为 microtask

4) stack 清空 microtasks 执行

任务队列： setInterval setTimeout 1

Cycle 2

5) microtasks 队列清空 setInteval 的回调可以执行。另一个 setInterval 被列为 task , 位于 setTimeout 1 后面

任务队列： setTimeout 1 setInterval

Cycle 3

6) microtask 队列清空，setTimeout 1 的回调可以执行，promise 3 和 promise 4 被列为 microtasks

7) promise 3 和 promise 4 执行。 setTimeout 2 被列为 task

任务队列 setInterval setTimeout 2

Cycle 4

8) microtask 队列清空 setInteval 的回调可以执行。然后另一个 setInterval 被列为 task ，位于 setTimeout 2 后面

任务队列： setTimeout 2 setInterval

9) setTimeout 2 的回调执行， promise 5 和 promise 6 被列为 microtasks

现在 promise 5 和 promise 6 的回调应该执行，并且 clear 掉 interval。 但有的时候不知道为什么 setInterval 还会在执行一遍，变成下面结果

...
setTimeout 2
setInterval
promise 5
promise 6

但是把上面的代码放入 chrome console 中执行却没有问题。这一点还要再根据不同的 node版本 查一下。

Last

这篇只是对 事件循环 的浅析和总览，后面再继续深入的研究。

ES6 笔记三 - Promise

一个稍微复杂点的例子**https://github.com/ccforward/cc/blob/master/promise/example-new.js**

_ES6规范确认以前，写过一个Promise的简单实现_

Promise就是一个容器，里面保存着某个未来才会结束的事件(一个异步操作)的结果。作为一个对象，从Promise可以获取异步操作的消息。

两个特点

1. 对象的状态不受外界影响。
   Promise对象代表一个异步操作，有三种状态：Pending(进行中) Resolved(已完成 Fullfilled) Rejected(已失败)。
   只有异步操作的结果，可以决定当前是哪一种状态，任何操作都无法改变这个状态。
2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。
   Promise的状态改变只有两种可能：Pending -> Resolved 或者 Pending -> Rejected。
   只要两种情况发生，状态就固定不会改变了，会一直保持这个结果。

通过Promise对象就可以将异步操作以同步操作的流程表达出来，避免嵌套层层回调的地狱。

缺点

• 无法取消Promise，一旦新建它就会立即执行，无法中途取消
• 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
• 当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

用 Promise 对象实现一个Ajax

var getJSON = function(url){
    var promise = new Promise(function(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onreadystatechange = hanlder;
        xhr.responseType = 'json';
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.send();

        function hanlder(){
            if(this.readyState !== 4){
                return;
            }
            if(this.status == 200){
                resolve(this.response);
            } else {
                reject(new Error(this.statusText));
        }
    });

    return promise;
}

如果调用 resolve 或者 reject 函数时带有参数，那么这些参数会传递给回调函数。 reject的参数通常是 Error 对象的实例，表示跑出的错误。

Promise.prototype.then

then 方法是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是 Resolved 状态的回调函数，第二个参数（可选）是 Rejected 状态的回调函数。

then方法返回的是一个新的Promise实例（不是原来那个），可采用链式写法。如下：

getJSON("a.json").then(function(res){
    return getJSON(res.dataURL)
}).then(function fnA(data){
        console.log('Resolved: ' + data);
    }, function fnB(err){
        console.log('Rejected: ' + err);
});

第一个then方法指定的回调函数返回的是一个新的 Promise 对象。这时，第二个then方法指定的回调函数就等待这个新的 Promise 对象发生变化来调用A或B函数

上面的代码改为箭头函数更简洁：

getJSON("a.json").then(
    res => getJSON(res.dataURL)
).then(
    data => console.log('Resolved: ' + data),
    err => console.log('Rejected: ' + err)
);

Promise.prototype.catch

Promise.prototype.catch 是 .then(null, rejection) 的别名。

如果异步操作抛出错误，状态就会变为 Rejected, 就会调用catch方法指定的回调函数处理这个错误。

一般来说，不要再then方法中定义 Rejected 状态的回调函数(then的第二个参数)，而应该总是使用 catch 方法。

//bad
promise
    .then(function(data){
        // success
    },function(err){
        // error
    })

// good
promise
    .then(function(data){ //回调函数
        // success
    })
    .catch(function(err){
        // error
    })

跟传统的 try/catch 不同，如果没有使用catch方法指定错误处理的回调函数， Promise对象抛出的错误不会传递到外层代码，即不会有任何反应。

catch 返回的还是一个 Promise 对象，因此后面可以继续调用 then 方法。

var someAsync = function(){
    return new Promise(function(resolve, reject){
        // x没声明 报错 
        resolve(x+2);
    });
}

comAsync()
.catch(function(err){
    console.log('error: ' + err)
})
.then(function(){
    console.log('go on')
});

// error: [ReferenceError: x is not defined]
// go on  接着运行then方法

Promise.all()

Promise.all 用于将多个 Promise 实例包装成一个新的 Promise 实例。

var p = Promise.all([p1, p2, p3]);

p的状态由 p1 p2 p3 决定

1. 只有 p1 p2 p3 都为 Fullfilled p的状态才会是 Fullfilled。p1 p2 p3的返回值组成一个数组传递给p的回调函数。
2. 如果 p1 p2 p3 有一个为 Rejected 则 p 的状态为 Rejected。此时第一个被 Rejected 的实例的返回值会传递给p的回调函数。

Promise.race()

Promise.race 也是将多个 Promise 实例包装成一个新的 Promise 实例。

var p = Promise.race([p1, p2, p3]);

只要 p1 p2 p3 中有一个实例率先改变状态，p的状态就跟着改变

var p = Promise.race([
  fetch('/data.json'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
])
p.then(response => console.log(response))
p.catch(error => console.log(error))

如果5秒之内fetch方法无法返回结果，变量p的状态就会变为rejected，从而触发catch方法指定的回调函数。

Promise.resolve()

Promise.resolve方法将现有对象转为Promise对象。

Promise.resolve($.ajax('/whatever.json'));

把 jQuery 生成的 deferred 对象转为新的 Promise 对象

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

如果resolve方法的参数是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为Resolved。

var p = Promise.resolve('Hello');

p.then(function (s){
  console.log(s)
});

字符串Hello不属于异步操作（判断方法是它不是具有then方法的对象），返回Promise实例的状态从一生成就是Resolved，所以回调函数会立即执行。

Promise.resolve方法允许调用时不带参数,直接调用Promise.resolve可以获得一个 Promise 对象。

var p = Promise.resolve();

p.then(function () {
  // ...
});

Promise.reject()

Promise.reject() 方法也会返回一个新的Promise实例，且状态为rejected。

它的参数用法与Promise.resolve方法完全一致。

var p = Promise.reject('出错了');
// 等同于
var p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s){
  console.log(s)
});
// 出错了

附加方法

Promise.prototype.done = function (onFulfilled, onRejected) {
  this.then(onFulfilled, onRejected)
    .catch(function (reason) {
      // 抛出一个全局错误
      setTimeout(() => { throw reason }, 0);
    });
};

Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};

HTTP/2 + Node.js

HTTP/2是基于Google的SPDY协议为基础开发的新的web协议。HTTP/2算是从1991年以来HTTP的第一次重大升级。

Yahoo 旗下的 Flickr 貌似在2016年7月开始用上了HTTP2，如图

虽然 HTTP/2 是基于 SPDY 协议开发的，但是两者还是有不同点的：

1. HTTP/2支持明文的HTTP传输，但是SPDY强制要求使用HTTPS
2. HTTP/2 消息头的压缩算法采用 HPACK，而非 SPDY 采用的 DEFLATE

HTTP2的优势：

• 多路复用：在一个TCP连接中将所有请求并发完成。
• 服务端推送：服务端可以在客户端确认需要资源(js css)之前把资源推送到客户端，而不是客户端解析了HTML之后再做请求
• 数据流优先(Stream priority)：HTTP/2采用二进制格式传输数据，而不是HTTP/1.x的那种文本格式。
• 报头压缩：HTTP/2对报头采用 HPACK 算法进行压缩后传输，节省流量。
• 强制加密：虽然加密不是强制的，但是多数浏览器都是通过TLS(HTTPS)实现的HTTP/2

因为我们基于node实现的h2用的是spdy模块，所以必须建立在https的基础上，先生成自签名的证书

$ mkdir h2-node
$ cd h2-node
$ openssl genrsa -des3 -passout pass:x -out server.pass.key 2048 
$ openssl rsa -passin pass:x -in server.pass.key -out server.key
$ openssl req -new -key server.key -out server.csr
# ...
# 输入证书相关信息（随意填写）
# ...
$ openssl x509 -req -sha256 -days 365 -in server.csr -signkey server.key -out server.crt
$ rm server.pass.key

初始化 package.json 文件并添加 spdy 和 express 模块

npm init
npm i express spdy --save

新建一个 index.js 文件作为应用入口

const spdy = require('spdy');
const express = require('express');
const path = require('path');
const fs = require('fs');

添加 express 并配置路由

const port = 3000;
const app = express();

app.get('*', (req, res) => {
    res
      .status(200)
      .json({error: 0, msg: "http2 OK"});
})

加载https的证书

const options = {
    key: fs.readFileSync(__dirname + '/server.key'),
    cert:  fs.readFileSync(__dirname + '/server.crt')
}

最后 spdy创建服务器，并加载 ssl 配置和 express 实例

spdy
  .createServer(options, app)
  .listen(port, (error) => {
    if (error) {
      console.error(error)
      return process.exit(1)
    } else {
      console.log('Listening on port: ' + port + '.')
    }
  })

执行 node index.js 然后访问

因为浏览器默认情况下不信任自签名的证书，所以这里点击 继续前往localhost（不安全） 即可

代码地址: https://github.com/ccforward/cc/tree/master/h2-node

About HTML5 的 WebRTC

WebRTC是Web Real-Time Communication(网页实时通信)。WebRTC 包含有三个组件：

1. 访问用户摄像头及麦克风的 getUserMedia
2. 穿越 NAT 及防火墙建立视频会话的 PeerConnection
3. 在浏览器之间建立点对点数据通讯的 DataChannels

分别对应三个API接口：

1. Network Stream API 代表媒体数据流
2. RTCPeerConnection 一个RTCPeerConnection对象允许用户在两个浏览器之间直接通讯；
3. Peer-to-peer Data API 一个在两个节点之间的双向的数据通道

浏览器对 WebRTC 的支持

最新支持成都可在 caniuse.com 上查询

1. pc上浏览器的支持情况[pc浏览器对WebRTC的支持情况](http://gtms04.alicdn.com/tps/i4/TB1weeHGpXXXXcDXFXX0etz8VXX-1310-1090.png)
2. Andriod chrome浏览器从29版开始支持webRTC，但是默认关闭，如果不能正常使用webRTC，请在chrome://flags，开启webRTC[移动端的浏览器支持情况](http://gtms04.alicdn.com/tps/i4/TB1hGuVGpXXXXaiXpXX1mXeGVXX-1134-374.png)
3. iOS 还不支持,不过苹果很快会支持

WebRTC API

• MediaStream
  getUserMedia()与WebRTC相关，因为它是通向这组API的门户。它提供了访问用户本地相机/麦克风媒体流的手段。在移动设备上，目前只有andriod中webview内核为36或者大于36才支持(即只有andriod L或者更高版本)，ios设备暂时还不支持。
• 功能检测
  各家浏览器对getUserMedia支持不同，因此在使用该API之前需要检测用户浏览器是否支持getUserMedia

function hasGetUserMedia() {
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

• 请求权限
  浏览器出于安全考虑，在请求网络摄像头或麦克风时，会弹出信息栏，让用户选择授予还是拒绝对其相机/麦克风的访问权限。
• 使用方法
  getUserMedia()需要传递三个参数，第一个参数用于指定你要访问的媒体类型, 第二个参数是成功获取媒体数据流后的回调函数，第三个参数为获取媒体数据流失败的处理函数，相关API文档可以参考：getUserMedia

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.moZGetUserMedia || navigator.msGetUserMedia;
var video = document.querySelector('video');
navigator.getUserMedia({
    audio : true,
    video : true
    }, function (stream) {
            video.src = window.URL.creatObjectURL(stream);
    }, function (error) {
            console.log(error);
});

这样就可以通过video标签成功将视频流输出到页面上。

• 截取视频截图
  可以通过canvas的API: ctx.drawImage(video, 0, 0)将video的某一帧绘制到canvas上，再通过canvas的canvas.toDataURL('image/png')将canvas绘制的东西转为图片。

var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
navigator.getUserMedia({
     audio: true,
     video: true
}, function(stream) {
     video.src = window.URL.creatObjectURL(stream);
}, function(error) {
     console.log(error);
});
video.addEventListener('click', function() {
     ctx.drawImage(video, 0, 0);
     var img = new Image();
     img.src = canvas.toDataURL('image/png');
     document.appendChild(img);
}, false)

• 给图片添加滤镜
  canvas 可以获取每一个像素点得颜色值(包括red, green, blue, alpha四个值)，通过 canvas 的 API: ctx.getImageData() 获取到的所有像素点的颜色值，修改对应的像素值之后，可以通过 ctx.putImageData() 将像素点重新绘制到 canvas 中

var imgData = ctx.getImageData();
var filter = {
    // 灰度效果
    grayscale: function(pixels) {
        var d = pixels.data;

        for (var i = 0, len = d.length; i < len; i += 4) {
            var r = d[i],
                g = d[i + 1],
                b = d[i + 2];
            d[i] = d[i + 1] = d[i + 2] = (r + g + b) / 3;
        }

        return pixels;
    },

    // 复古效果
    sepia: function(pixels) {
        var d = pixels.data;

        for (var i = 0, len = d.length; i < len; i += 4) {
            var r = d[i],
                g = d[i + 1],
                b = d[i + 2];

            d[i] = (r * 0.393) + (g * 0.769) + (b * 0.189);
            d[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168);
            d[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131);
        }

        return pixels;
    },

    // 红色蒙版效果
    red: function(pixels) {
        var d = pixels.data;

        for (var i = 0, len = d.length; i < len; i += 4) {
            var r = d[i],
                g = d[i + 1],
                b = d[i + 2];

            d[i] = (r + g + b) / 3;
            d[i + 1] = d[i + 2] = 0;
        }

        return pixels;
    },

    // 反转效果
    invert: function(pixels) {
        var d = pixels.data;

        for (var i = 0, len = d.length; i < len; i += 4) {
            var r = d[i],
                g = d[i + 1],
                b = d[i + 2];

            d[i] = 255 - r;
            d[i + 1] = 255 - g;
            d[i + 2] = 255 - b;
        }
        return pixels;
    }
};
ctx.putImageData(filter[type](imgData));

• 音频处理
  navigator.getUserMedia()可以和web Audio API相结合,用来处理音频效果

var range = document.querySelector('input');
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
navigator.getUserMedia({
    audio: true
}, function(stream) {
    // 创建音频流
    var source = audioCtx.createMediaStreamSource(stream);
    // 双二阶滤波器
    var biquadFilter = audioCtx.createBiquadFilter();
    biquadFilter.type = 'lowshelf';
    biquadFilter.frequenc.value = 1000;
    biquadFilter.gain.value = range.value;

    source.connect(biquadFilter);
    biquadFilter.connect(audioCtx.destination);
}, function(error) {
    console.log(error);
});

RTCPeerConnection

RTCPeerConnection，用于peer跟peer之间呼叫和建立连接以便传输音视频数据流；

WebRTC是实现peer to peer的实时通信（可以两个或多个peer之间），在能够通信前peer跟peer之间必须建立连接，这是RTCPeerConnection的任务，为此需要借助一个信令服务器（signaling server）来进行，信令包括3种类型的信息：

• Session control messages: 初始化和关闭通信，及报告错误；
• Network configuration: 双方的IP地址和端口号（局域网内部IP地址需转换为外部的IP地址）；
• Media capabilities: 双方的浏览器支持使用何种codecs以及多高的视频分辨率。

var PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
navigator.getUserMedia = navigator.getUserMedia ? "getUserMedia" :
    navigator.mozGetUserMedia ? "mozGetUserMedia" :
    navigator.webkitGetUserMedia ? "webkitGetUserMedia" : "getUserMedia";
var v = document.createElement("video");

// 创建信令
var pc = new PeerConnection();
pc.addStream(video);
pc.createOffer(function(desc) {
    pc.setLocalDescription(desc, function() {
        // send the offer to a server that can negotiate with a remote client
    });
})

// 创建回复
var pc = new PeerConnection();
pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
    pc.createAnswer(function(answer) {
        pc.setLocalDescription(answer, function() {
            // send the answer to the remote connection
        });
    });
})

peer跟peer之间一旦建立连接就可以直接传输音视频数据流，并不需要借助第三方服务器中转。
具体文档可以查看：https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection。

RTCDataChannel

RTCDataChannel可以建立浏览器之间的点对点通讯。常用的通讯方式有webSocket, ajax和 Server Sent Events等方式，websocket虽然是双向通讯，但是无论是websocket还是ajax都是客户端和服务器之间的通讯，这就意味着你必须配置服务器才可以进行通讯。而RTCDATAChannel采用另外一种实现方式

• 它使用webRTC的另外一个API：RTCPeerConnection，RTCPeerConnection无需经过服务器就可以提供点对点之间的通讯，避免服务器这个中间件
• RTCDataChannel支持SCTP机制，SCTP实际上是一个面向连接的协议，但SCTP偶联的概念要比TCP的连接具有更广的概念，SCTP对TCP的缺陷进行了一些完善,使得信令传输具有更高的可靠性，SCTP的设计包括适当的拥塞控制、防止泛滥和伪装攻击、更优的实时性能和多归属性支持。

WebRTC并未规定使用何种信令机制和消息协议，象SIP、XMPP、XHR、WebSocket这些技术都可以用作WebRTC的信令通信。
除了信令服务器，peer跟peer建立连接还需要借助另一种服务器（称为STUN server）实现NAT/Firewall穿越，因为很多peer是处于私有局域网中，使用私有IP地址，必须转换为公有IP地址才能相互之间传输数据。这其中涉及到一些专业术语包括STUN、TURN、ICE等，其实我对这些概念也不是很理解。网上找到的WebRTC demo好象都用的是Google提供的STUN server。

参考文章：http://www.html5rocks.com/en/tutorials/webrtc/datachannels/?redirect_from_locale=zh
https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel

WebRTC的目的是为了简化基于浏览器的实时数据通信的开发工作量，但实际应用编程还是有点复杂，尤其调用RTCPeerConnection必须对如何建立连接、交换信令的流程和细节有较深入的理解。因此我们可以使用已经封装好的WebRTC库，这些WebRTC库对原生的webRTC的API进行进一步的封装，包装成更简单的API接口。同时屏蔽了不同浏览器之间的差异。
目前网上主要有两种WebRTC的封装库：

• WebRTC.io github地址为：https://github.com/webRTC/webRTC.io
• simpleWebRTC github地址为：https://github.com/HenrikJoreteg/SimpleWebRTC

最后是用WebRTC写的一个小demo：https://ccforward.github.io/demos/webrtc/index.html

关于 WebRTC 的相关文章推荐：http://www.html5rocks.com/en/tutorials/webrtc/basics/

这个思维导图是几年前改编自阮一峰老师的 博客文章，晚上翻文件找了出来。

感觉还是值得一看的。

如下：
原图地址

把页面的数据爬下来难道还是自己再重新拼接数据的嘛

Node.js的核心Feature

1. EventLoop 事件循环
2. global 和 process
3. EventEmitter 事件
4. Stream 和 Buffer
5. Cluster 集群
6. 异步Error
7. C++ 插件

Event Loop

事件循环算是Node的一个核心了，即使进程中不断有I/O调用也能处理其他任务。正因为阻塞I/O代价太高所以就凸显了Node的高效。

ps: keynote做的图，不会PS，太麻烦。。。

在 Python 这样来实现一个延迟处理

import time

print "Step 1"
print "Step 2"
time.sleep(2)
print "Step 3"

Node或JavaScript 通过异步回调的方式来实现

console.log('Step 1');
setTimeout(function () {
  console.log('Step 3');
}, 2000)
console.log('Step 2');

可以事件循环想象成一个for或while循环，只有在现在或将来没有任务要执行的时候才会停下来。

在等待I/O任务完成之前就可以做更多事情，事件循环因此让系统更加高效。

Node也让我们从死锁中解放，因为根本没有锁。

PS：我们仍然可以写出阻塞的代码

var start = Date.now();
for (var i = 1; i<1000000000; i++) {}
var end = Date.now();
console.log(end-start);

这次的阻塞在我的机器上花了3400多毫秒。不过我们多数情况下不会跑一个空循环。

而且fs模块提供了同步(阻塞)和异步(非阻塞)两套处理方法(区别于方法名后是否有Sync)

如下阻塞方式的代码:

var fs = require('fs');

var con1 = fs.readFileSync('1.txt','utf8');
console.log(con1);
console.log('read 1.txt');

var con2 = fs.readFileSync('2.txt','utf8');
console.log(con2);
console.log('read 2.txt');

结果就是

content1->read 1.txt->content2->read 2.txt

非阻塞方式的代码:

var fs = require('fs');

fs.readFile('1.txt','utf8', function(err, contents){
   console.log(contents);
});
console.log('read 1.txt');

fs.readFile('2.txt','utf8', function(err, contents){
   console.log(contents);
});
console.log("read 2.txt");

代码执行后因为要花时间执行 读 的操作，所以会在最后的回调函数中打印出文件内容。当读取操作结束后事件循环就会拿到内容

read 1.txt->read 2.txt->content1->content2

事件循环的概念对前端工程师比较好理解，关键就是异步、非阻塞I\O。

global

从浏览器端切换到Node端就会出现几个问题

• 全局变量如何创建(window对象已经没了)
• 从 CLI 输入的参数、系统信息、内存信息、版本信息等从哪获取

有一个 global 对象，顾名思义就是全局的，它的属性很多

• global.process 可获取版本信息、CLI 参数、内存使用(process.memoryUsage()这个函数很好用)
• global.__filename 当前脚本的文件名、路径
• global.__dirname 当前脚本绝对路径
• global.module 最常见的模块输出
• global.require() 模块引入
• global.console()、setInterval()、setTimeout() 这些浏览器端的方法也在global对象下面

在命令行里执行一次 global 一切就都懂了。

process

通过process对象获取和控制Node自身进程的各种信息。另外process是一个全局对象，在任何地方都可以直接使用。

部分属性

• process.pid 进程pid
• process.versions node、v8、ssl、zlib等组件的版本
• process.arch 系统架构，如:x64
• process.argv CLI参数
• process.env 环境变量

部分方法

• process.uptime() 正常运行的时长
• process.memoryUsage() 内存使用情况
• process.cwd() 当前目录
• process.exit() 退出进程
• process.on() 添加事件监听 比如：on('uncaughtException')

Events

Events == Node Observer Pattern

异步处理写多了就会出现callbackhell（回调地狱），还有人专门做了叫 callbackhell 的网站。

EventEmitter 就是可以触发任何可监听的事件，callbackhell可以通过事件监听和触发来避免。

用法

var events  = require('events');
var emitter = new events.EventEmitter();

添加事件监听和事件触发

emitter.on('eat', function() {
  console.log('eating...');
});

emitter.on('eat', function() {
  console.log('still eating...');
});

emitter.emit('eat');

假设我们有一个已经继承了 EventEmitter 的类，能每周、每天的处理邮件任务，而且这个类具有足够的可扩展性能够自定义最后的输出内容，换言之就是每个使用这个类的人都能够在任务结束时增加自定义的方法和函数。

如下图，我们继承了 EventEmitter 模块创建了一个Class: Job，然后通过事件监听器 done 来实现Job的自定义处理方式。

我们需要做的只是在进程结束的时候触发 done 事件：

// job.js
var util = require('util');
var Job = function() {
  var job = this;
  job.process = function() {
    job.emit('done', { completeTime: new Date() })
  }
}

util.inherits(Job, require('events').EventEmitter);
module.exports = Job;

我们的目的是在 Job 任务结束时执行自定义的函数方法，因此我们可以监听 done 事件然后添加回调：

var Job = require('./job.js')
var job = new Job()

job.on('done', function(data){
  console.log('Job completed at', data.completeTime)
  job.removeAllListeners()
})

job.process()

关于 emitter 还有这些常用方法

• emitter.listeners(eventName) 列出 eventName 的所有监听器
• emitter.once(eventName, listener) 只监听一次
• emitter.removeListener(eventName, listener) 删除监听器

stream 流

用Node处理比较大的数据时可能会出现些问题：

• 速度较慢
• 缓冲器只限制在1GB上等，
• 数据连续不断的时如何何操作

用Stream就会解决。因为Node的 Stream 是对连续数据进行分块后的一个抽象，也就是不需要等待资源完全加载后再操作。

标准Buffer的处理方式：

只有整个Buffer加载完后才能进行下一步操作，看图对比下Node的Stream，只要拿到数据的第一个 chunk 就可以进行处理了

Node中有四种数据流：

1. Readable 读
2. Writable 写
3. Duplex 读&写
4. Transform 数据转换

Stream在Node中很常见：

• HTTP 的 request response
• 标准 I/O
• 文件读写

Readable Stream

process.stdin 是一个标准输入流，数据一般来自于键盘输入，用它来实现一个可读流的例子。

我们使用 data 和 end 事件从 stdin 中读取数据。其中 data 事件的回调函数的参数就是 chunk 。

process.stdin.resume()
process.stdin.setEncoding('utf8')

process.stdin.on('data', function (chunk) {
  console.log('chunk: ', chunk)
})

process.stdin.on('end', function () {
  console.log('--- END ---')
})

PS: stdin 默认是处于pause状态的，要想读取数据首先要将其 resume()

可读流还有一个 同步 的 read() 方法，当流读取完后会返回 chunk或null ，课这样来用：

var readable = getReadableStreamMethod()
readable.on('readable', () => {
  var chunk
  while (null !== (chunk = readable.read())) {
    console.log('got %d bytes of data', chunk.length)
  }
})

我们在Node中要尽可能写异步代码避免阻塞线程，不过好在 chunk 都很小所以不用担心同步的 read() 方法把线程阻塞

Writable Stream

我们用 process.stdin 对应的 process.stdout 方法来实现个例子

process.stdout.write('this is stdout data');

把数据写入标准输出后是在命令行中可见的，就像用 console.log()

Pipe

就像自来水要有自来水管一样，Stream 需要传送 也需要 Pipe。

下面的代码就是从文件中读数据，然后GZip压缩，再把数据写入文件

const r = fs.createReadStream('file.txt')
const z = zlib.createGzip()
const w = fs.createWriteStream('file.txt.gz')
r.pipe(z).pipe(w)

readable.pipe() 方法从可读流中拉取所有数据，并写入到目标流中，同时返回目标流，因此可以链式调用(也可以叫导流链)。
PS:该方法能自动控制流量以避免目标流被快速读取的可读流所淹没。

HTTP 流

web应用最常见了，HTTP 流用的也最多。

request 和 response 是继承自Event Emitter的可读可写流。下面的代码在各种教程中就很常见了：

const http = require('http')
var server = http.createServer( (req, res) => {
  var body = '';
  req.setEncoding('utf8');
  req.on('data', (chunk) => {
    body += chunk;
  })
  req.on('end', () => {  
    var data = JSON.parse(body);
    res.write(typeof data);
    res.end();
  })
})

server.listen(5502)

之前还写过一篇关于 Stream 和 Pipe 的文章：Node.js 使用 fs 模块做文件 copy 的四种方法 能清楚的比较出使用Stream后能更快的获取到数据。

Buffer

浏览器中的JS没有二进制类型的数据(ES6中ArrayBuffer是二进制)，但是Node里面有，就是 Buffer。 Buffer是个全局对象，可直接使用来创建二进制数据：

• Buffer.alloc(size)
• Buffer.from(array)
• Buffer.from(buffer)
• Buffer.from(string[, encoding])

官方API中有最全的方法。

标准的Buffer数据比较难看懂，一般用 toString() 来转换成人类可读的数据

let buf = Buffer.alloc(26)
for (var i = 0 ; i < 26 ; i++) {
  buf[i] = i + 97;
}

console.log(buf); // <Buffer 61 62 63 64 65 66 67 68 69 6a 6b 6c 6d 6e 6f 70 71 72 73 74 75 76 77 78 79 7a>

buf.toString('utf8'); //  abcdefghijklmnopqrstuvwxyz
buf.toString('ascii'); // abcdefghijklmnopqrstuvwxyz

// 截取
buf.toString('utf8', 0, 5); // abcde
buf.toString(undefined, 0, 5); // abcde  编码默认是 utf8

fs 模块的 readFile 方法回调中的data就是个Buffer

fs.readFile('file-path', function (err, data) {
  if (err) return console.error(err);
  console.log(data);
});

Cluster 集群

单个 Node 实例运行在单个线程中。要发挥多核系统的能力，就需要启动一个 Node 进程集群来处理负载。核心模块 cluster 可以让一台机器的所有 CPU 都用起来，这样就能纵向的来扩展我们的Node程序。

var cluster = require('cluster');
var numCPUs = 4; // 我的 MacBook Air 是4核的
if (cluster.isMaster) {
  for (var i = 0; i < numCPUs; i++) {
    cluster.fork()
  }
} else if (cluster.isWorker) {
    console.log('worker')
}

上面的代码比较简单，引入模块创建一个 master 多个 worker，不过 numCPUs 并一定非得是一台电脑的核心数，这个可以根据自己需求想要多少都行。

worker 和 master 可以监听相同的端口，worker通过事件和master通信。master也能监听事件并根据需要重启集群。

重要代表 pm2

pm2优点很多：

• 负载均衡
• 热重载：0s reload
• 非常好的测试覆盖率

pm2 启动很简单：

$ pm2 start server.js -i 4 -l ./log.txt

• -i 4 是 cpu数量（我是4核的）
• -l ./log.txt 打日志

pm2 启动后自动到后台执行 通过 $ pm2 list 可以查看正在跑着那些进程。

更多内容直接看官网: http://pm2.keymetrics.io/

Spawn vs Fork vs Exec

child_process.spawn() vs child_process.fork() vs child_process.exec()

Node中有如上三种方式创建一个外部进程，而且都来自于核心模块 child_process

• require('child_process').spawn() 用于比较大的数据，支持流，可以与任何命令(bash python ruby 以及其他脚本)一起使用，并且不创建一个新的V8实例

  官网的例子就是执行了一个bash命令

• require('child_process').fork() 创建一个新的V8实例，实例出多个worker

  和spawn不同的的是 fork 只执行 node 命令

• require('child_process').exec() 使用Buffer，这使得它不适合比较大的数据和Stream，异步调用，并在回调一次性拿到所有数据

  exec()用的不是事件模式，而是在回调中返回 stdout stderr

处理异步 Error

处理异常一般都用 try/catch ,尤其是在同步代码非常好用，但是在异步执行中就会出现问题

try {
  setTimeout(function () {
    throw new Error('Fail!')
  }, 1000)
} catch (e) {
  console.log(e.message)
}

这种异步的回调里面情况肯定catch不到错误，当然把try/catch放入回调函数肯定没问题，但这并不是个好办法。

所以Node里面标准的回调函数的第一个参数都是 error ,于是就有了这样的代码

if (error) return callback(error)

一般处理异步异常的方法如下：

• 监听所有的 on('error')
• 监听 uncaughtException
• 用 domain 模块 或者 AsyncWrap
• 打日志
• 退出然后重启进程。。。。

uncaughtException

uncaughtException是一种很简单粗暴的机制，当一个异常冒泡到事件循环中就会触发这个事件，不过这个不建议使用。

process.on('uncaughtException', function (err) {
  console.error('uncaughtException: ', err.message)
  console.error(err.stack)
  process.exit(1)
})

Domain

domain自身其实是一个EventEmitter对象，它通过事件的方式来传递捕获的异常。

进程抛出了异常，没有被任何的try catch捕获到，这时候将会触发整个process的processFatal，此时如果在domain包裹之中，将会在domain上触发error事件，反之，将会在process上触发uncaughtException事件。

用法：

var domain = require('domain').create()

d.on('error', function(e) {
   console.log(e)
})
d.run(function() {
  setTimeout(function () {
    throw new Error('Failed!')
  }, 1000)
});

从 4.0 开始Node已经不建议使用了，以后也会被剥离出核心模块

打日志

log4js

日志不仅仅能记录异常信息

C++ 插件

Node.js在硬件、IoT领域开始流行就是因为能和 C/C++ 代码合体使用。

官方提供了很多C++插件的例子：https://github.com/nodejs/node-addon-examples

以第一个HelloWorld为例：

创建 hello.cc 文件，这个代码比较好理解

#include <node.h>

namespace demo {

using v8::FunctionCallbackInfo;
using v8::HandleScope;
using v8::Isolate;
using v8::Local;
using v8::Object;
using v8::String;
using v8::Value;

void Method(const FunctionCallbackInfo<Value>& args) {
  Isolate* isolate = args.GetIsolate();
  args.GetReturnValue().Set(String::NewFromUtf8(isolate, "Hello World C++ addon")); // 输出Hello World
}

void init(Local<Object> exports) {
  NODE_SET_METHOD(exports, "hello", Method); // Exporting
}

NODE_MODULE(addon, init)

}  

创建binding.gyp文件 内容一看就懂

{
  "targets": [
    {
      "target_name": "addon",
      "sources": [ "hello.cc" ]
    }
  ]
}

依次执行两个命令

$ node-gyp configure
$ node-gyp build

编译完成后在 build/Release/ 下面会有一个 addon.node 文件

然后就简单了创建 h.js

var addon = require('./build/Release/addon')
console.log(addon.hello()) 

执行 $ node hello.js 打印出了 Hello World C++ addon

OVER....

PS: 文中图片都是用keynote制作的

PS: 部分参考和翻译自：

• https://nodejs.org/api/
• http://www.ruanyifeng.com/blog/2014/10/event-loop.html
• http://webapplog.com/you-dont-know-node/
• https://cnodejs.org/topic/516b64596d38277306407936

整理下我的前端知识结构 ( Doing & ToDo )

这些都是在做的、在学的和准备做的知识点。以概念为主，每一点拿出来都可以做很深的扩展。

基础

• JS标准库 Object Array
• OOP 面向对象
• this 原型 继承
• 闭包
• 作用域
• HTML5 语义化
• CSS3 动画、技巧、模块化；常用Hack
• Flex 布局
• 浏览器渲染
• DOM操作

工具库

• jQuery zepto
• lodash
• underscore

主要还是透过lodash学习下函数式编程

框架

• Vue
• React
• Virtual DOM
• 状态管理：Redux Flux Vuex
• 路由：React-Router Vue-Router
• SPA 单页应用（有一个 Side Project）
• 框架的ui组件库
• MVVM的数据、DOM缓存
• 页面服务端渲染

主要还是以Vue为主，工作中用的比较多；
React 全家桶太多，处于不断学习的状态，把所有的API都用过，以个人项目、公司小项目使用为主；
Angular还是在2013年时候用过，现在基本忘光了，暂时也不打算放精力在上面。

ES6

• let const
• 解构赋值
• 字符串模板
• 数组、函数、对象扩展
• Set Map Iterator
• Generator 函数
• Promise 对象
• Class
• 模块 Module

工程化

• 规范：代码规范(eslint)，目录规范，测试预发上线规范，业务和逻辑分离等
• 自动化构建： Gulp Webpack npm (Vue+webpack+gulp的实践)
• 接口mock、数据模拟
• 内部组件库
• 自动化测试
• 性能优化：
  1. 代码层面：算法、页面渲染、重排重绘。。。
  2. 工程层面：静态文件管理、服务端渲染、缓存。。。
• 线上监控
• 线上历史版本管理

关于工程化，后面再单独写篇文章，总结下自己的实践、汇总下其他的方案。

Node

• 基本的API
• Express 中间件 路由
• 个人的爬虫项目 Node+Mongo+React(Vue)

设计模式

• 单例
• 观察者
• 工厂

其他

• 算法
• HTTP(1.1 2.0) websocket
• TCP
• 安全 CSRF XSS 同源策略
• 浏览器缓存
• Chrome 扩展（个人项目）

远程文件批量下载 Node.js & Ruby

var fs = require("fs");
var http = require('http');

fs.readFile('img.txt', 'UTF-8', function(err, data){
    if(!err){
        var con = data.split('\n');
        var i=0,
            len=con.length;

        function down(file){
            http.get(file, function(res){
                var imgData = '';
                res.setEncoding('binary');

                res.on('data', function(chunk){
                    imgData+=chunk;
                });
                res.on('end', function(){
                    fs.writeFile(i+'.jpg', imgData, 'binary', function(err){
                        if(err){
                            console.log('fail: ' + file);
                        }
                        i++;
                        if(i<len){
                            down(con[i]);
                        }
                        console.log('download over')
                    });
                });
            });
        }
        down(con[0]);
    }else {
        console.log(err);
    }
});

关于 Node 这段代码最初文件写入用的 for 循环，没有把 down 函数抽取出来做递归，于是每次做文件写操作时候会覆盖上一个文件，是因为 javascript 是单线程的，先执行完整个循环的同步内容之后才去执行其中的异步操作。get 函数里的匿名函数就是一个异步回调。

处于闭包原则，该函数会保留 for 循环最后一次循环的i变量，才会导致只保存了一个文件。

所以写 node 时候尽可能的多用递归。

但是因为异步所以会按顺序依次下载，速度并不是很快，依次如下：

在 for 循环中如果使用自执行函数 (function(i,file){})(i,con[i]) 就可以那个避免上述问题。

更重要的是，异步回调速度很快，因为不会产生阻塞，可以同步的下载图片，所以最终我选择的代码如下：

var fs = require("fs");
var http = require('http');

fs.readFile('img.txt', 'UTF-8', function(err, data){
    if(!err){
        var con = data.split('\n');
        for(var i=0,len=con.length;i<len;i++){
            (function(i, file){
                http.get(file, function(res){
                    var imgData = '';
                    res.setEncoding('binary');

                    res.on('data', function(chunk){
                        imgData+=chunk;
                    });
                    res.on('end', function(){
                        fs.writeFile(i+'.jpg', imgData, 'binary', function(err){
                            if(err){
                                console.log('fail: ' + con[0]);
                            }
                            console.log('download over')
                        });
                    });
                });
            })(i, con[i]);
        }
    }else {
        console.log(err);
    }
});

Ruby 版本

最近看了点 Ruby 的代码，实现相同功能只需要17行，简单暴力

还没有研究 Ruby 是否可以做异步回调

require 'net/http'
require 'open-uri'

con = Array.new
File.open("img.txt", "r") do |file|
    while line  = file.gets
       con.push(line)
    end
end

name = 0
for i in con do
    data = open(i){|f|f.read}
    open(name.to_s + '.jpg', 'wb'){|f|f.write(data)}
    name = name +1
    print name
end

我所理解的代码质量

• 代码的可读性放在第一位, 代码尽量做到don't make me think( 阿里中间件团队的代码被阅读了无数遍了，如果提高一点可读性，将节约很多人的时间, 中间件的代码很可能被很多同学模仿）
  PS:纯粹吐槽 :)
• 没有bug的代码不一定是高质量的代码, 写代码不能紧紧满足于功能
• 你的代码规范不一定要达到开源规范标准(能达到最好)，但不要低(松)于团队的代码规范
• 写代码要有敬畏之心。想想如果让你开发载人火箭的程序,你敢随意去写么? 网站一样需要重视
• 团队的代码质量重要程度高于个人代码质量。如果只满足个人代码质量提高，而不去帮助团队提高代码质量，你很可能会踩上别人留下的坑，你在工作中很可能遇到各种不便(当然你也要避免给其他人留坑)
• 良好的代码规范不一定会让你避免bug.但可以帮助你/他人提升找到bug的速度, 以及提升工作效率
• 读优秀的源码(书籍),关注一些细节，对代码质量提升非常有帮助
• codereview不仅仅是为了review出bug。这也是知识分享的一个过程， 团队更有经验的同学会对你的代码提出建议;review人员可以从中获取业务/技术相关信息;被review人员因为有人会review你的代码，而不得不提升自己的代码质量，以及代码的熟悉程度
• 代码规范不会影响开发效率, 你的开发效率应该通过其他的方式去提升。 相反，他会节省你很多成本(阅读,沟通)
• 故障多少和自己的技术能力关系其实不是很大,和自身的工作习惯非常大(我看了很多故障案例,绝大多数不是开发同学没有相应的技术能力)
• 对自己擅长什么，不擅长什么要有清楚的认识.有的故障产生的原因是对自己某方面能力太过自信.在不擅长的地方去咨询其他有经验的同学，这不会显得自己能力差, 反而给他人的印象是你很重视你的工作，工作谨慎.

毛玻璃效果 - 《css揭秘》笔记

Demo地址

https://ccforward.github.io/css-secrets/frosted-glass/index.html

方案

1. 大背景是 background-attachment: fixed 处理起来容易些，非固定背景的情况比较麻烦
2. 首先不能对元素本身做模糊处理，所以就对一个伪元素进行处理，将其定位到元素的下层，那他的背景就和 的背景无缝匹配了

主要代码：

main {
    position: relative
}
main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1; /* 伪元素置于最下面 */
    background: rgba(255, 0, 0, .5); /* 添加背景色做测试 */
}

效果：

然后就把红色背景替换掉 开始进行模糊处理
添加代码：

body, main::before {
background: url(//gw.alicdn.com/tps/i1/TB1Zc6qHpXXXXb3XFXXeowVVXXX-1200-800.jpg) 0 / cover fixed;
}
main {
    background: hsla(0, 0%, 100%, .2) border-box;
}
main::before {
    -webkit-filter: blur(15px);
    filter: blur(15px);
}

现在的效果其实已经很接近毛玻璃了，但是有个问题，就是边缘处的模糊效果会逐渐的削弱并突出出去（显得有点脏玻璃的感觉），换成红色背景来看就很明显：

所以解决方案就是：

1. 让伪元素相对宿主元素向外扩大,即扩大模糊效果 30px

main::before {
    margin: -30px;
}

1. 裁掉扩大出来的边缘

main {
    overflow: hidden;
}

最终效果就出来了

参考

• 《css揭秘》4-18：毛玻璃效果

HTML5、移动开发meta标签

• 声明字符编码 <meta charset="utf-8">
  关于html标签中的lang属性：
  简体中文 <html lang="zh-cmn-Hans">
  繁体中文 <html lang="zh-cmn-Hant">
• 使用最新版的IE和Chrome
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
• 360 使用webkit内核渲染
  <meta name="renderer" content="webkit">
• 禁止百度对网页转码(百度的Siteapp页面转码)
  <meta http-equiv="Cache-Control" content="no-siteapp" />

viewport

经常写：
<meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

content参数：

• width viewport 宽度(数值/device-width)
• height viewport 高度(数值/device-height)
• initial-scale 初始缩放比例
• maximum-scale 最大缩放比例
• minimum-scale 最小缩放比例
• user-scalable 是否允许用户缩放(yes/no)

iPhone 6 和 iPhone 6+ ：
<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">

iOS设备

• 添加到主屏后的标题
  <meta name="apple-mobile-web-app-title" content="标题">
• 是否启用webAPP进入全屏模式
  <meta name="apple-mobile-web-app-capable" content="yes" />
• 状态栏的背景颜色
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  content参数
  • default 默认值。
  • black 状态栏背景是黑色。
  • black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
• 禁止数字识别为电话号码
  <meta name="format-detection" content="telephone=no" />

iOS图标

link标签，rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。
apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。

• iPhone 和 iPod touch，默认 57×57px
  <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />
• iPad，72×72px
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />
• Retina iPhone 114×114px
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />
• Retina iPad，144×144px
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />
• iOS 图标大小在iPhone 6+上是180×180，iPhone 6 是120×120
  适配iPhone 6+ <link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">

iOS 启动画面

Apple的文档 链接
iPad启动画面不包括状态栏区域

• iPad竖屏 768x1004
  <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />
• iPad 竖屏 1536×2008（Retina）
• iPad 横屏 1024×748（标准分辨率）
• iPad 横屏 2048×1496（Retina）

iPhone 和 iPod touch 的启动画面是包含状态栏区域的

• iPhone/iPod Touch 竖屏 320×480 (标准分辨率)
  <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />
• iPhone/iPod Touch 竖屏 640×960 (Retina)
• iPhone 5/iPod Touch 5 竖屏 640×1136 (Retina)
• iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。
  <link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">
<link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">
• 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
  <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。

<meta name="theme-color" content="#db5945">

Win 8

• Windows 8 磁贴颜色
  <meta name="msapplication-TileColor" content="#000"/>
• Windows 8 磁贴图标
  <meta name="msapplication-TileImage" content="icon.png"/>

RSS

添加RSS订阅

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />

<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="name, [email protected]"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

    <!-- iOS 设备 begin -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- iOS 图标 begin -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
    <!-- iOS 图标 end -->

    <!-- iOS 启动画面 begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad 竖屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad 横屏 1024x748（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad 横屏 2048x1496（Retina） -->

    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    <!-- iOS 启动画面 end -->

    <!-- iOS 设备 end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 磁贴图标 -->

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- 添加 RSS 订阅 -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- 添加 favicon icon -->

    <title>标题</title>
</head>

Mac下给SD卡安装 Raspbian 系统

1、安装

系统下载地址

插入SD卡，使用 df 查看当前已经挂载的卷

$ df
Filesystem    512-blocks      Used Available Capacity  iused   ifree %iused  Mounted on
/dev/disk1     233269248 218788512  13968736    94% 27412562 1746092   94%   /
devfs                374       374         0   100%      648       0  100%   /dev
map -hosts             0         0         0   100%        0       0  100%   /net
map auto_home          0         0         0   100%        0       0  100%   /home
/dev/disk2s1    31100416      4992  31095424     1%        0       0  100%   /Volumes/Pi

因为已经命名了SD卡为 Pi ，所以SD卡的分区对应的设备文件为：/dev/disk2s1

使用diskutil unmount卸载

$ diskutil unmount /dev/disk2s1
Volume Pi on disk2s1 unmounted

diskutil list 确认设备 我买的是16G的卡

$ diskutil list
/dev/disk2
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:     FDisk_partition_scheme                        *15.9 GB    disk2
   1:                 DOS_FAT_32 Pi                      15.9 GB    disk2s1

使用dd命令将系统镜像写入
PS /dev/disk2s1是分区，/dev/disk2是块设备，/dev/rdisk2是原始字符设备

$ dd bs=4m if=pi.img of=/dev/rdisk2
781+1 records in
781+1 records out
3276800000 bytes transferred in 194.134151 secs (16879050 bytes/sec)

至此，SD卡上已经刷入了 Raspbian 系统

再用diskutil unmountDisk卸载设备

$ diskutil unmountDisk /dev/disk2
Unmount of all volumes on disk2 was successful

2、配置

把SD卡插入树莓派，连上网线，因为不知道树莓派的ip，所以在网上随便找了个扫描ip的软件(Free IP Scanner),然后在一台windows电脑上扫描了局域网内的所有ip,其中端口为22的ip就是我们的树莓派了。

然后就是 ssh 登录树莓派 用户名 pi 密码 raspberry

如果执行 ssh 命令返回 connection refused， 则需要开启 sshd 服务

1. 把SD卡拔下来，进入到根目录，新建一个名为ssh的空白文件
2. 在树莓派执行 service sshd restart

SSH 服务启动成功

$ ssh [email protected]
[email protected]'s password:
Linux raspberrypi 3.18.11-v7+ #781 SMP PREEMPT Tue Apr 21 18:07:59 BST 2015 armv7l

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
Last login: Fri Sep 11 11:16:12 2015 from c.local

NOTICE: the software on this Raspberry Pi has not been fully configured. Please run 'sudo raspi-config'

执行 sudo raspi-config

选择第一项 Expand Filesystem 扩展 SD 卡上可用的空间，不然以后安装大软件会提示空间不足

执行 df -h

pi@raspberrypi ~ $ df -h
Filesystem      Size  Used Avail Use% Mounted on
rootfs          2.9G  2.4G  335M  88% /
/dev/root       2.9G  2.4G  335M  88% /
devtmpfs        460M     0  460M   0% /dev
tmpfs            93M  224K   93M   1% /run
tmpfs           5.0M     0  5.0M   0% /run/lock
tmpfs           186M     0  186M   0% /run/shm
/dev/mmcblk0p1   56M   19M   37M  34% /boot

先把自带的难用的vim删掉 重新安装

删除 sudo apt-get remove vim-common
安装 sudo apt-get install vim

然后就是 linux 下 vim 的配置，不再多说。

使用crontab做定时服务

基本命令

• crontab -e 编辑任务
• crontab -l 列出任务

时间格式

• f1 f2 f3 f4 f5 program
  • f1：分钟
  • f2：小时
  • f3：一个月中的第几天
  • f4：月份
  • f5：一个星期中的第几天
• f1为 a-b 表示从a分钟到b分钟内执行
• f2为 a-b 表示从a小时到b小时内执行
• f1为 */n 表示n分钟个时间间隔执行一次
• f2为 */n 表示每n小时个时间间隔执行一次
• f1为 a, b, c,… 时表示第 a, b, c… 分钟要执行
• f2为 a, b, c,… 时表示第 a, b, c… 个小时要执行

Samples

1. * * * * * command
   每分钟执行一次
2. 3,15 * * * * command
   每小时的第 3 15 分钟执行一次
3. 3,15 8-11 * * * command
   上午8点到11点的第3 15分钟执行一次
4. 3,15 8-11 */2 * * command
   每隔两天的上午8点到11点的第3 15分钟执行一次
5. 3,15 8-11 * * 1 command
   每个星期一的上午8点到11点的第3和第15分钟执行
6. 30 21 * * * command
   每晚的21:30执行
7. 45 4 1,10,22 * * command
   每月1、10、22日的4 : 45执行
8. 10 1 * * 6,0 command
   每周六、周日的1 : 10执行
9. 0,30 18-23 * * * command
   每天18 : 00至23 : 00之间每隔30分钟执行
10. 0 23 * * 6 command
    每星期六的晚上11 : 00 执行
11. * */1 * * *
    每小时执行一次
12. * 23-7/1 * * *
    晚上11点到早上7点之间，每隔一小时执行
13. 0 11 4 * mon-wed
    每月的4号与每周一到周三的11点执行
14. 0 4 1 jan *
    一月一号的4点
15. 01 * * * * root run-parts /etc/cron.hourly
    每小时执行/etc/cron.hourly目录内的脚本
    ** run-parts这个参数了，如果去掉这个参数的话，后面就可以写要运行的某个脚本名，而不是目录名了 **

注意事项

• 手动可执行任务，但无法自动执行，需要注意环境变量

  • 脚本中涉及文件路径时写全局路径
  • 脚本执行要用到java或其他环境变量时，通过source命令引入环境变量

  cat start_cbp.sh
  #!/bin/sh
  source /etc/profile
  export RUN_CONF=/home/d139/conf/platform/cbp/cbp_jboss.conf
  /usr/local/jboss-4.0.5/bin/run.sh -c mev &
  

• 清理系统用户的邮件日志

• 新创建的cron job，不会马上执行，至少要过2分钟才执行。如果重启cron则马上执行。

• 当crontab突然失效时，可以尝试/etc/init.d/crond restart解决问题。或者查看日志看某个job有没有执行/报错tail -f /var/log/cron。

从前端角度对 tower.im 进行的性能分析

技术水平有限，只是从前端角度和部分个人经验来浅显的分析了 https://tower.im 站点的性能。

关于 position:sticky

sticky从iOS6开始支持，Android4.4版本还不支持

其实这个css3属性很简单，只是做个兼容的demo来演示下

demo地址(扫码查看)： css-sticky

自定义事件库 EventFire

源码

EventFire仓库地址: https://github.com/ccforward/EventFire

事件的管理主要有三点：绑定(on)、触发(fire)、销毁(off)；所以写一个自定义的事件库就从这三点出发。

下面一步一步来写

0、思考

绑定

就像在各种js库里面监听DOM事件一样，会有下面几种方式：

event.on('someEvent', callback)
// 绑定多个事件
event.on(['someEventA', 'someEventB'], callback)
// 绑定一次
event.once('someEvent', callback)
// ....  其他

触发

PS: 触发的函数名可以是 trigger 或者 emmit，个人感觉 fire 像游戏一样，听起来更爽。

event.fire('someEvent')
// 触发时绑定数据
event.fire('someEvent', {weapon: 'machine gun'})
// 触发多个事件
event.fire(['someEventA', 'someEventB'], callback)

// ....  其他

销毁

销毁肯定和事件绑定是对应关系

event.off('someEvent', callback)
event.off('someEvent')
event.off(['someEventA', 'someEventB'], callback)

// ....  其他

1、方法设计

一个简单的事件库应该有如下的方法：

• on 事件绑定
• once 绑定一次
• off 事件解绑
• fire 触发事件
• offAll 解绑所有事件
• listeners 返回某一事件上的监听器
• enable 事件绑定和触发-可用
  disable 事件绑定和触发-暂停
• destory 解绑实例上的事件，并完全销毁这个实例(不能再继续绑定和触发事件)

2、方法细节

on 方法

最开始时已经有了两个基本的用法，思考后想到一些新的传参方式来支持更加灵活的事件绑定：

• 字符串参数，单个事件
  on('event', callback, {once: true})

• 数组参数，事件集合
  on(['event1', 'event2'], callback, {once: true})

• 事件和回调的键值对

  on({
    event1: function(){},
    event2: function(){}
  }, {once: true});

• 绑定到所有事件上

  on(function(){}, {once: true})

• 函数监听器的名字也应该能支持正则

  on(/^event/)
  on(/event\d+/)

最后一个可选参数是考虑到 once 方法后来添加的，对于 on 方法直接单次的事件绑定会更灵活些

on 最后还应该返回 this 来支持链式调用

once 方法

在 on 方法上添加了 {once: true} 这个可选参数后，这个方法就仅仅是 on 方法的一个变形了，不再多说。

once 可以和最后提到的 scope 统一放在配置项中

off 方法

off 很好理解, 它设计肯定和 on 是对应的，不过会多一种调用方式：

off('eventName') 解绑 eventName 事件

fire 方法

fire 也是和 on 相对应的：

• fire('event');
• fire('event', data);
• fire(['event1', 'event2']);
• fire(['event1', 'event2'], data);
• fire({event1: data, event2: data});

参数 data 可以用在回调函数中，用来传递状态、自定义数据等消息

offAll 方法

这里需要创建三个内部变量，用来存储回调函数，从而在解绑的时候能够找到已经绑定的函数

• _handlers 存储绑定的监听器回调函数的键值对
• _handlersAll 存储绑定的在所有事件对象上的监听器数组
  就是这种 on(function(){})
• _handlersRegx 存储通过正则方式绑定的监听器以及正则pattern

所以解绑所有事件就是把上面三个变量置为空

PS： 这个方法也可直接用在构造器中，初始化上面三个内部变量

listeners 方法

listeners(eventName) 返回一个绑定在 eventName 上的所有函数的数组

enable disabled 方法

这两个方法最开始考虑叫 pause 和 goon 但只是个构思，后来看了其他的事件库后发现暂停绑定事件的执行是个很大的需求才改为更通用的名字

同样这里也需要引入一个内部变量 _enabled 来对应两个方法设置为 true 和 false

destory 方法

这个方法实现起来最简单粗暴，三步:

1. offAll() 解绑
2. 把所有内部变量设为 null 或 false
3. 上面所有方法设为空函数，也就是 Function.prototype

3、其他

作用域

函数在绑定的时候可以添加一个作用域，类似添加 {once: true} 一样， 添加一个名为 scope 的配置来替代 this

on('event1', fn1, {scope: {hello: 'world'}})
on('event2', fn2, {scope: {hello: 'world'}, once: true})

数据传递

fire 方法的最后一个参数 data, 但是在 fire 的时候需要传递数据，因此一个 data 变量就是个刚需了。

e.on('event', function(ev){
    console.log(ev.data)
});
e.fire('event', {a: 123});

兼容性

最后添加 commonjs 和 AMD 规范的兼容，具体的代码在 index.js 最后

JavaScript 标准参考教程

重新开始看Javascript基础知识，记录知识点关键字

1、导论

Atwood's Law:

Any application that can be written in JavaScript, will eventually be written in JavaScript.

2、基本语法

• 变量提升
• else代码块总是跟随离自己最近的那个if语句

2.1 数据类型

• 原始数据类型
  • number
  • string
  • boolean
• 合成数据类型
  • object
  • array
  • function
• null undefined
  • undefined == null //true
  • Number(null) // 0
  • Number(undefined) // NaN
  • null 表示“没有对象” 此处不应该有值
  • undefined 表示“缺少值” 即此处应该有一个值，但还未定义
• typeof
  • typeof [] // "object"
  • typeof null // "object"
  • [] instanceof Array // true
  • {} instanceof Arry // false
• if([]) if({}) // true

2.2 数值

• 有效数字的精度为53个二进制位
• typeof NaN // number
• NaN === NaN // false
• isNaN(NaN)
• NaN是JavaScript之中唯一不等于自身的值
• isFinite() 检查某个值是否为正常值

2.3 字符串

• 利用多行注释生成多行字符串

  (function () { /*
      line 1
      line 2
      line 3
  */}).toString().split('\n').slice(1,-1).join('\n')
  

• 'hello'[1]; //e

• base64转码

window.btoa("Hello World")
// "SGVsbG8gV29ybGQ="
window.atob("SGVsbG8gV29ybGQ=")
// "Hello World"

2.4 对象

• Object.keys 查看所有属性
• delete 删除属性 读取删除后的属性 返回undefined

3、标准库

4、面向对象编程

• Object对象 new Object(123) instanceof Number ==> true
• Object.keys 和 Object.getOwnPropertyNames

5、DOM

6、浏览器对象

7、HTML网页的API

主要测试了Mac下使用情况：

• ~/.bash_profile:每个用户都可使用该文件输入专用于自己使用的shell信息,当用户登录时,该文件只load一次。
• ~/.bashrc:该文件包含了专属于登录用户的bash shell的bash信息。每次新开一个bash或者登录都会reload一次。

建议做法

• 把 PATH 放入 .profile 文件
• 把 alias 和 功能函数 放入 .bashrc 文件
• 然后 .bash_profile

#!/bin/bash
#
# CRM .bash_profile Time-stamp: "2008-12-07 19:42"
#
source ~/.profile # Get the paths
source ~/.bashrc  # get aliases
#
#- end

无线开发的积累

Tips

• 调用chrome打开链接
  • iOS: <a href="googlechrome:www.taobao.com">taobao</a>
  • Android: <a href="intent://www.taobao.com#Intent;scheme=http;package=com.android.chrome;end">taobao</a>
    若没有安装chrome浏览器，Android会弹出对话框，自行选择浏览器；iOS会显示网址无效
  • 未安装chrome时，Android下会有友好的提示，iOS暂时没有好的解决办法

meta标签

这些meta标签在开发无线页面尤其是webAPP时作用很大

<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="yes" name="apple-touch-fullscreen"/>
    safari私有的标签，表示允许全屏
<meta content="telephone=no,email=no" name="format-detection"/>
    忽略将页面的数字识别为电话号码
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0
    并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览
<meta name="data-spm" content="a.b"> 埋点

PS：content里的属性要用分号+空格来分开

link标签(主要针对iOS)

保存网页到桌面上时使用的图标，没有设置则显示网页截图

<link rel="apple-touch-icon-precomposed" href="../icon_114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../_icon_72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../icon_114.png" />

启动画面的图片，没有设置就显示白屏

<link rel="apple-touch-startup-image" href="../start.png" />

其中还有个专门针对iOS的meta标签

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

用来设置顶部的bar(状态栏)颜色,Apple有个官方的说明 iOS的meta标签
估计已经有人翻译了，不过没找到中文版

transition闪屏

• css3 3D加速
  -webkit-transform-style: preserve-3d;
• 通过backface-visibility 隐藏
  -webkit-backface-visibility: hidden;

iOS下的localStorage

safari有隐私模式，但是 ’localStorage’ in window 依然返回true,就需要使用try catch来捕获错误

try{
    if('localStorage' in window){
        //localstorage可用
  }else{
         //localstorage不可用
   }
}catch(e){
        // 隐私模式localstorage不可用
}

部分android机型在滑动时候会停止js css的执行

答案来自这里 stackoverflow

function touchHandlerDummy(e){
    e.preventDefault();
    return false;
}
document.addEventListener("touchstart", touchHandlerDummy, false);
document.addEventListener("touchmove", touchHandlerDummy, false);
document.addEventListener("touchend", touchHandlerDummy, false);

iOS下判断页面是否添加到主屏幕后从主屏幕打开

alert(navigator.standalone);

提高touchmove事件的性能

$('.dom').on('touchmove', function(){
    // 处理逻辑
})

如果处理逻辑的代码非常复杂，那就会使fps下降，可以添加一个setTimeout

$('.dom').on('touchmove', function(){
    setTimeout(function(){
        // 处理逻辑
    },0);
})

在iOS设备上弹出九宫格的数字键盘

像这种写法 <input type="number"> 是可以输入其他字符的
So，我们这样来搞定： <input type="text" pattern="\d*"> 实现纯数字输入
还有种九宫格数字键盘： <input type="tel"> 可以输入 +*# 等电话字符

input标签这玩意儿还挺好玩的 可以看下Apple的官方文档

各种CSS

• 禁止选中文字： -webkit-user-select:none
• 禁止iOS弹出各种操作窗口 -webkit-touch-callout:none
• Android去掉语音输入的按钮 input::-webkit-input-speech-button {display: none}
• 在节点上添加了 overflow-x: hidden;后滑动时，页面会不流畅，出现卡顿，这时候就需要-webkit-overflow-scrolling来hack一下
  *{-webkit-overflow-scrolling: touch;}
html,body{ overflow-x: hidden;}

事件

1、旋转事件 onorientationchange

window.onorientationchange = function() {
    switch(window.orientation) {
    　　case 0:
            alert("正常屏幕");
            break;
    　　case -90:
            alert("屏幕左转”);
            break;
    　　case 90:
            alert("屏幕右转");
            break;
    　　case 180:
        　　alert("屏幕倒转”);
        　　break;
    }
};

旋转屏幕后字体大小会发生改变，阻止：

html, body, form, fieldset, p, 
div, h1, h2, h3, h4, h5, h6 
{-webkit-text-size-adjust:none;}

2、click事件
绑定了click后会出现点击后闪一下的情况，可以给绑定元素添加

-webkit-tap-highlight-color: rgba(0,0,0,0);

3、hover
使用touchstart和touchend模拟hover

$('.link').on('touchstart',function(){$(this).addClass('hover')});
$('.link').on('touchend',function(){$(this).removeClass('hover')});

.link:hover,.link.hover{ color:#fff }

4、active伪类
使active伪类生效，只需要在touchstart或touchend上添加空的匿名函数

$('a').on('touchend',function(){});

5、输入

input输入框 type=“date” 时添加placeholder的hack：

<input type="date" id="J_Date" placeholder="选择日期">
$('#J_Date').on('focus', function(){
    $(this).attr('type','date')
});

同理，type的值为moonth week time时候一样处理 （不过week在iOS7上不支持）

忽略输入框自动大写和修正单词

<input type="text" autocapitalize="off" autocorrect="off" />

iOS上打电话 发短信的a标签

<a href="tel:18688886666">Call Me</a>
<a href="sms:18688886666">Send Msg</a>      

是否支持svg

document.implementation.hasFeature("http:// www.w3.org/TR/SVG11/feature#Image", "1.1")

一个Node.js的知乎日报爬虫

爬取了从 20150519 以来所有的文章、点赞数、评论数和部分评论内容

感觉数据挺多，简单的统计了下，还挺有趣的。

具体的数据统计和分析移步到我在知乎上的回答

线上地址

• GitHub仓库: https://github.com/ccforward/zhihu
• 日报首页: http://zhihu.ccforward.net
• 数据统计: http://zhihu.ccforward.net/statistics

技术栈

Node.js + Vue.js + MongoDB

• Node.js做爬虫、express搭建web框架
• MongoDB 存储所有爬取的历史数据和定时任务爬取的新数据
• Vue2.0全家桶 + ES6 + stylus + webpack 做前端开发和构建
• ES6 + echarts 做数据统计页面
• 知乎的图片做了防盗链，部署了一个php服务来代理图片
• 整个项目托管在了百度云-BAE上面

功能

爬虫任务

1. 爬取所有历史记录，包括：文章标题、正文、评论、点赞相关的数据
2. 每天 07:30 - 21:30 每两个小时爬取一次最新数据
3. 每天 23:30 爬取当天的数据
4. 每周三、日 00:30 更新前7天的评论点赞数

展示页面

1. 统计入口页面

2. 首页
   顶部是每天最新数据，点赞大于 1000 的做了高亮标红处理

   下面是历史每日数据

   

3. 文章详情页 - 下面是2015年评论 TOP 1 的文章

   

4. 文章的部分评论也爬了下来

   在页面最底部点开

   

5. 按日期查看每日历史文章

   可以查看历史每一天的所有文章，主要用在统计页面上，后面做个日历入口方便跳转，链接如下：

   http://zhihu.ccforward.net/#/date?dtime=20161001

   

PS: 知乎日报第一篇文章

ES6/7 Cheat Sheet

简明扼要的 ES6 ES7 Cheat Sheet

用 keynote 做的图 转为 PDF 和 图片

pdf

keynote

画个梯形 - 《css揭秘》笔记

在以前，(是以前！) 梯形确实不太好画出来啊。。。

实现方案

在三维的世界中旋转一个矩形，因为透视关系，最终看到的二维图像就是一个梯形啦
transform: perspective(.5em) rotateX(5deg);

但是因为对整个元素进行了3D变形，所以里面的文字也变形了。有一点值得注意：对元素使用了3D变形后，内部的变形效应是『不可逆转』的。 但是2D变形体系下内部的逆向变形是可以抵消外部的变形效应的。

所以唯一的方法就是把变形效果作用在 伪元素 上。如图：

div {
    position: relative;
    width: 100px;
    height: 50px;
    margin: 20px auto;
    padding: .5em 1em .35em;
    text-align: center;
    color: #fff;
}
div:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background: #f60;
    transform: perspective(.5em)  rotateX(5deg);
}