從事前端開發工作也有一定的時間了，在這段時間里，由一個基本的前端開發開始，做到前端經理；基本上算是走過了所有前端開發都走過的路，今天主要分享下我這一路走來，對前端的理解。 我開始接觸前端的時候，其實稱不上是所謂的開發，更多的是現在多數人對前端的理解－美工，當時負責的工作就是將PSD轉化為HTML頁面 ...
從事前端開發工作也有一定的時間了，在這段時間里，由一個基本的前端開發開始，做到前端經理；基本上算是走過了所有前端開發都走過的路，今天主要分享下我這一路走來，對前端的理解。
我開始接觸前端的時候，其實稱不上是所謂的開發，更多的是現在多數人對前端的理解－美工，當時負責的工作就是將PSD轉化為HTML頁面，並做些基本的交互。所以，我們組一致都掛在設計組下麵，因為大家對其理解，其實是偏設計的東西，和所謂的開髮根本掛不上鉤。結果導致的就是一系列的連鎖問題－－前端不被看重，前端的工資水平就很難提升，前端轉崗；我身邊就有好幾個前端因此而轉崗。
其實所謂的前端開發工程師，並不僅僅是將PSD轉化為HTML頁面並做些交互這麼簡單，理論上，應該還有很多的js要開發，那這部分js都轉移到哪裡了呢？答案就是所謂的研發人員身上，他們可能是PHP開發工程師，或者是java開發工程師，這些人同時擔著PHP／java開發和js開發2項工作。那這樣會帶來一個什麼樣的問題呢？一來網站性能很差，二來頁面交互效果很爛，三是前端代碼沒有什麼組織性。為什麼會出現這些問題呢，主要是因為他們的工作重點還是在PHP或是JAVA上，一來本身很難去深究js，二是對頁面的交互缺乏CSS的基礎，三是不會去過多的研究js的優秀框架。我自己做過網站的性能優化，重構過他們的代碼，對這點的理會很深。久而久之，就出現一個很尷尬的情況，國外／國內大牛推出了很多優秀的框架，卻很少能在公司中有應用。網站呈現依舊 ”一副任你外面如何分外妖嬈，我自清貧的傲嬌態度“。
那可能有人要問，js到底可以實現哪些東西。我就結合下我自己的工作說下吧。
1. CSS＋JS，可以實現很多很炫的效果，例如旋轉，放大，變形等；這些的話，其實一般的前端開發在接觸到 CSS3很nb的屬性後，都能夠游刃有餘的實現
2. 前端的性能優化，這塊其實涉及的東西很多，對於非js之內，就不過多的說了，主要說下與js方面有關的。我們知道js載入到頁面中主要分為2步，一是下載，二是解析；如果js同步下載的話，其實會block住其他資源的下載，這個就是為什麼把js非同步掉的原因，那這又有一個問題，那我把js非同步處理後，為什麼不能把它放在頭部呢？非同步的資源不是不阻礙其他資源的下載了嗎？這裡又涉及到一個問題，那就是js的解析問題，js下載完成之後就會進行解析，解析會block住其他資源的下載，更重要的一個問題是解析js過程中如果有操作DOM，那頁面沒有下載完，就會報錯。所以現在網站一般都是將js放在頁面的最底部。那放在底部就是最優的解決方法嗎？不是，js沒有實現按需載入。怎麼理解按需載入，就是按照頁面需要展示的內容載入對應處需要使用到的js。簡單的說，就是在頁面初始化的時候，我只載入和首屏相關的js，其他的js一概不載入。這樣頁面在打開的時候，只會載入很少的js文件，網站速度就能有很大的提升。那又怎樣能實現js的按需載入呢，那就是：一將js模塊化／低耦合的組織，二是通過工具實現按需載入，我們這邊使用的是requirejs進行的模塊化載入。除了js按需載入以外，其實還有個影響性能很大的問題，就是js本身的邏輯問題，這塊對性能影響也很大，特別是對一些js引擎較弱的瀏覽器，影響更大。這塊涉及到的東西也很多，簡單的舉個例子，頁面中有300個li，通過jquery 的 $("li")方式去查找，你可以算了需要查找的時間，如果你的查到的結果不保存，每次都是使用$('li')查找，和我存儲了一次，以後直接使用保存的，對比下運行時間。你就會發現運行時間差距很大。
3. 前端的模版引擎，包括underscorejs或者是artTemplatejs，這些雖然只是些工具，但是合理使用，對工作效率提升還是非常明顯；接下來會進一步分開講解這個部分
4. backbonejs，結合我們現在開發的項目，backbone還是非常實用的，主要表現在前後臺分離上，並且對於前端架構的搭建和效率的提升，有很大的飛躍。接下來會詳細講解backbone在前端開發中的具體應用
5. requirejs，這個算是一個前端開發的工具吧，它的主要作用在於管理js，並且模塊化和非同步化js；對於管理文件的載入，有極大的幫助作用。這塊接下來也會分章節講解。
6. 還有一個是目前作為前端開發，基本上都要瞭解的，就是nodejs；這個東西有很多作用，就不去細說。今天主要講解下使用nodejs開發的一個半自動化的測試作用－phantomjs，目前我們這邊專題的測試走的基本上都是這個測試工具，但是是要基於phantomjs進行二次開發的。接下來也會分章節講解這個部分
7. Grunt，這個目前在我們具體的項目中還沒有完全使用，但是其很多功能還是值得研究和推廣的。
當然，以上只是前端開發一些基礎，不過結合我們自己的實踐，以上的東西的引入，給我們開髮帶來了極大的便利，並且較低的學習成本，在具體應用中，也極易推廣使用。
目前我們使用以上的框架，推行的前後臺分離方式，基本上已經確定下來；並且在幾個重大的項目有具體的應用，也帶來的很大的優勢。主要表現在以下幾點
1. 前後臺並行開發，目前UI設計完之後，我們就可以和研發確定介面，介面確定完成之後，就可以完全分離式開發，在前後臺都開發完成之後直接連調就可以
2. 後臺可以更專註後臺開發和介面性能，不必要關註前端的問題。
3. 前端這邊也可以完全發揮自己的優勢，在頁面性能／js載入／非同步化／頁面DOM數優化等方面都會有很大的提高
4. 也做到了專業的人做專業的事情，做到專業化分工
以上是在做前端開發具體的實踐中總結的一些工作心得，也是我們這邊前端會一直向前提升的道路。希望各位前端開發能夠提升自己的技能，現在自己的價值，得到更高的報酬，更多的尊重。
