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

我以为如今颇有必要回顾一下我过去的前端开发技术路线变化图，从而更好地帮助师弟师妹们提升。让你们了解，为何这么作，这么作有什么好处，很是必要。

这里还要特别鸣谢一下个人研究生同窗侯振宇，他对技术孜孜不倦钻研的精神提点了我许多，虽然他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等基于字符串的前端模板以后，咱们意识到本身写的这个框架的模板部分确实不怎么样。可是正由于咱们本身写过，才知作别人的模板到底强在什么地方，有了更深入的体会。

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