React 项目架构设计和状态管理方案演进

最近承担了一个项目的独立开发工作,最早还是使用 Redux 来做的,但是后面我改成了用 Mobx 去做。原因其实主要是两点: Mobx 对 TypeScript 支持非常完美,而 Redux 的支持略痛苦。 Mobx 更加灵活简洁,开发更加高效。 这是我目前为止做的最大的一个 React 项目,而且还经历了 Redux 到 Mobx 的重构。这篇文章主要对 React,Redux 以及 Mobx 在项目中使用上发表一些我自己个人的看法。 React

2017 搬砖报告

一年很快就又要过去了,去年年底对 2016 做过一些小结,今年也稍微写点东西吧。这篇文章是自己的一些总结,写出来是自己对这一整年的梳理和记录,没有什么干货。 今年感觉对我而言意义蛮大的,从今年年初考完试之后,大学课程基本就完结了,也就是在今年年初开始去实习。先是在一家小有规模的创业公司实习,实习了半年,主要是 Node.JS 和 Vue 这两块。在 7 月底的时候过去另一家初创公司,主要负责 Node.js,也接触了一下 React Native 的开发,这份实习是比较轻松的,可以远程工作,工作时间也非常弹性。

Redux 异步中间件

上篇博客已经提到了 redux-thunk, redux-promise 和 redux-saga 这三个库. 他们加上 redux-promise-middleware 都是 Redux 异步 Action 的常用的解决方案. 本文就结合其源码来分析他们的异同和优缺点. redux-thunk redux-thunk 是 Redux 作者 Dan 写的中间件. 通过使用该中间件, Redux 支持 dispatch 一个函数(actionCreator), 函数内部可以继续 dispatch. redux-thunk 的源码关键的就这几行: function createThunkMiddleware(

Redux 源码学习

Redux 和 Mobx 是 React 常用的状态管理库. 简单的说, Mobx 是把数据变为可观察, 每个数据在引用的时候都会建立依赖, 当数据变化时, 会去触发依赖高效的进行更新. Redux 则手动管理, 通过 dispatch action 去触发 reducer 变更 state, React 接受新的 state 后更新视图, 一切都自己管理, 所以说是可预测. 我最早接触的 Redux, 不过并没有给我太多好感, 因为感觉写起来太麻烦了, 那时候我还在写 AngularJS,

值得一试的 TypeORM

TypeScript 是一门静态类型语言, 这是我认为的其最大的特点. 在使用 TypeScript 编写的项目中, 应该尽可能使用由 TypeScript 编写的类库或框架. 在传统的使用 JavaScript 编写的 Node.js 后端项目中,比较有名的两个 ORM/ODM 是 Sequelize 和 Mongoose, 但他们对 TypeScript 的支持是很差的, 并不说运行不了, 但是无论是写法还是静态检查上面都很弱. Sequelize/Mongoose 大量使用了对象和函数, 而不是类. 举个例子, 在

十月杂谈

最近把自己的一些项目整理了下, 该丢的丢, 该优化的优化, 该调整的调整. 换了一个新服务器, 旧的服务器打算用来搭游戏服用. 原来的服务器其实跑了很多我自己的一些个人项目, 不过由于种种原因不想迁移过来了. 一个是书籍购买的网站, 丢掉的原因是运行不起来... 因为当初那个项目后端没有对依赖进行锁定, 导致后面重新安装的时候, 运行的时候就报错了... 如果是 node 的话还好, 关键后端是 python, 修起来估计不简单. 遂抛弃. 还有一个是 RSS 订阅器, 丢掉的原因是这货太占空间... 因为它每天都要去抓取一堆文章写到数据库... 加之我现在已经不怎么用了. 而且这个项目一开始并不是跑在 Docker 上面, 而是用 PM2 运行. 改起来也不是很方便.

关于 Node.js 测试

单元测试是大型 Web 项目必不可少的部分. 测试和其他部分一样, 从一开始就要设计好实现, 否则可能就可能不断给自己买埋坑. Node.js 的测试一般由测试框架和断言库两部分组成. 测试框架用的比较多的是 mocha, 我也用过一阵子的 ava. mocha 大家可能都比较熟悉, ava 可能实际使用的不多. 这两个其实差别也有点大, ava 的话是每个文件都开一个进程执行, 并且文件内的测试默认是并发执行, 听起来就很快. ava 的写法也比 mocha 简洁很多. ava 自带断言库, 并且支持异步断言(assert 通过插件也可以实现, 但没有 ava

Vue 双向绑定原理

以前写 AngularJS 的时候曾经分析过其双向绑定脏检查机制, 转向 Vue 开发也挺久了但一直没有去研究其源码, 也就前段时间去研究下了其 nextTick 的实现. 今天主要看了 Vue 双向绑定的机制, 感觉 Vue 的代码比起 AngularJS 要容易看很多了, 不过东西也挺多的, 代码质量不错, 写篇文章巩固下. 源码分析 Vue 实现双向绑定有一个非常重要的方法就是 defineReactive, 搞懂这个方法对理解 Vue 的双向绑定帮助非常大. 文章源码篇幅比较多, 但其实代码并不难理解. defineReactive 大致过程如下: (注: 结合我看的最新的源码,

高并发下的抽奖机设计实现

最近在公司负责一个营销系统的后端实现. 其中有一部分就是涉及到抽奖机. 为了尽可能让抽奖机能容纳更大流量的瞬时访问, 减少不必要的开销, 同时让抽奖机具备一定的可扩展性, 我花了很多时间去想着改进它. 总结下在这个抽奖机中的一些经验. 如何判断活动是否已经开始或者已经结束? 活动有一个开始时间和结束时间. 当用户参与一个活动的时候, 每次从数据库查询出活动时间和结束时间然后和当前时间比对这样显然是可以的. 但是由于我们并不能确定用户请求该接口的时机, 所以每次都要去查询. 这样带来的开销就比较大, 况且你还要考虑如果是一个秒杀活动, 高流量下你还要每个访问都查询数据库就显得不实际了. 因此我们可以考虑存放缓存. 当活动创建时, 保存活动时间到缓存. async setActivityIdLifeCycle (activityId: number, startAt: string, endAt: string): Promise<void> { await Promise.

使用 TypeScript 开发后端应用

大多数人接触 TypeScript 开发会遇到的一个问题就是很多原先使用的库都是用 JavaScript 写的. 虽然在 TypeScript 项目中也可以使用他们, 但是有些库的用法还是面向过程形式的, 就和我们在 TypeScript 中用面向对象的写法有点格格不入. 有些库由于比较小众可能不存在声明定义文件, 这就导致了编辑器没法进行静态类型检查. 使用 TypeScript 应该抛弃原型链, 尽可能多的使用面向对象的方式来编程. 尽可能多的使用装饰器. 如果这么做显然就和我们传统的使用 JavaScript 编程有了差异. 那么, 怎样优雅的使用 TypeScript 呢? TypeScript 生态不乏很多优秀的库, 例如关系型数据库 TypeORM, 依赖注入 inverisifyJS 和

Node.js 垃圾回收机制

在计算机科学中, 垃圾回收是一种自动的内存管理机制. 当一个电脑上的动态内容不再需要时, 就应该予以释放, 以让出内存, 这种内存资源管理, 成为垃圾回收. 垃圾回收期可以让程序员减轻许多负担, 也减少程序员犯错的机会. 垃圾回收最早用于 LISP 语言, 由 John McCarthy 提出. 常用的两种内存回收机制 引用计数法 引用计数法是最简单的垃圾回收算法. 此算法把 "对象是否不再需要" 简化定义为 "对象有没有被其他对象引用". 如果没有引用指向对象, 对象就被垃圾回收机制回收. 引用计数法的限制在遇到循环引用的情况, 如下: function f

基于 redsocks 实现全局 TCP 流量代理

在 Arch Linux 上使用 Shadowsocks, redsocks, iptables, pcap-dnsproxy 搭建一个舒适的科学上网环境~ 对于我来说, 系统安装好之后的第一件事就是翻墙. 我们使用 shadowsocks + redsocks + iptables + pcap-dnsproxy 来实现全局自动代理. yaourt -S shadowsocks redsocks-git pcap-dnsproxy-git 以上命令同时安装了三个软件. iptables 已经自带不需要安装. 接着到 /etc/shadowsocks 文件夹下创建一个新的配置文件, 配置你的 shadowsocks. 然后 sudo

Arch Linux 安装和配置小记

本文章涉及 Arch Linux 的安装, 常用软件和配置. 适用于在 UEFI 上面进行引导安装. 安装 联网 第一件事当然是联网啦, 如果是无线网络的话使用 wifi-menu. 分区和挂载 新手安装 Linux 可能会在分区这里感到很疑惑. 其实很简单, 通常我们只考虑为 Linux 分三个或四个区, 三个区的情况分别为 boot 分区, 根分区, home 分区以及交换分区. boot 分区是存放启动和引导的; home 分区是存放用户个人文件夹的, 它不是必选的, 但是如果有专门的

浅谈 co 库

最近在写一个静态博客框架. 但不同于 hexo 之类的, 框架本身提供了博客书写和管理功能. 后端同样使用了 Koa2 来做, 归功于 Arch, 我已经在使用 Node 7.2 了, 不过好像默认还是不能支持 async 和 await , 经查发现是要输入参数开启的=.=. 不过当时第一时间并没有想说去加参数解决, 而是使用了 co 这个库... 虽然也可以用 babel , 但是通过 babel 运行代码很难调试. co 用起来其实和 async 差不多,