node-delegates 是 TJ 大神所写的一个简单的小工具，源码只有 157 行，作用在于将外部对象接受到的操作委托到内部属性进行处理，也可以理解为讲对象的内部属性暴露到外部，简化我们所需要书写的代码。

安装和使用的代码在源码仓库都可以找到，这里主要先讲一下 API。

API

Delegate(proto, prop)

用于创建一个 delegator 实例，用于把 proto 接收到的一些操作委托给它的 prop 属性进行处理。

Delegate.auto(proto, targetProto, targetProp)

根据 targetProp 所包含的键，自动判断类型，把 targetProto 上的对应属性代理到 proto。可以是 getter、setter、value 或者 method。

Delegate.prototype.method(name)

在 proto 对象上新增一个名为 name 的函数，调用该函数相当于调用 proto 的 prop 属性上的 name 函数。

Delegate.prototype.getter(name)

新增一个 getter 到 proto 对象，访问该 getter 即可访问 proto 的 prop 的对应 getter。

Delegate.prototype.setter(name)

同 getter。

最近在做项目的时候碰到了一个奇怪的问题，通过 Vue.mixin 方法注入到 Vue 实例的一个方法不起作用了，后来经过仔细排查发现这个实例自己实现了一个同名方法，导致了 Vue.mixin 注入方法的失效。后来查阅资料发现 Vue.mixin 注入到实例的 methods 方法会被实例中的同名方法替换，而不会依次执行。于是我就有了查看源码的想法，进而诞生了这篇文章～

本文所用源码版本为 2.2.6

首先从 Vue.mixin 这个方法入手，打开 src 目录不难找到 mixin 所在的文件：src/core/global-api/mixin.js，其内容如下：

这篇文章是我阅读 Web Performance 101 之后的进行的粗糙的翻译作为笔记，英语还行的童鞋可以直接看原文。

这篇文章主要介绍了现代 web 加载性能（注意不涉及代码算法等），学习为什么加载性能很重要、有哪些优化的方法以及有哪些工具可以帮助我们对网站进行优化。

为什么性能优化很重要？

首先，加载缓慢的网站让人很不舒服！

最明显的例子就是当一个移动网站加载太慢的时候，用户体验如同观看一部恐怖电影。

本文源码地址：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 的资源请求。

不久前在公司写了一个基于 Hapijs 的后端项目，感觉这个框架很有自己的特点，跟 Express 和 Koa 的区别比较大，体现了配置大于编码的思想。用起来很方便，据说 Walmart 团队用这个框架扛住了黑五的流量，看起来在实际项目中也有可用性，推荐大家尝试一下～

有点跑题了，这篇文章主要写我在开发过程中所遇到的一个问题，以及我从这个问题所学习到的东西，然后我是怎么解决这个问题的。

之前写过一篇 Vue 异步组件的文章，最近在做一个简单项目的时候又想用到 React 异步组件，所以简单地了解了一下使用方法，这里做下笔记。

传统的 React 异步组件基本都靠自己实现，自己写一个专门的 React 组件加载函数作为异步组件的实现工具，通过 import() 动态导入，实现异步加载，可以参考【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）这篇文章。这样做的话还是要自己写一个单独的加载组件，有点麻烦。于是想找个更简单一点的方式，没想到真给找到了：Async React using React Router & Suspense，这篇文章讲述了如何基于 React Router 4 和 React 的新特性快速实现异步组件按需加载。

2018 年 10 月 23 号，React 发布了 v16.6 版本，新版本中有个新特性叫 lazy，通过 lazy 和 Suspense 组件我们就可以实现异步组件，如果你使用的是 React v16.6 以上版本：

之前看了一下 TypeScript 的知识，但是一直没有上手，最近开始结合 React 和 TypeScript 一起尝试了一下，感受还是很好的，所以写一下笔记。

环境配置没有参考其他东西，就是看了下 Webpack 和 TypeScript 的官方文档，使用 Webpack 进行构建还是比较简单的。

环境构建

创建一个项目目录，然后切换当前目录到项目目录下：

1

$ mkdir tsc && cd ./tsc

然后使用 npm 初始化项目：

1

$ npm init -y

然后创建一些项目文件：

1
2

$ mkdir build src
$ touch build/webpack.base.conf.js build/webpack.dev.conf.js build/webpack.prod.conf.js index.html src/index.tsx tsconfig.json

接下来，就可以安装一些依赖了：

1
2
3

$ npm i webpack webpack-cli webpack-merge webpack-dev-server -D
$ npm i html-webpack-plugin clean-webpack-plugin typescript ts-loader style-loader css-loader @types/react @types/react-dom -D
$ npm i react react-dom -S

可以注意到我们没有安装 babel 转译器，如果我们只写 .ts 或者 .tsx 文件，可以不安装 babel。如果要转译处理 .js 文件的话，还是要使用到 babel。

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 当前遍历的数组

关于 Decorator 到底是 ES 6 引入的还是 ES 7 引入的我也不是很明白了，两种说法都有，这种问题懒得纠结了……在用的时候发现这个东西很好用，平常用处可能不大，但是结合 React 就很好使了。接下来就讲一讲。

一、环境搭建

我搭建了一个 React 开发环境，结合 babel 的插件——babel-plugin-transform-decorators-legacy一起使用，这个插件可以让你写 Decorator。

GitHub 地址：https://github.com/zhongdeming428/HOC

可以通过如下命令克隆：

1

$ git clone https://github.com/zhongdeming428/HOC.git