本文源码地址：https://github.com/zhongdeming428/snabbdom

对很多人而言，虚拟 DOM 都是一个很高大上而且远不可及的专有名词，以前我也这么认为，后来在学习 Vue 源码的时候发现 Vue 的虚拟 DOM 方案衍生于本文要讲的 snabbdom 工具，经过阅读源码之后才发现，虚拟 DOM 原来就是这么回事，并没有想象中那么难以理解嘛～

这篇文章呢，就单独从 snabbdom 这个库讲起，不涉及其他任何框架，单独从这个库的源码来聊一聊虚拟 DOM。

在讲 snabbdom 之前，需要先学习 TypeScript 知识，以及 snabbdom 的基本使用方法。

一、snabbdom 核心概念

在学习 snabbdom 源码之前，最好先学会用 snabbdom，至少要掌握 snabbdom 的核心概念，这是阅读框架源码之前基本都要做的准备工作。

以下内容可以直接到 snabbdom 官方文档了解。

说起跨域的解决方案，总是会说到 JSONP，但是很多时候都没有仔细去了解过 JSONP，可能是因为现在 JSONP 用的不是很多（多数时候都是配置响应头实现跨域），也可能是因为用 JSONP 的场景一般都是用 jQuery 来实现，所以对 JSONP 知之甚少。

JSONP 的本意是 JSON with Padding，即填充式 JSON。为什么叫填充式呢？因为服务端不会直接返回 JSON 格式数据给客户端，它会拼接成一个字符串，这个字符串被拿到客户端执行。这是对于 JSON 的一种应用。

JSONP 的原理是什么？

发明 JSONP 的老头子们发现虽然同源策略（CORS）限制了 ajax 对于其它服务器的访问，但是并不能限制 HTML 的资源请求。

Array.prototype.reduce 是 JavaScript 中比较实用的一个函数，但是很多人都没有使用过它，因为 reduce 能做的事情其实 forEach 或者 map 函数也能做，而且比 reduce 好理解。但是 reduce 函数还是值得去了解的。

reduce 函数可以对一个数组进行遍历，然后返回一个累计值，它使用起来比较灵活，下面了解一下它的用法。

reduce 接受两个参数，第二个参数可选：

1
2

@param {Function} callback 迭代数组时，求累计值的回调函数
@param {Any} initVal 初始值，可选

其中，callback 函数可以接受四个参数：

1
2
3
4

@param {Any} acc 累计值
@param {Any} val 当前遍历的值
@param {Number} key 当前遍历值的索引
@param {Array} arr 当前遍历的数组

已经快一年没有碰过 React 全家桶了，最近换了个项目组要用到 React 技术栈，所以最近又复习了一下；捡起旧知识的同时又有了一些新的收获，在这里作文以记之。

在阅读文章之前，最好已经知道如何使用 Redux(不是 React-Redux)。

一、准备环境

为了更好的解读源码，我们可以把源码拷贝到本地，然后搭建一个开发环境。Redux 的使用不依赖于 React，所以你完全可以在一个极为简单的 JavaScript 项目中使用它。这里不再赘述开发环境的搭建过程，需要的同学可以直接拷贝我的代码到本地，然后安装依赖，运行项目。

1
2
3
4
5

$ git clone https://github.com/zhongdeming428/redux && cd redux

$ npm i

$ npm run dev

最近几天在系统的复习排序算法，之前都没有系统性的学习过，也没有留下过什么笔记，所以很快就忘了，这次好好地学习一下。

首先说明为了减少限制，以下代码通通运行于Node V8引擎而非浏览器，源码在我的GitHub，感兴趣的话可以下载来然后运行试试。

为了方便对比各个排序算法的性能，这里先写了一个生成大规模数组的方法——generateArray：

1
2
3
4
5
6
7

exports.generateArray = function(length) {
    let arr = Array(length);
    for(let i=0; i<length; i++) {
        arr[i] = Math.random();
    }
    return arr;
};

只需要输入数组长度，即可生成一个符合长度要求的随机数组。

最近在读一本设计模式的书，书中的开头部分就讲了一下 JavaScript 中的继承，阅读之后写下了这篇博客作为笔记。毕竟好记性不如烂笔头。

JavaScript 是一门面向对象的语言，但是 ES6 之前 JavaScript 是没有类这个概念的。即使 ES6 引入了 class，也只是基于 JavaScript 已有的原型继承模式的一个语法糖，并没有为 JavaScript 引入新的面向对象的继承模型。

但是 JavaScript 是一门非常灵活的语言，为了实现类和继承，JavaScript Developers 已经把原型玩出了花，下面介绍一下 JavaScript 中的继承模式。

JavaScript 中已有的继承模式包括以下六种：

• 类式继承
• 构造函数式继承
• 组合式继承
• 原型式继承
• 寄生式继承
• 寄生组合式继承
  Read More