零基礎(chǔ)學(xué)習(xí)Web前端開發(fā)的七大誤區(qū)

    
     前端開發(fā)在最近幾年逐漸走紅，越來越多的開發(fā)者加入前端開發(fā)隊(duì)伍。但前端在大學(xué)中沒有課程體系，而且知識(shí)也在不斷更新著。大家對(duì)它的認(rèn)識(shí)也各不相同，今天奇酷Web前端培訓(xùn)專家為您解讀，學(xué)習(xí)web前端都有哪七大誤區(qū)。


 
　　誤區(qū)一：前端只是JS
 
　　有這么一部分朋友，只看犀牛書(《Java權(quán)威指南》)，每天研究JS這JS那的，認(rèn)為這樣就算是前端開發(fā)了。
 
　　但我要說的是：前端不只是JS。
 
　　何謂前端開發(fā)？我認(rèn)為，一切以展現(xiàn)為目標(biāo)的工作，都是前端開發(fā)工作。在前端開發(fā)中，除了JS，還有很多需要去掌握的，比如瀏覽器原 理，html5,css3等。之前在面試別人時(shí)，問他，怎么做一個(gè)觸摸屏上的轉(zhuǎn)盤。他搖頭。我退了一步，和他說談?wù)勀愕南敕ㄒ部?。他想了一下，還是不會(huì)。
 
　　做轉(zhuǎn)盤，是我經(jīng)常面別人的一道題(我在后期會(huì)對(duì)這道題給大家解說)，看似簡(jiǎn)單，但代表了前端知識(shí)的綜合應(yīng)用。你沒有觸摸屏開發(fā)經(jīng)驗(yàn)，不知道CSS3或canvas，不了解網(wǎng)頁優(yōu)化，是做不出來的。前端是綜合技術(shù)的應(yīng)用，只會(huì)JS是解決不了問題的。
 
　　誤區(qū)二：我現(xiàn)在HOLD住一切，不用學(xué)新東西了
 
　　我面過的人中，有60%的人沒有h5和CSS3的實(shí)際工作經(jīng)驗(yàn)，甚至只聽過一些名詞，沒有研究過。問他們?cè)?，大部分回答之前的工作用不上，小部分回答沒時(shí)間。當(dāng)問到一些動(dòng)畫的實(shí)現(xiàn)時(shí)，有部分面試者還在用頻繁改DOM的CSS2屬性來實(shí)現(xiàn)。
 
　　這種狀況的原因可能和工作內(nèi)容有關(guān)，目前國(guó)內(nèi)的一些移動(dòng)端網(wǎng)頁還是比較中規(guī)中矩的，產(chǎn)品經(jīng)理對(duì)前端實(shí)現(xiàn)很少有非常規(guī)的要求。一些前端開發(fā)者的任務(wù)是把后端的數(shù)據(jù)給呈現(xiàn)出來即可，這些確實(shí)CSS2也能實(shí)現(xiàn)。但這些也不是不學(xué)不用新技術(shù)的理由，啃老本總有一天被淘汰。
 
　　誤區(qū)三：前端不需要了解后端知識(shí)
 
　　也是，前端好好的弄前端唄，管后端干嘛。
 
　　但行業(yè)在發(fā)展著，前端的功能越來越強(qiáng)大。離線數(shù)據(jù)庫(kù)能提供數(shù)據(jù)存儲(chǔ)和管理的功能，但不會(huì)寫SQL語句能玩得轉(zhuǎn)嗎？WebSocket能提供即時(shí) 通信，但不了解socket和WebSocket的區(qū)別，能和后端開發(fā)(很多后端開發(fā)只會(huì)socket技術(shù))一起搭建嗎?加快頁面展示速度不只是要從前端 分析，后端也要考慮到，使用keep alive、緩存等后端技術(shù)能使頁面更快地打開。
 
　　誤區(qū)四：覺的老板要求好難啊能推就推了
 
　　不要排斥他們的非常規(guī)需求，他們的這些奇怪需求也許會(huì)成為企業(yè)的重要競(jìng)爭(zhēng)力。(好吧，這一點(diǎn)切換到公司經(jīng)營(yíng)者的視角了。)用戶越來越注重表現(xiàn)效 果了，不要再以簡(jiǎn)單的列表頁和詳情頁來打發(fā)用戶了，他們可能會(huì)因?yàn)榱己玫挠脩趔w驗(yàn)而成為網(wǎng)站的忠實(shí)用戶。遇到非常規(guī)需求時(shí)，首先想下怎么運(yùn)用前端知識(shí)來實(shí) 現(xiàn)，如果想不出來，就和同行討論下?？傊?，實(shí)現(xiàn)需求是開發(fā)者的責(zé)任，不要輕易說這個(gè)需求我們實(shí)現(xiàn)不了。
 
　　誤區(qū)五：不考慮其他情況，頁面出來就好了
 
　　大部分前端呈現(xiàn)使用DOM,但DOM用得多了會(huì)有性能問題。現(xiàn)在很流行列表頁頁底上拉加載更多，但很少有前端關(guān)注加載的極端問題，如果一個(gè)頁面我下拉了很多次，加載了幾千個(gè)DOM，會(huì)發(fā)生什么問題？答案是輕則頁面響應(yīng)緩慢，重則瀏覽器閃退。
 
　　另外舉個(gè)例子：LocalStorage使用起來確實(shí)方便，很多企業(yè)的前端重度依賴它，甚至知名的前端開發(fā)框架也依賴它。但它有個(gè)缺點(diǎn)——有容 量限制(2.6M-10M)，我們得考慮極端情況，當(dāng)LocalStorage空間快滿時(shí)，怎么處理。或在架構(gòu)上避免這種極端情況的發(fā)生。
 
　　誤區(qū)六：頁面給用戶看，用戶能用就好
 
　　能來看你頁面的，不只是用戶，還有機(jī)器人好不好！
 
　　Web App一直在覬覦Native App的位置，有的Web App和Native App根本看不出差別。Web App大紅大紫，各種前端MVC框架也風(fēng)聲水起，但它們都有個(gè)問題，幾乎沒法做SEO，因?yàn)樗阉饕鏌o視JS。流量是企業(yè)的立命之本，SEO做得好能引來 大量的流量，所以前端還是得考慮SEO問題。(會(huì)在后面和大家討論Web App的SEO方案)
 
　　誤區(qū)七：不使用/不推動(dòng)新技術(shù)
 
　　上帝給了你一雙翅膀,你卻把它給烤了。
 
　　問自己幾個(gè)問題，網(wǎng)頁用了CSS3動(dòng)畫嗎？網(wǎng)頁支持多點(diǎn)觸摸操作嗎？距離感應(yīng)器，動(dòng)作感應(yīng)器，你用了沒有？這里并不是說為了用而用這些新技術(shù)。 而是想表明，我們已經(jīng)有新的技術(shù)了，不要把它們浪費(fèi)了，是時(shí)候?qū)σ郧暗木W(wǎng)頁和以前的操作方式進(jìn)行變革了。使用這些特性，能讓用戶體驗(yàn)更佳。一些產(chǎn)品經(jīng)理或 設(shè)計(jì)師對(duì)前端的認(rèn)識(shí)還停留在html4時(shí)代，我們有必要和他們科普一下新知識(shí)。