Works

• Private

• Junjia Ni
• Allen Zhong

项目旨在为天文爱好者提供一个网上活动的平台。可以进行内容分享，活动报名，问卷调查等各项社团活动事宜。 整个站点基于 WordPress 开发，以插件的形式注入相应的功能。目前还在开发中。

因为还在开发中，还没有完全做完。所以只谈部分感受。 PHP是世界第一语言（这个真是太可怕了） 。 WordPress 整个站点的设计还是很不错的，很值得去研究一下。当然我目前也只懂皮毛，只能写出可以跑的 PHP 的代码，不敢妄自菲薄。 WordPress 的扩展功能十分强大，其自定义部分设计的还是很有意思的。基于其自定义功能可以做出类似于 CMS 之类的平台， 优势在于不需要你从头开发，减少了很多的开发量，而且你还可以复用其海量的主题。这样子的 WordPress 就不仅仅是一个 Blog 框架了。 最后说一个令我兴喜的事，WordPress 官方团队开始了迁移到 Node 的实验，这是项目地址 Automattic/wp-calypso ， 有兴趣还可以看一下这篇文章 the-story-behind-the-new-wordpress-com 和 这篇文章 Thoughts on Calypso, WordPress and JavaScript。

• Github

• Junjia Ni

一个用 Javascript 实现的键盘组合键的库。用于实现类似于 Gmail 邮箱内快捷的效果。体验地址
目前暂时只支持组合键触发的功能。连续按击的功能暂时还没有实现（比如，连续按2次 A 可以触发页面跳转等。）

最初是看到这个 答案 ，萌生了写一个组合键的库，方便任意页面实现组合键的功能。还有一点就是被答主的答题思路给震惊，悄悄地学习了一下。

That isn't the most readable snippet. Readability's important, so you could try something like this to make it easier on the eyes.

非常好的思路，将规则”可视化“了，便于人阅读和理解。有兴趣可以去看看这个 答案 以及答案下面的评论。

其实核心思想就是将规则可迭代化，每次检测的时候遍历之。匹配触发回调，不匹配则继续，直到结束。 然后这个思路不仅仅被我用在键盘组合键功能的实现上，还用在了一个小型前端路由的实现上。（参考代码）

这个真是状态机的优美实现之一。

BTW，这里有一个缺陷。如果使用了 alert/confirm 等函数，并且在弹窗之前用户按着键，弹窗之后松开键，就会触发一个 bug，表现为用户之后按任意键，都会和弹窗之前按的键组合。 所以，开发者要么不用 alert/confirm 等会使 Tab 失去焦点的函数，要么在 alert/confirm 后面的调用 clearKeys() 函数。推荐前者。

• Github

• Junjia Ni

tampermonkey 小插件
增强 Youdao Dictionary Web版 的功能。
增加词源解释，快捷键发音功能。同时去除广告，优化显示等。

写这个项目中，调试最久的就是 iframe 标签的事件透传功能了。

背景：词源解释这个是从词源网站 HTML 代码中截取的，本身带了外联 CSS 样式，为了不影响有道网站本身的 CSS 样式，所以选择了使用 iframe 标签来包装。 最后显示的效果很完美，但是点击里面的链接会只显示在 iframe 里面。另外， <a> 标签的 href 如果是相对路径，点击之后会跳转到 Youdao 域下面。 这个不是我想要的。于是想了一个 Hack 的方法。遍历所有 <a> 标签中的 href ，将其值设置成绝对路径。 同时在 iframe 外层，也就是主页面注册一个回调函数 window[xxxx]=function () {} ，在 iframe 中调用 parent.xxxx 。 这里一开始想多了，认为注册到 window 会污染 Youdao 本身的页面，于是我写了一个 makeId ，用于生成随机函数的名字，避免污染。 但稍微看了一下 tampermonkey 代码，发现其本身在执行 Javascript 代码的时候，创建了一个类似沙盒的机制。所以我之前的担心白担心了，还让代码变的复杂了。

其实如果 Google Translate Extension 能够识别 iframe 中的内容，就没有接下来的问题了。于是，我天真的认为：捕捉 iframe 中的选择事件， 把选中的单词传递给主页面，一切都能迎刃而解。但事实给了我一记响亮的耳光。最终我还是没有能够实现这个功能，只是曲线救国了一下，自己显示小按钮，点击跳转单词页面。 而且，我在实现的时候还搞的及其复杂，把 iframe 的事件透传到了主页面处理。我现在觉得最好的方式就是 iframe 自己内部处理。

在开发的过程中，主要了解和学习了 Event:selectionchange 和 KeyboardEvent 以及 iframe 的一些特性。

总结，发现自己在开发的过程中缺乏设计和大局观，（就如同自己的人生没有设计，过的一塌糊涂！）。写到哪里算哪里，这样做之后，结果如这个插件一样，烂。

以上。

• Alibaba-Group

• Junjia Ni

⽤户通过管理界⾯，实现对多块屏幕的显示控制系统。

• Server 服务端是⼀个Node应⽤，具备⾼并发的能⼒。通过Websocket和客户端建⽴通信。使⽤ MongoDB 存储结构化数据。
• Client 客户端是⼀个 ChromeApp。使⽤ React 框架构建，可以快速开发⾃定义形式的数据展示界⾯。
• View ⽤户界⾯，使⽤ Angular 框架构建。提供⽤户管理系统的界⾯，显示系统运⾏情况。

开发这套系统，使用了当时最新的前端开发技术。新手入门，好多坑啊。那段时间几乎每天都要写代码、研究代码到好晚。其实也是自己作。 现在来看过去，觉得最惨的就是没有用 babel/babel 编译工具，而是使用了 google/traceur-compiler ，浪费了好多时间。 （现在已经好久没有更新了。啊，滚滚的历史长河水。） 但具体有哪些坑呢？容我想想。

那段时间感觉整天都在写 JS , JS 的姿势水平有了很大的提高。有什么提高呢？感觉开始喜欢 HTML (开个玩笑)。

主要提高点个人感觉在熟悉程度上，你问我这个有什么用？ ，╮(╯▽╰)╭ 母鸡

• Chrome App/Extension API 熟悉程度
• Nodejs/Koajs 服务端开发熟练度，尤其是对于 流 、 中间件 和所谓的 面向切片编程 的理解
• WebSocket 协议
• MongoDB 熟悉程度
• ES6:yield 等新特性的熟悉程度。（可以参考这篇：JavaScript-Cookie）

• Alibaba-Group

• BeiFeng
• HuanTong
• Yongnan Zhu
• Junjia Ni

⽤户通过⾃定义数据源、⾃定义图表样式和显示布局，⾃动⽣成报表， 并⽀持订阅、管理等功能的系统。 前端用 Nodejs 渲染，后端 Java 处理具体的业务逻辑。数据库使用了集团统一的数据库池。

当时碰到的一个最头疼的问题就是登陆问题，内部所有有页面的应用都要接入 统一接入层 （现在怎么样了呢？）。 理论上来讲，使用其相应的 客户端SDK 就可以很快接入。 嗯，事实也是这个样子的，后端通过提供的 java-sdk 很快完成接入（有多快？取决于开发者的能力）。 但是，现在有了一层渲染层。用户请求是先经过这个渲染层，之后再到达 java 处理逻辑。 后端是被剥夺了页面渲染能力的，也就是说不能直接给用户提供登陆页面。而 nodejs 层的认证信息又不能直接给 java， 因为 java 不认。

于是，我开启了我的作死技能。研究统一接入层的协议，自己模拟这个过程。来欺骗后端的 java。顺带看完了 java-sdk 的实现。 由于是公司内部系统，具体细节不能透露。我只能给一个通用的流程图。

另外，差点死在了 Koajs 的异步上，不过最后明白了 co-yield 的实现，也就没有什么问题了。

最后就是做好备份和监控。

• Source Code

• Peng Liu
• JohnChain
• Junjia Ni

⻝⽤菌养殖环境的 控制 、 管理 、 展示 系统。主要分成 硬件层-控制决策层-显示层 。

• 硬件层：将各传感器采集上来的数值转发给控制决策层；执⾏指令，控制硬件设备⼯作。（PLC/C/Lua）
• 控制决策层：接收并存储上传的传感器数值；分析数据并⾃动下发控制命令，调节养殖室环境。(Python)
• 显示层：可视化当前养殖室内环境状况；提供相应的管理界⾯供养殖⼈员实时调控。(Django)

我在其中主要负责显示层功能的实现

(⊙o⊙)？，难点？那就是太年轻了。这个是大学毕设，当时什么都不懂，却又是一副很了不起的样子。嗯，就是这个样子。 如果说开来，那就是一段好长好长的回忆啦。改天写（嗯，对，这个就是我新挖的坑。）

期间遇到的问题都记录成 issues 了。搞的最头疼的就是这个了 issue#68 。 做完这个项目， Python 的姿势水平有了很大的提高。嗯，具体是什么提高呢？我也忘了。