Web前端是什麼？有什麼好的學習方法能少走彎路？

目前，在移動網際網路行業中較為火熱、勢頭猛烈的當屬Web前端開發。且在2019年招聘旺季中，Web前端開發程式設計師處於供不應求的狀態，對於0基礎想要從事網際網路行業的小夥伴們，Web前端將會是最合適的入門程式語言。而且根據後期的職業發展規劃來看，只要入門Web前端，在職場上發展個三到五年，基本上都能做到總監級別。

所以，有很多小夥伴要麼想進入到Web前端開發行業，要麼是工作不太理想的，想要轉行做Web前端開發。那麼,為什麼會有這麼多的人想要學習Web前端開發呢？

什麼是web前端？

Web前端，主要是用來開發使用者透過瀏覽器可以瀏覽和使用的Web頁面的。 一般而言，所涉及的內容主要包括W3C中的HTML、CSS和JavaScript這三方面的內容。

HTML+CSS：也就是網站的骨架和樣子，包括你看到的知乎的介面，一段文字，一個圖片，都是一個HTML元素，至於字號是多大的，什麼顏色，放在什麼位置，這叫CSS，在HTML5裡，CSS還能讓元素運動起來，旋轉，跳躍，只要你想；

Javascript：簡單的說就是頁面的大腦，把後端獲取的資料新增到網頁裡，或者讓元素運動起來，或者是改變頁面的CSS，或者是操作HTML元素等等。當然，這些都是最基礎的做法，作為一個前端，還要考慮JS的效能，可維護，可擴充套件的程度等等；

但是隨著前端的發展，前端開發所涉及到的內容肯定不僅限於這三方面。分析這三個層面內容的本質可以看到，這三個層面分別涉及Web頁面的結構、Web的外觀視覺表現以及Web層面的互動實現。

因而，歸根結底，Web前端以及Web前端開發可以說是針對Web的結構、行為和表現來進行相應的開發的，也可以說，前端開發主要是做Web端的結構、行為以及表現。

Web前端學習什麼？

web前端學習是一個先易後難的過程，主要包括三個要素：HTML、CSS和JavaScript，這就要求前端開發工程師不僅要掌握基本的Web前端開發技術，網站效能最佳化、SEO和伺服器端的基礎知識，而且要學會運用各種工具進行輔助開發以及理論層面的知識，包括程式碼的可維護性、元件的易用性、分層語義模板和瀏覽器分級支援等。

Web前端開發後期要懂一些前端框架，如nodejs、Angualrjs、還有bootstrap等，以及ued使用者體驗，後臺開發也要懂一些。

看到這裡，發現web前端要學習太多，想加入web前端行業的同學要抓緊腳步開始了，無論你是有一些基礎知識，還是零基礎小白，這些都沒關係，只要你想學，只等你來，只管相信你自己，肯定能學會！

關於學習web前端的誤區和學習建議：

1.只看教程，不動手實戰

這個可以說是學習的最大的一忌，也是提醒過最多的一個注是事項！網上的教程有許多許多，各個語言，各個知識點，各方面的都有，javascript，html5，css3等的一些，隨便一搜就一大把，畢竟網際網路最大的優勢之一就是資源共享！但是很多人看教程就只是看教程，不動手實操。即使部落格的教程，影片教程再好，自己不動手實操，寫程式碼，這樣的學習方式，記憶根本不深刻，容易遺忘，到頭來，可能什麼都沒學會！而且有些教程，如果沒有跟著動手實操，可能會蒙圈。

個人建議：要挑覺得適合自己的教程，也要動手實操，寫程式碼。即使不是邊看教程編寫程式碼！在看完了教程之後，一定要自己動手實操！過程中，可能會遇到些問題，但是這樣才會學習到更多，記憶也更加牢固！

2.只學框架或者庫

這個情況，針對javascript現在沒有以前嚴重了，在以前還是jquery傲視群雄的時候。很多人會在聊天的時候會說：有了jquery，為什麼還要學js？有了vue，為什麼還要學js？面對這樣的提問，我那時候沒有回答，心裡想：jquery或者vue就是用js實現的，不會js，學jquery或者vue第一學得吃力，第二學jquery或者vue肯定不會很深入。而且，萬一有時候，專案不允許用jquery或者vue，那就基本不會寫程式碼了。這時候，如果學習其它的框架或者庫，基本又等於重新學一門語言了。

個人建議：先把基礎（html+css+js）打牢，再學其他框架或者庫。雖然在會js的情況下，我不敢說學js的框架或者庫就是查文件，查API。但至少學js框架或者庫可以不會那麼吃力！

3.只顧著寫程式碼

這個就是我之前的一個習慣，只顧著寫程式碼，不知道：耦合，例項化，繼承等專業術語，和別人交流，無限蒙圈！根本不知道別人在說什麼！網際網路的技術更新的速度非常的快，隔三差五就釋出一個框架，一個庫，一個工具。雖然不是每一個更新的技術都需要學習。但是如果只顧著寫程式碼，不瞭解新的技術。這樣很容易使自己停止不前，失去競爭力。

個人建議：在寫程式碼之餘，要確保自己是不是瞭解程式碼，對程式碼有沒有一個認識。以及多點留意訊息，看下有沒有什麼技術更新！如果覺得更新的技術很實用，或者自己有興趣，可以多瞭解下！畢竟網際網路是一個做到老，學到老的一個領域，技術更新的很快，如果跟不上流行的趨勢，說不定自己會被淘汰呢！

4.太早接觸複雜專案

這個情況，比較普遍，無論是在學校或者是現在的培訓機構。很多學習前端的人，基礎沒打牢，就在那裡揚言要做一個大專案，我聽到的有的人想做知乎，有的人想做世紀佳緣等等一些偉大的目標！但是全部人都是連網站的業務流程和邏輯都沒弄清，最後越搞越亂，就放棄了！之前的偉大目標都成了爛尾樓，作用最多就是一個程式碼練習的作用！花了大量的時間，做了一件沒很大的實際意義的事情！

個人建議：從簡單到複雜，複雜的網站，都是有很多簡單的模組。不妨先從簡單的功能做起，做完了一個功能再往裡面加功能！現在所處的公司就是這樣，開發的後臺管理系統，開發幾個月了，從一個只有員工的登入註冊的功能，然後再逐一加功能，到現在專案逐漸完善！

5.好高騖遠，急於求成

這個情況就是多見於培訓機構出來的人。我不知道是不是所有城市都是這樣，但是廣州這邊，給我的感覺就是這樣。就是目標不切實際，對自己也不夠認識！之前在群聊的時候，在金三銀四那段時間，很多人找工作，聊天的時候也遇到過很多培訓機構的人。簡歷上是各種精通，剛畢業在培訓機構培訓幾個月，要麼就是自帶兩三年工作經驗，要麼就是說自己培訓了幾個月，技術水平和市面上兩三年的人差不多。總之就是把自己吹得無所不能！但是一出題，就十問九不知。問閉包是什麼，不知道；問原型是什麼，不知道。問繼承是什麼，還是不知道。

上面所說的，只是一個表面的現象，更重要的就是，好高騖遠這個情況，很有可能會導致自己難以找到工作！因為一些企業認為最高只能給你4000工資，但是你自己卻認為自己有實力拿到9000以上的工資。這樣情況，很難找到工作！給人的印象也不好！更重要的是，這可能會影響自己的職業選擇！

個人建議：從實際出發，評估自己。想下自己會什麼，能給企業帶來什麼！也可以停下別人的建議，和對比下別人的技術水平和工資，或者是上網找一些面試題，看下自己能不能完成那些面試題！最後評估下自己，認為自己處於什麼位置！

6.看到難點就逃避

這一點，相信很多人都有感觸，就在開發上，遇到上一個或者幾個自己覺得沒辦法實現的需求或功能。千方百計地想著逃避，比如：這個功能不是很重要，不做可以嗎？這個功能我從來沒弄過，搞不定的。這個功能外包給別人做吧，我們做不了！很多一些逃避話語。大家可以想下，如果每次都是逃避，那麼時間一久，自己技術水平是不是還停留在基礎那個階段？以後要怎麼提升自己的技術水平。

個人建議：迎難而上。在web前端開發這塊，如果遇上了難題是正常的，如果沒遇到難題就是見了鬼！面對難題，我們應該是挑戰難題，而不是逃避！大家都想提升自己的技術水平，挑戰難題不就是一個很好的提升技術水平的實戰機會嗎？如果完成了之前認為不可能完成的難題，這樣就是一個技術水平提升的見證！不是嗎？我也覺得，每天就寫簡單的業務程式碼，不探索新知識，不挑戰難題，這樣做開發也沒多少意思！

7.能用就行，不想最佳化

這個也是一個很常見的情況，很多人認為寫的程式碼能用就行，能實現需求就行！根本不管日後的最佳化。在開發專案或者開發外掛上，雖然我也是提倡:先實現，再最佳化這個方式！但是並不代表我開發完了就完了，不會再想最佳化！如果不試著去最佳化自己的程式碼，不探索寫程式碼的更好方式，以後別說編寫高質量，簡潔的程式碼了，因為自己把學習編寫高質量，簡潔的程式碼的一個重要途徑給封鎖了。還有一個就是，專案上，有些問題可能是潛在的，就是現在看著專案沒出現什麼問題，但並不代表以後不會出現問題。反而在專案開發完了之後，試著去最佳化自己的程式碼，探索更好的實現方式，試著編寫出高質量，簡潔的程式碼。這樣難道不是一個很好的學習過程嗎？至於最佳化程式碼的方式，很多很多（比如常說的：程式碼過於重複，是否引入設計模式？網站效能一般，可否進行最佳化？），最佳化這一塊，也不是說一步就最佳化到最好的，而是至少不會比以前差！關於最佳化，我之前也發過一些資源。很容易找到，網上的資源更是很多！大家挑著看便是！

8.不懂不問和不懂立刻問

不懂不問，這個大家都知道，就是遇到問題，從不問同事或者透過其他方式諮詢別人。就是自己在那裡苦思冥想，嘗試各種解決方案。這樣的方式，最壞的結果就是最終還是解決不了問題，讓同事來詢問開發情況。最好的結果問題解決了，但是解決問題所花的時間會肯定很多。

不懂立刻問，這個就是詞面的意思。遇到問題馬上問別人。自己沒怎麼思考或者根本不思考。這樣能解決問題，但是這樣會導致自己可能會頻繁的問同事，會搞得同事很不耐煩。如果把同事的耐心磨沒了，可能回答的語氣可能不會很好。這樣不僅影響同事之間的關係，還會讓自己之後不敢再請教同事，有讓自己處於上面所說的不懂不問的風險。

個人建議：適時請教。遇到不懂的問題，先自己結合上下文思考下，想下以前有沒有遇到這個問題，解決不了去網上找解決方案，如果還沒有解決問題，這個時候再問別人，問同事或者透過其它渠道問別人。這樣自己有了思考，解決問題的時候記憶也很深刻，也不會頻繁的打擾同事！

9.不懂裝懂

這個次面上跟上面的差不多，但實際上不一樣！不懂裝懂就是去問別人的時候，實際上別人的講解並沒有完全聽懂，可能是礙於面子或者是因為不好意思打擾別人那麼久，或者擔心打擾別人太久，所以裝作很懂。但是這樣可能忽悠得了一時，很快又會露出馬腳。這樣會搞得隔一會又要去問別人同樣的問題，這樣反而會搞得別人更加尷尬，更加為難！自己也會打擾別人更多的時間！

個人建議：如果有問題去問別人，只要你問的人不是一個非常沒有耐心的人。他都會耐心的解答你的問題！所以，當問別人問題的時候，一定要確保自己是已經弄懂了問題的緣由，同事一遍沒解釋清楚，自己直接回答不明白，相信很多人都會再詳細的解釋一遍。如果擔心同事工作忙或者其它原因，可以挑一個合適的時間！我現在問同事就是，要麼不問，要問就切底弄懂！當然了，我的同事都很有耐心，每次我有什麼問題，他們都會耐心解答，甚至是擴充套件開來講！

10.沒理清楚需求就寫程式碼

很多人在接到需求之後，第一反應就是寫程式碼，即使是在自己沒把需求理清楚之前也是照樣寫程式碼。另一種情況就是，很多人是邊寫程式碼，邊想需求。這個開發方式，萬一自己對需求理解有誤！可能會導致自己寫的程式碼，很大一部分都要修改，甚至是全部刪除重寫。沒理清楚需求就寫程式碼這個情況，發生的機率應該挺大的，但是一般來說很難發現這個情況，畢竟程式設計師對程式碼的增刪改查是再正常不過了！我本身也不知道，就是在一次的技術分享中，老大提出來的，他的建議就是對於一些稍微複雜一點的需求，先理清楚需求，簡單畫個流程圖，然後在程式碼裡面，先寫上一點註釋，再開始動手寫程式碼！對於這一點，我現在就是在執行當中！除非需求真的很簡單，否則我都會在草稿本上簡單畫一下流程圖。比如下面這個，這個已經是我畫的流程圖裡比較簡單的一個了。根據流程圖，寫好註釋，再寫程式碼，這樣會比較有條理，程式碼也清晰，日後的返工也可能會有，但是不會像以前那麼多！在開發時間上，效率上，都得到了一個提升！

如果你對前端開發這門技術感興趣，這裡推薦一下我的前端學習交流群： 767273102 ，裡面都是學習前端的從最基礎的HTML+CSS+JavaScript。jQuery，Ajax，node，angular等到移動端HTML5的專案實戰的資料都有整理，送給每一位前端小夥伴。最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!

點選： 學習前端，我們是認真的