我们实验室正常来说应该是1月24日放假，但由于我之前暑假没有放假，所以调了一周加在寒假上得以提前一周放假。但由于在火车上实在是太无聊了，只好掏出电脑趴在床上写写学期总结。

平淡无奇的研究生生活

这学期开始真正进入了研究生生活。但实际谈起来却也是平淡无奇，每天基本上都是寝室、实验室、食堂三点一线，大部分时间都是泡在实验室（包括正常工作和晚上娱乐）。很多人问研究生不是要上课么？只能说研究生的课程比本科生还要坑爹。但是，我喜欢！这样意味着90%以上的时间都可以在实验室做真正有意义的事情而不是在课堂上浪费时间（除了一些经常要点名的课非去不可）。整个学期大概五六门课，只有矩阵论是真正需要突击复习一两周的；像中特、自然辩证法这种文科课是开卷考试而且考前给一个论述题，先写好大概1500字打印出来带进去抄就完事；剩下的就都是交篇综述性论文的类型。研究生嘛，主题还是放在跟着导师学姿势上，理论课什么的真心都是渣渣。

Heatmap到Markboom的蜕变

可以说整个学期的工作全部投入到了这个项目的开发，也就是之前说的Heatmap 2.0 到3.0（后暂定新名称为Markboom）的升级。从当初最核心的在大图上做标记和在线聊天的功能，逐渐扩展外围成为一个真正的Web系统；从完成原型稿到UI设计稿和交互的优化，耗时将近4个月。直到我放假的前一天，还一直在调优，改bug和交接。最后向BOSS展示最新的产品成果，各种酷炫的UI效果一展示出来，大家都觉得长期的努力总算没有白费。

这个项目延续了暑期的工作，从国庆我放假回来后，开发团队算是定型下来：我、橘子、张曼、苏塔可（设计师）、赵老板（后台），其中前三个都是前端开发人员，可见这个项目的前端是有多重。在产品的原型稿出来之后，我主要负责前端核心功能的开发，诸如把大图控件从IIPImage换成OpenSeadragon，在大图控件上打标记，完善在线聊天的功能，还有后来老板提出的最新功能——用WebRTC实现在线视频聊天等等。在项目V0.1 release出来之后，我还研究了一下用grunt这个神器来优化整个前端项目。最后一个月UI设计稿出来后还挑起了一部分传统前端的改版工作。总之，这个学期虽然所有时间都投入到了一个项目上面，但是我的前端技术能力可谓是突飞猛进，也坚定了以后走前端的路线。

再具体说下项目中涉及的各个技术难点。

第一个是大图控件，原先2.0采用的是一个比较老的控件IIPImage，后来发现这个控件可扩展性比较差，对图像的预览也不够平滑，更关键的是对图片格式的支持相当挑剔而且图片的尺寸也过大，在经过一番调研之后决定换用OpenSeadragon和Deep Zoom格式的图片。事实证明这款控件非常简单易用，提供的丰富的API给我们的项目扩展带来了极大的方便。

第二个是在大图上打标记的功能。从只能打“点”这一种标记，扩展到了“矩形”“圆形”和“线”，还要可以变换颜色、尺寸和位置。网上找到的绘图控件虽然很炫，但要么需要收费，要么难以适应项目需求。后来实在没辙，我只好用HTML5的canvas怒写了一个jQuery插件——jQuery.markTools.js——这也算是我第一个比较正式的开源repo。经过多番调优后，既能满足项目要求，又学了一个写jQuery插件的技能，实在是一举两得。这也意味着这个项目正式成为了一个HTML5产品。后来在做视觉优化的时候，我又尝试了用LESS把这个插件涉及到的CSS全部重构了一遍，代码瞬间变得干净清爽，也上手了LESS这个强大的工具。

第三个是老板提出的新需求，用WebRTC实现在线视频聊天。WebRTC名称源自网页实时通信，是一个支持网页浏览器进行实时语音对话或视频对话的API。这个东西是新型的，所以比较挑浏览器，不过由于我们第一期开发都是基于Chrome和Firefox，也没特别在意兼容性的问题。WebRTC的工作原理和API研究起来还挺复杂的，后来找了一圈决定选择SimpleWebRTC这个简洁的封装库，再加上实验室进了一批摄像头，在线多人视频聊天就可以很简单地实现了。

最后一个是用grunt来优化前端项目。这东西真心好用，像JS、CSS代码检查、优化、压缩，图片压缩，基于require.js的模块合并等等就不用说了，只要配置好后就可以一键部署。后期做视觉优化的时候，还有个很强大的拼雪碧图的grunt插件，也是相当好用。这估计也是我们实验室首次尝试用grunt来部署前端项目，效果还是很拔群的。

总而言之，这学期除了维护个人的一些小项目之外，绝大部分时间都投入在实验室的大项目上，从各种前端控件，到传统的设计稿转换到网页的工作，再到整个前端项目的重构、优化和部署都参与了，在此期间前端技术方方面面都得到很扎实地锻炼。另外，Github也保持着慢速稳步增长。希望以后能够专精于前端技术的道路。

本学期技术关键词（按重要度排序）

jQuery插件、CSS、LESS、Grunt

上一篇：Django学习笔记（1）——开始Django

下一篇：Socket.IO进阶