深入学习 JavaScript——Object 对象

目前前端开发中比较流行的两个框架： Angular 和 Vue 都采用了数据双向绑定的技术。
Angular1 中数据双向绑定是通过「脏检测」的方式实现，每当数据发生变更，对所有的数据和视图的绑定关系进行一次检测，识别是否有数据发生了变化以及这个变化是否会影响其它数据的变化，然后将变更的数据发送到视图，更新页面展示。

Vue 数据双向绑定的原理与Angular有所不同，网上人称「数据劫持」 scary 。Vue使用的是 ES5 提供的 Object.defineProperty() 结合发布者-订阅者模式，通过Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

more >>

展开全文 >>

函数柯里化

2016-11-20

什么是柯里化

柯里化是一种函数的转换，它是指将一个函数从可调用的 f(a, b, c) 转换为可调用的 f(a)(b)©。

柯里化不会调用函数。它只是对函数进行转换。

实现

// 请实现 curry 函数，实现函数柯里化
function curry(fn) {
    // 代码
}
function add(a, b, c) {
    return a + b + c;
}

const $add = curry(add);

$add(2)(3)(4); // 9
$add(2)(3, 4); // 9
$add(2, 3)(4); // 9

具体实现如下

function curry(fn) {
    // curry 返回一个函数。这里没有选择匿名函数是因为下面有递归调用
    return function curried (...args) {
        // 如果传入的参数个数满足函数的形参要求，直接调用
        if (args.length >= fn.length) {
            return fn.apply(this, args);
        } else {
            // 如果不满足个数要求，返回一个新的函数，函数内部递归调用 curried
            return function (...args1) {
                const newArgs = args.concat(args1);
                return curried.apply(this, newArgs);
            }
        }
    };
}

展开全文 >>

浏览器事件循环

2016-11-19

宏任务 & 微任务

JS 把异步任务分为宏任务和微任务。ES5 之后，JavaScript 引入 Promise，不需要浏览器，JavaScript 引擎自身也可以发起异步任务了。

宏任务由宿主（浏览器，Node）发起

宏任务包括 script，事件，网络请求（AJAX/Fetch），setTimeout，setInterval，setImmediate，I/O、UI 交互事件由宿主发起。

微任务由 JS 引擎发起。

Promise.then, Promise.catch, Promise.finally, MutationObserver 是微任务，由 JS 引擎发起。

注意：Promise 本身是同步的，但是其 then/catch 的回调是异步的。

宏任务、微任务执行过程

同步代码（js 执行/回调栈）
微任务的异步代码（js 引擎）
promise.nextTick(node)
Promise.then() Promise.catch()
Async/Await
Object.observe 等等
宏任务的异步代码（宿主环境）
script(代码块)
setTimeout，setInterval，setImmediate

一次事件循环 = (同步代码 + 微任务队列 + 宏任务队列) 放入执行栈，先进先出，执行完成。

举例

1. 执行顺序

console.log("a");
setTimeout(function () {
  console.log("b");
}, 0);
const p = new Promise((resolve, reject) => {
  console.log("c");
  resolve(1000);
  console.log("d");
});
p.then((data) => {
  console.log(data);
});
console.log("e");

输出结果：

a
c
d
e
1000
b

2. 执行顺序

Promise.resolve().then(() => {
  // 微任务1
  console.log("Promise1");
  setTimeout(() => {
    // 宏任务2
    console.log("setTimeout2");
  }, 0);
});
setTimeout(() => {
  // 宏任务1
  console.log("setTimeout1");
  Promise.resolve().then(() => {
    // 微任务2
    console.log("Promise2");
  });
}, 0);

输出结果：

Promise1
setTimeout1
Promise2
setTimeout2

最后输出顺序为：Promise1 => setTimeout1 => Promise2 => setTimeout2。具体流程如下：

同步任务执行完毕。微任务 1 进入微任务队列，宏任务 1 进入宏任务队列。
查看微任务队列，微任务 1 执行，打印 Promise1，生成宏任务 2，进入宏任务队列。
查看宏任务队列，宏任务 1 执行，打印 setTimeout1，生成微任务 2，进入微任务队列。
查看微任务队列，微任务 2 执行，打印 Promise2。
查看宏任务队列，宏任务 2 执行，打印 setTimeout2。

3. 执行顺序

const p = new Promise((resolve) => {
  console.log(0);
  resolve();
});
p.then((res) => {
  console.log(1);
})
  .then((res) => {
    console.log(2);
  })
  .then((res) => {
    console.log(3);
  });
p.then((res) => {
  console.log(4);
});
p.then((res) => {
  console.log(5);
});
p.then((res) => {
  console.log(6);
});

输出顺序：

4. 执行顺序

async function async1() {
  console.log("async1 start"); // 2
  await async2();
  // 微任务
  console.log("async1 end");
}
async function async2() {
  console.log("async2"); // 3
}
console.log("script start"); // 1
setTimeout(function () {
  // 宏任务
  console.log("setTimeout");
}, 0);
async1();
new Promise(function (resolve) {
  console.log("promise1"); // 4
  resolve();
}).then(function () {
  // 微任务
  console.log("promise2");
});
console.log("script end"); // 5

输出顺序：

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

5. 执行任务

async function async1() {
  console.log("async1 start"); // 2
  await async2();
  // 微任务
  console.log("async1 end"); // 这里不会执行
}
async function async2() {
  console.log("async2 start"); // 3
  return new Promise((resolve, reject) => {
    reject();
    console.log("async2 promise"); // 4
  });
}
console.log("illegalscript start"); // 1

setTimeout(function () {
  // 宏任务
  console.log("setTimeout");
}, 0);

async1();

new Promise(function (resolve) {
  console.log("promise1"); // 5
  resolve();
})
  .then(function () {
    // 微任务
    console.log("promise2");
  })
  .then(function () {
    // 微任务
    console.log("promise3");
  });
console.log("illegalscript end"); // 6

输出顺序

illegalscript start
async1 start
async2 start
async2 promise
promise1
illegalscript end
promise2
promise3
setTimeout

6. 执行任务

new Promise((resolve, reject) => {
  resolve(1);
  new Promise((resolve, reject) => {
    resolve(2);
  }).then(console.log);
}).then(console.log);
console.log(3);

输出结果

1
2
3

3;
2;
1;

7. 执行任务

setTimeout(() => {
  // 宏任务
  console.log(1);
}, 0)
new Promise((resolve, reject) => {
  console.log(2); // 1
  resolve('p1');

  new Promise((resolve, reject) => {
    console.log(3); // 2
    setTimeout(() => {
      // 宏任务
      resolve('setTimeout2');
      console.log(4);
    }, 0);
    resolve('p2');
  }).then(data => {
    // 微任务
    console.log(data); // p2
  })

  setTimeout(() => {
    // 宏任务
    resolve('setTimeout1');
    console.log(5);
  }, 0);
}).then(data => {
  // 微任务
  console.log(data); // 4
});
console.log(6); // 3

输出结果

EventLoop

JS 是单线程的，同一个时间只能做一件事情
同步代码：立即放入 JS 引擎（JS 主线程）执行，并原地等待结果。
异步代码：先放入宿主环境（浏览器/Node），不必原地等待结果，并不阻塞主线程继续执行，异步结果在将来执行。异步任务等待时机到了以后把代码（回调函数）交给任务队列去排队执行。
每次事件循环就是执行栈里面代码执行完毕后，去查看任务队列里面是否还有其他任务需要执行，如果有，就按顺序依次执行。

展开全文 >>

使用 Travis CI 自动部署 Hexo

2016-11-18

Travis CI

Travis CI 是一个持续集成的平台，我们可以使用其自动构建部署的功能帮我们简化 Hexo 博客的部署流程。

为什么要用 Travis CI

因为懒。 what_can_i_say

Hexo 部署 Blog 到 GitPage 通常需要三部曲：

1
2
3

$ hexo clean
$ hexo g
$ hexo deploy

more >>

展开全文 >>

Node.js 中 child_procss 模块

2016-11-16

简介

Node.js 的单线程模型给了它无数的赞美，也带给它无数的诟病。单线程模型，让开发者远离了线程调度的复杂性，使用事件驱动也能开发出一个高并发的服务器；同样也是因为单线程，让CPU密集型计算应用完全不适用。

Node.js 中内建了一个 child_process模块，可以在程序中创建子进程，从而实现多核并行计算。

more >>

展开全文 >>

快速排序思想解决水桶问题

2016-11-16

水桶问题

假设给你n个红色的水壶和n个蓝色的水壶。它们的形状和尺寸都各不相同。所有的红色水壶盛水量都各不相同，蓝色水壶也是如此。但对于每一个红色水壶来说，都有一个蓝色水壶盛水量和其相同；反之亦然。
你的任务是配对出全部盛水量相同的红色水壶和蓝色水壶。为此，可以执行的操作为，挑出一对水壶，一只红色一只蓝色，将红色水壶灌满水，将红色水壶的水倒入蓝色水壶中，看其是否恰好灌满来判断，这个红色水壶的盛水量大于、小于或等于蓝色水壶。假设这样的比较需要花费一个单位时间。
请找出一种算法，它能够用最少的比较次数来确定所有水壶的配对。
注意:不可直接比较两个红色或者两个蓝色水壶，一次比较必须取一只红色一只蓝色。

more >>