后臺前端項目的開發 · 前端筆記

### 后臺前端項目的開發 >[danger] 從后臺前端項目的演變過程看單頁的發展我們先看最基本的網頁頁面工作模式點擊鏈接跳轉新頁面每次都會重新請求一個文檔，再次渲染基本98%的網頁是屬于這種形式的這種現狀讓人有很多不滿 1. 網絡差的時候點擊鏈接，加載新頁面慢，甚至出現卡住，白屏的情況 2. 浪費不必要的帶寬，大部分頁面都有公用部分，頭部，導航欄，菜單欄，尾部都是相同的，每次重新渲染一次讓人感覺浪費，不值得，尤其讓有偏執狂，強迫癥，處女座，完美主義者的人抓狂受不了。所以我們好改變！但是改變是痛苦的會有所割舍，和負面的東西 [PJAX](https://my.oschina.net/sub/blog/123447)是我們做出改變的第一步但不可避免的會有一些問題比如對于SEO不友好，關于這點，什么網站適合使用單頁類技術，什么網站還是以傳統的方式比較好，已經討論過了[前端技術選型分析](http://www.hmoore.net/xiak/quanduan/280137)，這里就不討論了。討論的結果是，大部分常規網站不適合向單頁靠攏，而webapp類型的適合好了，不扯遠了。回到我們的后臺前端項目后臺頁面的特點是主要是功能性操作，數據的管理的所以不太注重頁面靈活，外觀，并且是內部使用的，所以也不需要SEO 基于這些原因，其實很早就有人在后臺項目中使用過類WEBAPP技術了，對，你沒聽錯，在webapp概念還沒誕生時，人們就在后臺項目中嘗試過類似的開發方式了。因為人們很早就注意到，后臺結構往往都不叫簡單，都差不多頂部左側導航/菜單欄右側內容區工作的方式：頂部和左側的內容一般在使用過程中都不會變，操作一般都在內容區你想到了什么？沒錯就是框架 ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>title</title> <link rel="icon" href="/v1/images/ico.ico" type="image/x-icon" /> <style></style> </head> <frameset id="bg" style="background:url(/v1/images/ad_bg.jpg)" rows="65,*" scrolling="yes" norsesize="nosesize" marginwidth="0" marginheight="20px" frameborder="0"> <frame src="/v1/can/index.php?a=top" scrolling="yes" norsesize="nosesize" marginwidth="0" marginheight="20px" frameborder="0" name="top" /> <frameset cols="210,*" scrolling="yes" norsesize="nosesize" marginwidth="0" marginheight="0" frameborder="0"> <frame src="/v1/can/index.php?a=z" scrolling="yes" norsesize="nosesize" marginwidth="0" marginheight="0" frameborder="0" name="z" /> <frame name="iframe_a" src="/v1/can/index.php?a=d" scrolling="yes" norsesize="nosesize" marginwidth="0" marginheight="0" frameborder="0" /> </frameset> </frameset> <noframes></noframes> </html> ``` 這是一個基本，經典的后臺頁面結構無刷新，操作頁面，頂部，左側不需要每次渲染，點擊不同的功能菜單，內容區加載頁面，這不就是"單頁"嗎。這還比較簡陋，沒有url的狀態管理，畢竟那時候還沒有HTML5嘛，現在看起來，這種方法雖然比較拙劣，但也是前進路上的一次嘗試，一次突破，而這種突破嘗試，最早就是在后臺項目中出現的，所以這篇文章開頭就說到**“從后臺項目看單頁的演變”**。這種使用內聯框架的形式后來出現很多演變，比如只使用一個框架做內容區域，甚至模擬多選項卡，比如H+等等，但技術都是相同，那就是使用框架。但這種方式毛病也多，比如使用框架不夠靈活，多框架是管理復雜，容易出錯，尤其是在前端發展如此之快，單頁技術成熟的今天，就更久過時了，現在完全可以不使用框架了，比如 [zui](http://zui.sexy/) [vuethink](http://vuethink.com/)等新型框架，這些技術完全可以在后臺項目中完全的應用，無所忌憚，無所顧慮的，大膽的應用，因為沒有什么壞處了，后臺項目只要靈活，不需要考慮SEO了。 **使用這些新型框架來開發后臺前端項目，將大大提升開發和使用效率，不會再多獲取不必要的東西了，浪費了，這也滿足了有偏執狂，強迫癥，處女座，完美主義者的人了。** 這種方式開發、維護的復雜度都會大大降低，單頁對開發人員的要求更高，因為整個單頁就是個webapp，各種組件組成的，而這種其實每個頁面都是獨立分離的，所以復雜度就達達降低了。雖然還有很長的路要走，但我相信，只要不斷超越自己，改變自己，相信改變是件美好的事，未來就會更好。 [美團外賣前端可視化界面組裝平臺 —— 樂高](https://tech.meituan.com/waimai-lego.html) [Bootstrap可視化布局系統](http://www.bootcss.com/p/layoutit/#) > 可以先用布局把界面搭建起來 * * * * * update time: 2018-5-17 17:26:41