菜鸟去实习——在500强互联网部门做前端

转眼就大四，在公司的实习马上都要结束了。琢磨着自己就要成为为数众多的码农之一，正在嗟叹不已的时候，身边的人打趣地说——是时候展现真正的技术了。我没工夫吐槽这位可爱的同学，心想的全是「什么是真正的技术」「读了这么多年大学的我们真的学到东西了么」。在这样的疑问下，反复推敲自己过去做过的林林总总的项目，确实没有什么可以称得上「技术」可言。毕竟，自己做项目总是有点小打小闹的情绪在里面，雄心满满的开始挖了一个坑，到最后自己却填不完只有把名为需求的东西砍得见不到最初的样子。但是，要说真正能学到东西的话，果然还是在公司里面实战比较靠谱。毕竟——分给你的项目做也得做不做也得做。好多大牛都是活生生被逼出来的，IT界不是有这样的传闻么。嘛，总之就记录一下这次的实习经历。

本次实习是在S公司的某个研究部门进行HTML5研究开发的工作，初来乍到的时候认为身边都是技术大牛，待了几天之后发现周围其实都是和蔼可亲的设计师。这个部门作为公司研究院的一部分，主要做UED(User Experience Design)，办公室里面都是交互型设计师、UI设计师，无一不充满了非凡的设计思想和creative的idea。一些概念上的东西轻而易举的就在他们的手下变成了，完备的用户交互体验的原型。

本来认为在这样的公司像我这样的码农除了编程就是编程。然而刚到没两天，我就被一个博士姐姐叫过去给她协助她的工作，内容是针对一个会议室看板的项目对会议室的使用人员之一：后勤的阿姨进行采访。当时的我其实相当不屑一顾，认为设计这种没有技术含量的事情怎么会有编码重要，你占用我宝贵的时间就让我去做这个？ 虽然不情愿，不好拒绝的我也协助她展开了工作。大致过程是这样：这个博士姐姐拿着一张由设计师设计好的prototype的图对阿姨进行采访，大致分成提出问题——解答这样的过程，由我拿着摄像机对他们之间的对话进行录制，并吩咐要我注意录制阿姨在使用这个原型的时候的表情变化，使用习惯。满头雾水的我就照做了，然而并不知道做这样的事情到底有什么意义。录制过程不长。但是博士姐姐反复的对一个阿姨针对几个产品进行了同样问题的测试：比如其中有一个case是针对会议室的使用情况，一种方案是使用文字说明（空/empty）,另一种方案是使用文字为红色表示占用，绿色表示空闲状态。可以通过视频观察到，阿姨针对用颜色的方案表示疑惑，但是当博士告诉阿姨使用颜色的规则之后，再对阿姨进行测试的时候，阿姨对颜色这一组的识别速度明显要优于使用文字的一组（特别是S公司内部看板要求全英文的情况下），然而这种直观的反映如果不直接去实验是很难想到的。这让我一下觉得设计师变得高大上了：还以为是一群每天坐在办公室，只凭借自己的异想天开来做些自己凭空想象的东西，没想到一个idea从产生到confirm居然有这么多桎梏。

嘛，其实最开始和这些设计师们打交道的时候我是不情愿的，「这里的需求有变化」，「那里的设计还没有成型，你先看着适当先写点儿」。这样的话对于我们编码人员来说无疑最不喜欢听，有变更需求就意味着要需要改改改，搞不好还需要重构。但是直接和客户打交道的是他们，他们直接对口客户，我们只负责实现，在这种情况下我唯一能做的事情就是毫无怨言的改。

但是后来我发现，让我自己这么累的罪魁祸首，其实就是我自己。因为一个需求变更就需要改大量的代码，甚至重构。这说明了我写的代码可扩展性差，没有符合软件内部高内聚低耦合的重要要求。这是我在大学里面写代码的时候养成的不良习惯——忽略设计。回顾以往，自己写的代码大多都是尝试性的在一个demo的基础上探索性的增加功能，只是单纯的功能性增量开发，只注重于实现功能，而没有考虑之后对功能的更新。因此以往开发的程序大多都停留在了版本1.0，没有一个良好设计和明朗的编码习惯，导致以后再回顾自己的项目的时候自己都很难读懂自己的代码。

在认识到了自己的不足之后，我在之后的工作中就更加注重一开始的设计，模块之间怎么拼接，接口怎么设计，自己还会去揣摩设计师的意图，比如这里以后是否还会需要增量开发，尽量向高内聚方向靠拢，以避免牵一发而动全身的恶果。

还是说说自己的本职工作，自己主要是从事基于HTML5的前端开发，事实上大部分时间都是在和JS打交道——使用JS+SVG实现很多复杂的交互效果，有些最开始听到设计概要的时候都不敢相信居然是要让我用web实现，然后最后还是实现了。可以说前端的核心JavaScript，只有深入学习它，才能在FrontEnd的开发领域前进。另外：扎实的数学功底和逻辑能力。这里举一个编码实现自定义Slider 的例子。

这个case是在s公司自己的smarthome项目中使用上的控件。这个控件是一个可拖动的slider，用来调节智能家居电灯的亮度和空调的温度。单纯的slider是没有什么难度的，类似于windows操作系统中调节音量的滑块控件，这个就算自己写也没有什么技术难度。但是设计师要求实现的slider却并不是常规的形状：Vertical or Horizontal。它是一个具有一定宽度的钝角（240°）弧形，弧形起始和结束处的短边都指向圆心。并且要求能够使用手指在上面拖动，会有渐变的颜色来填充手指拖动到的位置。最开始接受到这个需求的时候真心吓了我一跳，在一个web项目中，模仿原生项目的开发方式。然而web中并没有原生项目开发这样的控件那么方便。最开始的设想是用普通的形状来变形成这样的形状，如改变boder-radius，使用transform来变形，甚至最后还花时间去研究了matrix的矩阵变换。但是仍然无法达到预期的效果，因为matrix变换虽然能变换content的形状，但是元素占位却并没有变化，因此无法实现用手指在上面拖动的效果。

后来通过对各种思路进行研究，发现使用svg的方式应该可行。但是需要在纯svg上加上手势操作和一些特效的功能需要写的代码量可能会有点大，因此我搜索了一些基于svg的js库，其中又一个叫做raphaelJS的js库引起了我的兴趣，这个库是基于svg方便开发者使用svg作图，实现某些效果的开源库。使用它，在获取svg内坐标，进行手势操作的时候确实减少了很多工作。

Slider的具体实现过程：首先根据设计师大哥的设计图，使用markman测量该控件的外径、内径、圆弧角度，在纸上对这个图形关键点的坐标做了一个路径变换，然后使用path来绘制图形。颜色填充这里废了一番脑子，最终思路是构造了240个圆心角为1°的同心圆弧，并且将原来240°的作为底色slider覆盖，当手指触控或者在slider上滑动时，获取手指位置，并设置该位置之前的所有圆弧opacity：1，该位置之后所有圆弧opacity：0，并且设置durition，这样就实现了很炫酷的自定义形状的slider的效果。

另外还有一个项目也是和svg相关的，s公司有个是基于.NET的桌面版软件，现在希望把它转换成web版，并且手机能够使用。其实单纯的软件开发成功能相同的web程序并不是一件难事儿。先简单介绍一下这个桌面程序。这个程序是用来监控公司内部设备信号输出的一个HMI，用来接收实时信号，并对该信号进行输出，硬要说的话和现在我们在网上能看见的股票交易系统比较像，需要实现数据的图像显示，在坐标轴上值的查看，并且要实现可以平移、放大、缩小的功能。然后最后所有功能都需要集成进sencha touch。

其实最开始拿到这个需求的时候我都傻了，现在网上那种类似于股票交易系统的曲线图大多是用flash做的，让我用HTML5来实现，我简直毫无头绪。或许说自己正站在html5开发领域的最前沿也毫不为过，毕竟目前还没有什么网站使用html + js开发过这样的东西。我感到这是一次充满挑战的任务，虽然艰巨，在我的不断学习和努力下最终还是实现了这个东西。（具体实现方法我就不写了，有机会再码上来。）

嘛，总之在s公司实习的这段时间真的是非常有收获，不管是和同事相处，和上司相处，和任务交接伙伴相处。其实自己未来可能不会从事web开发的方向，由于自己在大学期间曾经对.NET十分狂热。可能以后会往这个方向发展。但是无论在哪个方向做软件，软件开发本身的思想不变的。我认为我的职业生涯不将是学会一门又一门的语言和技术，怎样更好的设计一个软件，让软件本身更灵活、丰富多彩、让用户使用的时候满意，开发者开发的时候开心，将成为我的职业目标。