爲何要進行先後臺分離

從事前端開發工做也有必定的時間了，在這段時間裏，由一個基本的前端開發開始，作到前端經理；基本上算是走過了全部前端開發都走過的路，今天主要分享下我這一路走來，對前端的理解。

我開始接觸前端的時候，其實稱不上是所謂的開發，更多的是如今多數人對前端的理解－美工，當時負責的工做就是將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. 也作到了專業的人作專業的事情，作到專業化分工

以上是在作前端開發具體的實踐中總結的一些工做心得，也是咱們這邊前端會一直向前提高的道路。但願各位前端開發可以提高本身的技能，如今本身的價值，獲得更高的報酬，更多的尊重。