我个人的前端开发技术路线变化图（上）

我觉得现在很有必要回顾一下我过去的前端开发技术路线变化图，从而更好地帮助师弟师妹们提高。让大家了解，为什么这么做，这么做有什么好处，非常必要。

这里还要特别鸣谢一下我的研究生同学侯振宇，他对技术孜孜不倦钻研的精神提点了我许多，虽然他dota是个猪队友，但是我依然感到十分荣幸能遇到这样的同学。若是哪一天他回学校作报告，那也必然是作为大牛回来。跟他相比我并不是个做技术的料，喜欢宅在屋子里画画，钻研新技术的精神相对弱了很多。所以还是得多看他的博客，否则就跟不上侯总的脚步了呀！

侯振宇的博客：http://www.cnblogs.com/sskyy/

1.first blood

时光回溯到2010年3月底。那时候我刚来实验室不久。接的第一个任务是替一个web应用软件换界面。这个软件是大我2届的师哥写的，但从现在的角度讲完全是php初学者的水平。里面有个Index.php页面，有13000多行，一个file.php页面，7000行。其中包含php服务端脚本、sql语句、html模板、jquery写的前端响应控制、css代码。没错，我的任务就是在这一摊代码中替换界面，而且因为新的设计与原来不同，甚至连sql都改了——以至于我现在有点闹不清为什么替换界面还要改sql了。总之，一个看似不可能的任务，居然让我改完了。而且是在我不会使用console，全靠IE的alert调试出来的。现在想想那个时候莫非是我技术最强的时候（笑）？这段时间完全谈不上什么前端开发技术路线，只是在边学边改。在这一阶段我特别注意命名的规范性——因为很多逻辑都写在一个巨型文件里，如何方便查找是个重要问题。用好IDE的outline是非常重要的。所以这里我的函数名全是名词在前动词在后，php函数中间用下划线分割，js不用下划线。每一段大的逻辑代码处打一个注释标记，方便查找。这个时候我有了强烈的需求，就是要把php、css、js分开，让他们各在其位各司其职，绝对不能这么混乱了。

感谢师哥张福，每次我遇到问题他都不厌其烦滴帮忙，最高纪录是一个bug他坐我这改了3小时……没错，带新人都是有代价的。遇到一个好师哥那就是福分。

2.double kill

2010年6月我接到第二个任务是个实验室的一个NAStor软件（是MPX的前身）替换页面。那时候实验室的师哥没有一个爱做这种活，而我却以为我发挥绘画特长的时候到了。于是这一阶段在实验室我渐渐有了擅长做页面的名声，但其实不过是浪得虚名而已（张福师哥在2010年6月毕业前曾直言我水平还是太浅）。NAStor是一个典型的php写的web软件，就像wordpress或者thinkphp，当然也没那么复杂，主要是不需要数据库。磁盘监控信息由linux上的第三方软件获取，朱荣泽等师哥负责写php后台接口(如通过shell脚本等方式获取服务器信息)，最后这些信息会传给指定的php页面显示。值得一提的是该系统是柳昊师哥写的架构，其中用php将页面进行模块化的分割和组装、文字全部用变量从而实现多语言转换等内容，我是第一次遇到。这一阶段做到了不同代码的分离，但前端还是放在一个比较次要的位置上。所以从这一阶段上来讲，我是作为php程序员来学习和开发的。

3.tirple kill

2010年9月到2011年3月间我负责制作实验室WFS云存储项目的手机版——确切的说是手机上访问的web页面。当时wap网络还很流行，诺基亚还是老大，智能手机还很少，我的手机还不是智能手机，却已经开始做一个智能手机才能看到的手机web界面了。因为相对于WFS项目本身的代码而言，手机版是完全独立的内容，而且我们也不想把混乱带入原来的代码，故而这里我们第一次采用了前后端完全分离的方案：后台提供Restful API, 使用json进行数据传输，前台只负责发送ajax请求，解析数据和显示。这里前端我采用了jquery+ jquery mobile（当时jquery mobile还不是正式版，而是1.0 alpha版）的方案来做前端框架，ajax时是自己封装原始的xmlhttprequest对象，那时候jquery还没封装。当时已经结识了侯振宇同学（以下称侯总），他来做后台接口，使用restful API就是他提出的。如此一来，他专心写php提供接口，我专心写前端负责显示。这样配合效率很高，以至于之后3年我们都是如此。不过，由于当时 各方面条件不成熟（jquery mobile当时bug还不少，身边高性能移动设备不多测试困难，移动端浏览器本身的性能问题），所以这个WFS手机版最后只能作为一个锦上天花的小玩意埋在我的电脑的虚拟机里。事实上，直到现在，我们也可以看到移动端上的云存储应用几乎都是采取本地应用的方式而不是web应用的方式，这根本地调用的效率关系很大。但我相信随着html5发展和移动终端对浏览器的支持越来越好，web应用也会迎来春天。最终，web OS的愿景也会实现。

另外，这一阶段，我们也干过一些别的工作，例如搭建网站，写网站后台等等。但当时前端还没有成熟且广泛流行的业务逻辑框架。所以在做产品开发时通常是使用wordpress、drupal等整体开发框架做二次开发。这时我们已经意识到sql语句封装、钩子函数和模块化开发的重要性。但是开发时常常需要在javascript和php间切换，同时还要自己搞定数据库，结果造成前后台两套MVC结构互相穿插的局面， 这意味着前后台程序员都必须关注对方的代码，常常在修改对方代码时出错，降低了工作效率。随着我们对用户体验的追求和restful API + ajax模式使用地深化，这一阶段我们开始把业务逻辑往前端推移——特点表现在前端业务逻辑层越来越重，以至于光靠jquery到处绑定有种越来越混乱的感觉。而此时我和侯振宇也意识到，如果要让我们再使用restful API + ajax的方式开发一个完整的项目，则前台必须有一个强大的框架，可以自己搞定原来只有php等后台脚本语言才做的模板、模块化、路由功能。否则，前端对于用户体验不好，代码也会前后台混搭修改不易。

4.dominating

2011年4月到10月间我们又开始了新的项目的开发。这次是NAStor的升级版MPX的开发。跟上次一样不需要数据库，底层接口由朱荣泽师哥提供。这里我和侯振宇再一次实践了restful API + ajax模式来制作这个全新的项目。界面的整体风格也是由我一手敲定，虽然现在看来也许有点卡通了。我们吸取了之前的经验，对于这次的重型前端，侯振宇写一套前端框架，具体解决模板和模块化的问题。这个前端框架叫做NTSL（网络存储实验室英文名的缩写），它包含一整套模块调用机制和模板解析机制。模块调用是我们自己写的，但当时我们并不明白什么是AMD规范或者CMD规范，我们只是按照我们自己的思路来：如果某个逻辑页面想要用某个逻辑模块的js和css，那么就在该页面加载完毕后，用该页面的主控js把需要的内容加载进来。从现在看思路很像seajs的延迟加载方案。为了实现它，为此我们不得不用了很多eval来处理最后被当做字符串载入的js文件。我们都知道一句话叫“eval is evil”，故而eval的问题困扰了很久，但当时也没有更好的解决方案了，就这么用吧。直到后来我们了解了sea.js和require.js，发现其实他们也用eval了，该用就得用，没什么大不了的，那是后话了。NTSL框架的另一大功能是模板机制，采用jquery读去html模板文件并进行事件绑定。为此我们花了很大的力气来做这个框架和相关的示例页面，但是依然发现自己写的这套框架不太好用——主要问题在jquery做解析时，不得不以各种class名绑定了太多事件，效率低，复杂度高，尤其在我们接触了underscore等基于字符串的前端模板之后，我们意识到自己写的这个框架的模板部分确实不怎么样。但是正因为我们自己写过，才知道别人的模板到底强在什么地方，有了更深刻的体会。

虽然自己写框架对水平提升很大，但是学习别人未尝不是提升。毕竟，活永远是做不完的。在这个项目的最后阶段，我和侯总开始研究探索起各种前端框架和类库，为下一个项目做准备。