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

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


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