持续高潮的2017过去了。今年的基调起的格外的高，一上来就是3月的新西兰自驾之旅，然后5、6月的婚礼、老家的新房也交房了，接下来的8、9月和一起奋斗的小伙伴们去了趟泰国，最后又假装去了趟贝加尔湖。如此之high，以至于到了2018元旦这个最佳年度总结时间，刷着充满“再见2017”的朋友圈，也只能计划着春节假期的时候静下来写点什么。

难得的一个周末，本来计划是把时间给Bookost（Bookost是谁？就不告诉你！）的，但是冥冥之中似乎有个声音建议我在继续前行之前停下来看看身后的风景。但是，作为一个冷漠、固执、腹黑（==这是我么????。。。管他呢反正网上都这么说天蝎座）的天蝎男来说，对于这样无理的建议当然只能 欣...然...接...受了，毕竟这是我自己的想法????。

不正经的说了这么久了，还是直接步入正题吧，如果你的时间比较有限建议你直接忽略上面的文字从下面开始看起，虽然我知道你已经看过上面的文字了（这就是传说中的腹黑????????）。。。

@2017之非常规项目

可能是由于越来越大的原因吧（当然，我是指年龄，你也可以理解成胆子什么的????。。），往日忙碌的搬砖过程中，已经不由自主的把自己的关注点从关注如何按照图纸装修好一个房间，转变到了整个大楼。如何才能让整个大楼更快更稳定的拔地而起呢？如何才能让不同的房型的构造成本和效率趋于一致高效呢？甚至有些时候，还会和工地开门的大爷吐槽：“工业用电明明是需要380v的，为什么供电局给到的却是220v，甚至有时候还让工地自己发电”。

所以，这次总结刨去本来就应该做的很精致的装修工作外，聊聊我还做了些其他什么吧：

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

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

Marine最初是用来在React的不同模块之间传递数据。

写它的原因是React本身的数据传递十分的麻烦，外加refulx、redux之类的工具学习成本比较高（我是不会告诉你当时我也不是很能驾驭reflux的????），所以就按照自己的理解去实现了一个最简单的flux。其所追求的是API足够简洁、并且数据的传递也不会感觉混乱。

让我感到幸运的是，在我没有进行任何宣传推广的情况下，居然自主的出现了一些公司外部使用者，就凭这一点足以让我开心的像个孩子一样(→????)，感谢这些可爱的人们。

Marine严格意义上来是一个Pub/Sub模型，创建对象时候，Marine会在全局保存，并且动态的追加一些风骚的全局方法，来满足用户对快的追求。

举个最简单的使用例子：

1.1 监听

在任何文件中通过Store.on就可以监听了，够简单不？（其实on监听的方法还有一些有意思的语法糖文档里有哦）

// 引入 Store
import { Store } from 'marine';

// 监听Demo Action的hello频道
Store.on('Demo.hello', StoreDate =>{
    console.log(StoreDate.data)
});

2.1 发送数据

同样是是在任何文件中，通过Action.def就可以定义了：

// 引入  Action, Store
import { Action } from 'marine';

// 定义名为Demo的Action
Action.def('Demo');

然后还是在任意文件中就可以通过Action[定义的名字]去调用了

// 引入  Action, Store
import { Action } from 'marine';

// 分发消息
Action.Demo.emit('hello', 'Hello Marine');

这样上面的第一个文件中的监听回调就会被调用，你的数据就已经靠谱的传递到了对于的模块中了，是不是很神奇？不管怎么样反正我用起来确实是很爽的，并且，这个项目写了完善的单元测试，截至发稿时覆盖率达到了99.999%以上，可以放心使用。

总评：★★★★★

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. 发布相关：CSS、JS的Hash，压缩，图片的压缩等

除了上面列出的之外，可能还有许多并没有列出来的东西。然后带来的问题是，我们开始一个新项目的时候，可能会花上很长时间（1-2天？或者做到一半卡壳了，然后时间还要增加）去进行工具的配置。Keeler的诞生就是为了解决这个问题！

使用说明如下

# 1. 初始化
keeler -i
# 2. 依赖安装
npm install
# 3. 运行项目 (发布项目 可以用 npm run build)
npm run dev

执行上面的3行代码之后，你就会得到一个最新的React.js + postcss(sass) + webpack 的环境，并且会自动调用浏览器打开对应的页面用以预览，任何文件的修改（比如CSS，JS）浏览器都会自动刷新。

当然了如果你想新增一个页面（通常情况下你需要增加HTML，CSS，JavaScript，然后把CSS、JS引入到HTML中，不难但是繁琐），只需要执行下面的命令：

keeler add pangename

另外，各位在使用webpack的时候，一定有印象要不停地去配置入口文件，在keeler的系统中，虽然使用的是webpack，但是你再也不需要去配置webpack入口文件了，因为keeler会自动扫描所有类似 *.entry.jsx ，*.entry.css的文件，并把它加入到编译入口的配置里面。所以如果想要新增一个编译入口，只需要写成用entry.**命名就可以啦。更有意思的是，你的js和css会自动的引入到html中，也免除了你去配置html引入css，js的工作。

最后如果你的项目有很多页面，整体编译一次可能需要很长的时间，但是往往在开发的时候，只会关注一个页面，那些等待其他页面编译的过程简直就是慢性自杀，keeler也可以解决这个问题。对于很多页面比如PAGEA,PAGEB,PAGEC的话，通常情况下执行 npm run dev 会去编译这3个页面，但是如你只需要编译PAGEB的话，直接执行下面的代码就可以了：

PAGE=PAGEB npm run dev

另外多提一句，由于开发的过程中我们团队成员使用的多是mac电脑，Windows基本上没有进行任何的测试，这里要感谢团队新加入的一位同学，在她的使用下，我们逐步的做了对于Windows的支持，使得keeler在Windows下也能正确的运行。

总评：★★★★☆

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

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

Visual来自百度地图最新开放的一个名为“北极星”的诱导屏项目（项目介绍连接）的底层渲染，主要的功能是可以在画布上进行点、线、面、圆、弧以及复杂图形的绘制，并且绘制的图形可以方便的直接通过鼠标去选取，改变位置，改变大小等功能。最初设计的初衷是尽可能的把Visual脱离项目需求，做成一个通用的工具类库，当然实际中我们也是遵循这套标准来逐步的推进这个项目，目前这个类库可以实现很多基础的功能，虽然功能并不是特别的完善，但是我个人对其后续发展空间表示很乐观。

总评：★★★☆☆

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

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

除了上面列出的一些东西外，疯狂的2017年，我还在可视化上进行了大胆的尝试，这一块比较复杂（包括学习成本、行业需求、泡沫什么的），有空我们单独拿出一个篇幅来讨论。

简单列一下我做了什么吧：

• 路口车辆的可视化

可以同时显示成百上千条车辆在同一个路口或者是同一段路上的轨迹，看起来确实还像那么回事~

• 实时红绿灯

可以按照路口的实际情况展示实时的红绿灯状态，我的博客中有篇文章提到了这个功能的实现的细节。

• Mapv-editor

一言难尽，经历各种磨难的项目，不多说了，看链接吧 mapv，另外这确确实实也是一个开源项目，项目地址 https://github.com/huiyan-fe/mapV-editor

@2018

2018，本来想打打鸡汤的，不过现在实在是困到了已经不知道自己在写什么了的境界了????，就假装我已经打过了鸡血了吧~

本分的工作还是要好好完成的，工作之余呢还是希望能发布几个业余做的小程序也好、APP也好，至少“搞点事情”吧????。

顺便悄悄的透露一下，最近2、3个月的周末我都在做些什么。

1. Bookost

在你的书架上，是不是躺着一些看过一遍可能再也不会看的书？又或者有没有这样的一本书你特别想和别人一起分享？Bookost将会帮你解决这个问题。

1. iTrace

如果你和我一样是个旅游爱好者的话，iTrace可能也会成为你得力的助手。很早很早之前，我就想有这样一个设备可以随时记录我的轨迹，当时还买了不少的GSP追踪器。 偶尔的一天突然发现了“世界迷雾”这款类似游戏的软件，可以随时记录你的轨迹，而且iPhone上挂一整天只会占用10%左右的电~ 但是很遗憾这款软件只支持导入，却不支持导出，也正是应为这个原因，我决定做一款好用的，并且省电的GPS记录软件。

未来加油！

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