我我的的前端開發技術路線變化圖（上）

我以爲如今頗有必要回顧一下我過去的前端開發技術路線變化圖，從而更好地幫助師弟師妹們提升。讓你們瞭解，爲何這麼作，這麼作有什麼好處，很是必要。

這裏還要特別鳴謝一下個人研究生同窗侯振宇，他對技術孜孜不倦鑽研的精神提點了我許多，雖然他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等基於字符串的前端模板以後，咱們意識到本身寫的這個框架的模板部分確實不怎麼樣。可是正由於咱們本身寫過，才知作別人的模板到底強在什麼地方，有了更深入的體會。

雖然本身寫框架對水平提高很大，可是學習別人何嘗不是提高。畢竟，活永遠是作不完的。在這個項目的最後階段，我和侯總開始研究探索起各類前端框架和類庫，爲下一個項目作準備。