前端開發的七宗罪

前端開發在最近幾年逐漸走紅，愈來愈多的開發者加入前端開發隊伍。但前端在大學中沒有課程體系，並且知識也在不斷更新着。你們對它的認識也各不相同。博主有過技術經理，項目經理，面試官，前端開發的經歷，參與過較多的前端開發項目，也結識了較多前端開發人員。基於這些因素我對前端有些較深入的認識，和你們分享下。

本文取名七宗罪是有些噱頭之意，還請你們見諒，實則想爲你們闡述前端開發的誤區。

 

罪一：前端只是JS

有這麼一部分朋友，只看犀牛書（《JavaScript權威指南》），天天研究JS這JS那的，認爲這樣就算是前端開發了。

但我要說的是：前端不僅是JS。

何謂前端開發？我認爲，一切以展示爲目標的工做，都是前端開發工做。在前端開發中，除了JS，還有不少須要去掌握的，好比瀏覽器原理，html5,css3等。以前在面試別人時，問他，怎麼作一個觸摸屏上的轉盤。他搖頭。我退了一步，和他說談談你的想法也可。他想了一下，仍是不會。

作轉盤，是我常常面別人的一道題（我在後期會對這道題給你們解說），看似簡單，但表明了前端知識的綜合應用。你沒有觸摸屏開發經驗，不知道CSS3或canvas，不瞭解網頁優化，是作不出來的。前端是綜合技術的應用，只會JS是解決不了問題的。

 

罪二：我如今能HOLD住一切，不用學新東西了

我面過的人中，有60%的人沒有h5和CSS3的實際工做經驗，甚至只聽過一些名詞，沒有研究過。問他們緣由，大部分回答以前的工做用不上，小部分回答沒時間。當問到一些動畫的實現時，有部分面試者還在用頻繁改DOM的CSS2屬性來實現。

這種情況的緣由可能和工做內容有關，目前國內的一些移動端網頁仍是比較中規中矩的，產品經理對前端實現不多有很是規的要求。一些前端開發者的任務是把後端的數據給呈現出來便可，這些確實CSS2也能實現。但這些也不是不學不用新技術的理由，啃老本總有一天被淘汰。讓頁面的用戶體驗更好，是前端的責任。

 

罪三：前端不須要了解後端知識

也是，前端好好的弄前端唄，管後端幹嗎。

但行業在發展着，前端的功能愈來愈強大。離線數據庫能提供數據存儲和管理的功能，但不會寫SQL語句能玩得轉嗎？WebSocket能提供即時通訊，但不瞭解socket和WebSocket的區別，能和後端開發(不少後端開發只會socket技術)一塊兒搭建嗎?  加快頁面展現速度不僅是要從前端分析，後端也要考慮到，使用keep alive、 緩存等後端技術能使頁面更快地打開。

 

罪四：設計師或產品經理太異想天開了，他們要的好難實現呀，乾脆回覆實現不了吧

不要排斥他們的很是規需求，他們的這些奇怪需求也許會成爲企業的重要競爭力。（好吧，這一點切換到公司經營者的視角了。）用戶愈來愈注重表現效果了，不要再以簡單的列表頁和詳情頁來打發用戶了，他們可能會由於良好的用戶體驗而成爲網站的忠實用戶。遇到很是規需求時，首先想下怎麼運用前端知識來實現，若是想不出來，就和同行討論下。總之，實現需求是開發者的責任，不要輕易說這個需求咱們實現不了。

 

罪五：不考慮極端狀況或性能，頁面出來就行

大部分前端呈現使用DOM,但DOM用得多了會有性能問題。如今很流行列表頁頁底上拉加載更多，但不多有前端關注加載的極端問題，若是一個頁面我下拉了不少次，加載了幾千個DOM，會發生什麼問題？答案是輕則頁面響應緩慢，重則瀏覽器閃退。

另外舉個例子：LocalStorage使用起來確實方便，不少企業的前端重度依賴它，甚至知名的前端開發框架也依賴它。但它有個缺點——有容量限制（2.6M-10M），咱們得考慮極端狀況，當LocalStorage空間快滿時，怎麼處理。或在架構上避免這種極端狀況的發生。

 

罪六：頁面只是給用戶看的，用戶能正常使用就行

來看你頁面的，不僅是用戶，還有機器人。

Web App一直在覬覦Native App的位置，有的Web App和Native App 根本看不出差異。Web App大紅大紫，各類前端MVC框架也風聲水起，但它們都有個問題，幾乎無法作SEO，由於搜索引擎無視JS。流量是企業的立命之本，SEO作得好能引來大量的流量，因此前端仍是得考慮SEO問題。（會在後面和你們討論Web App的SEO方案）

 

罪七：不使用/不推進 新技術

上帝給了你一雙翅膀,你卻把它給烤了。

問本身幾個問題，網頁用了CSS3動畫嗎？網頁支持多點觸摸操做嗎？距離感應器，動做感應器，你用了沒有？這裏並非說爲了用而用這些新技術。而是想代表，咱們已經有新的技術了，不要把它們浪費了，是時候對之前的網頁和之前的操做方式進行變革了。使用這些特性，能讓用戶體驗更佳。一些產品經理或設計師對前端的認識還停留在html4時代，咱們有必要和他們科普一下新知識。

 

 

本文是博主Arfei Zhang原創，歡迎轉載。轉載請註明轉自博客園，並附上本文連接http://www.cnblogs.com/arfeizhang/p/7mistakes.html  ，謝謝！