Mofei作品@2017 - 世间本无其他，都是奇迹

2017 过得很满，甚至有点过满。年初先去了新西兰自驾，5、6 月办婚礼，老家的新房也交房了，8、9 月和一起折腾的小伙伴去了泰国，年底还“假装”去了一趟贝加尔湖。等到 2018 元旦，朋友圈都在写“再见 2017”，我反而没法立刻静下来，只能拖到春节前后再写。

周末本来是想留给 Bookost 的，但最后还是先回头看看这一年做了什么。写总结这件事我一直不太擅长，所以就按项目来。

@2017 之非常规项目

这一年的一个变化，是我开始不再只盯着眼前那点“装修”，而更在意底层的协作、构建和可视化工具。换句话说，我关心的东西开始往“整栋楼”靠。

所以，除了本来就该做好的工作，我主要记录几个额外折腾出来的项目。

1. Marine （楼宇对讲机系统）

Github 地址: https://github.com/huiyan-fe/marine

Marine 最初是为了解决 React 不同模块之间传数据的问题。我当时觉得现成方案学习成本偏高，就按自己的理解写了一个更简单的 flux 风格工具，目标很朴素：API 清楚，数据流别乱。

让我意外的是，没怎么宣传，居然有公司外的人开始用。这个反馈比功能本身更让我高兴。

它本质上更像一个 Pub/Sub 模型。最简单的用法大概是这样：

1.1 监听

import { Store } from 'marine';

Store.on('Demo.hello', StoreDate => {
    console.log(StoreDate.data)
});

2.1 发送数据

import { Action } from 'marine';

Action.def('Demo');
Action.Demo.emit('hello', 'Hello Marine');

这样就能把消息从一个模块传到另一个模块。说到底它不神奇，就是把我自己觉得麻烦的地方收拾顺了。这个项目我还补了比较完整的单元测试，发稿时覆盖率接近 100%，至少自己用起来比较放心。

总评：★★★★★

内容

评价

文档完善

★★★★☆

完成度

★★★★★

稳定性

★★★★★

2. Keeler（自动脚手架系统）

Github 地址: https://github.com/huiyan-fe/keeler

Keeler 主要是为了解决前端项目初始化时配置过多的问题。一个典型项目通常要处理这些事：

1. CSS 编译：PostCSS、SASS、LESS 等
2. ES 编译：Babel
3. Bundle：Webpack、Gulp、Rollup
4. 模板解析：JSX 等
5. 发布相关：Hash、压缩、图片压缩等

除此之外还有更多琐碎配置。真正开始一个新项目时，时间往往不是花在写业务上，而是花在搭环境上。Keeler 想做的就是把这段时间压缩掉。

使用说明如下

# 1. 初始化
keeler -i
# 2. 依赖安装
npm install
# 3. 运行项目
npm run dev

执行上面三行之后，就能得到一个 React + PostCSS(Sass) + Webpack 的环境，浏览器会自动打开预览，CSS 或 JS 一改就会刷新。

如果你想新增一个页面，只需要：

keeler add pangename

另外，Keeler 不用你手动配 Webpack 入口，它会自动扫描 *.entry.jsx、*.entry.css 之类的文件并加入编译。这样一来，新项目的启动速度会快很多。

还有一点值得说：团队里大多是 Mac，Windows 基本没怎么测。后来有新同学开始用 Windows，我才把这块补上，让它也能正常跑。

总评：★★★★☆

内容

评价

文档完善

★★★☆☆

完成度

★★★★☆

稳定性

★★★☆☆

3. Visual（外墙自动粉刷系统）

Github 地址: https://github.com/zmofei/visual

Visual 来自百度地图一个叫“北极星”的诱导屏项目的底层渲染。它主要负责在画布上画点、线、面、圆、弧和更复杂的图形，也支持选中后移动、缩放这些操作。

最开始我希望把它尽量从业务里抽出来，做成一个更通用的工具库。现在回头看，它已经能完成不少基础工作，后面还有继续往外扩的空间。

总评：★★★☆☆

内容

评价

文档完善

★★★☆☆

完成度

★★★☆☆

稳定性

★★★☆☆

4. Visualization（楼宇物联网与广告技术）

Github 地址：不能告诉你（其实不在 github 上）

除了上面这些，2017 年我还在可视化上做了不少尝试。这一块本身就复杂，学习成本、业务需求、市场泡沫都掺在一起，后面有机会再单独写。

简单列几个做过的东西：

• 路口车辆的可视化

可以同时显示成百上千条车辆在同一路口或同一段路上的轨迹。

• 实时红绿灯

可以按照路口的实际情况展示实时的红绿灯状态，博客里之前也单独写过实现细节。

• Mapv-editor

这是一个经历了很多波折的项目，不展开说太多了。可以直接看 mapv，也是一个开源项目，地址是 https://github.com/huiyan-fe/mapV-editor

@2018

2018 我本来想写点鸡汤，但写到这里已经没那个状态了。那就简单说一句：正经工作还是要做好，周末也别总空着。

顺便说下，最近两三个月周末我在做什么。

1. Bookost

你书架上是不是也有那种看过一遍就不太会再翻的书？或者有本书一直想和别人一起分享？Bookost 想解决的就是这个场景。

2. iTrace

如果你也喜欢旅行，iTrace 可能会是个有用的小工具。我很早以前就想要一个能持续记录轨迹的设备，还买过不少 GPS 追踪器。后来发现“世界迷雾”这类软件挺有意思，能记录轨迹，而且耗电不高，但它只支持导入不支持导出。正因为这个遗憾，我才决定自己做一个更顺手、也更省电的轨迹记录工具。

未来继续做点事。

“世间本无其他，都是奇迹。” — 黄灿然《奇迹集》