吃透web前端祕籍，來聽聽大佬是怎麼說的

看看阿里大神對web前端是如何總結的

一.爲何要學習前端開發？

你多是由於興趣，完成一個網站、頁面、功能的成就感。你也多是由於如今前端崗位火爆，就業率高。不論是由於什麼，只要找準了目標，學就是了！

二.Web前端開發是幹什麼的？有沒有「錢」途？

先看一張圖吧

北京高級前端研發工程師的平均月工資爲29.3k,深圳也有15k,「錢」途已經有了。

那前端是幹什麼的呢？

（1）定義：前端開發就是將UI設計師設計好的界面實現，即用一些前端方面的語言（HTML、CSS、jQuery等等）將UI設計變成能夠與用戶交互的網頁；

（2）崗位職責：參與原型需求討論會議，從前端和用戶交互的角度提出一些本身的建議和意見；與產品經理溝通梳理確認原型及需求；與UI設計師溝通，更好的實現界面；與後臺開發人員溝通，實現數據的交互；配合測試人員，解決bug；配合整個團隊，對項目後續的迭代進行開發等工做；

（3）前端工程師目前崗位火爆，只要掌握了真正的前端知識，而不是泛泛而談，找工做也相對比較輕鬆，薪資也是比較可觀的。固然，剛剛入門，個人建議是不要太看重薪資，最應該看中的是有沒有好的環境和平臺能夠學習到更多。當你在好的環境好的平臺學習到更多，積累了必定經驗以後，薪資真的挺簡單。不要被剛剛開始少得可憐的薪資所戰勝，從而放棄，若是你真的想要進入這行，堅持下去吧。將來回過頭來，你會發現，一切就都是這麼簡單明瞭了。

三.學習建議

在你開始入手學習前，有一些小的建議。根據我本身學習的經驗發現，這些建議在如今乃至我之後的崗位生涯裏都是有很大幫助的。還有就是開始學習前，建議能夠先花幾天時間，查找一些如何入門的文章，經過對許多文章及前人的建議。整理出適合本身學習的一套完整計劃，而後在學習過程當中，在本身對前端更加了解以後，作出一些計劃的調整。
好比先根據一份思惟導圖學習，再根據本身實際狀況制定路線

我相信，在這樣的計劃學習之下比一來就開始學習具體知識要快速有效得多。

一、建議的學習步驟

（1）HTML標籤（網頁結構標記語言） +CSS樣式（網頁樣式語言）。它們是實現靜態Web應用最基礎的語言，掌握好它們，你能夠編寫出一個簡單的模塊（如導航等）甚至一個完整的靜態網頁。

（2）Jquery庫（Javascript編程語言的一個必須掌握的庫）。它可讓你以前作的靜態網頁「動起來」，好比（下拉二級菜單、網頁右側工具導航的展開等等交互特效）。

（3）建議花時間看看《DOM編程藝術》這本書，或這類書籍。它是關於Javascript編程語言在網頁開發上面的運用，跟着這本書走下來，你能夠編寫一個簡單的具備交互效果的網站了。

以上幾點就是小白最開始入門學習的東西，建議按照順序學好這三種語言。可使用sublime編輯器進行動手編寫。當你根據學習步驟
完成一個小小的網站時，你會以爲頗有成就感，後續的學習也就信心百增，興趣百倍。

2.完善咱們的基礎知識

（1）HTML5，更高級的標記語言，功能更加豐富多彩。新增許多標籤，好比：canvas、video等，能夠本身實現更多的動畫，炫酷的特效或者播放視頻等等。

（2）CSS3，更高級的樣式語言。你能夠實現豐富多彩的頁面動畫，沒必要要每次都是用js，使用CSS3就能夠輕鬆便捷的實現一些想要的網頁交互。

好比用CSS爲女友畫個愛心，友誼長長久久~

（3）重中之重，javascript編程語言。這是前端必要掌握的真正算得上是編程語言的語言，學會靈活運用javascript，將對之後學習工做有很是大的幫助。掌握它最重要的首先是學習好基礎知識，然後經過不斷的實戰來提高咱們的編程技巧和邏輯思惟。這一塊學習是持續的，直到咱們真正掌握它而且可以靈活運用它。若是最開始學習一兩遍以後，發現暫時沒有提高的空間，咱們能夠暫時放一放。繼續下面的學習，javascript貫穿咱們前端工做中，在以後的學習實現裏也會遇到和鍛鍊到。真正學習起來並不難理解，關鍵是靈活運用。

（4）開始學會使用一些前端的框架，這裏我是指前端的UI框架，它們能夠幫助咱們快速高效的開發一個網站，而且界面風格也好不錯。好比PC端的Bootstrap，其實它是響應式的框架，也能夠用在移動端H5頁面，或者AmazeUi，這是一款專一於移動端的框架。你能夠百度也能夠在對應框架的官網查看文檔，當你學會使用某個框架的時候，其餘的n+1個各類各樣的前端UI框架，你也會信手拈來。

（5）還有一種前端框架，如layui這類的，算是工具類框架。它裏面包含了分頁效果、彈窗效果、日期選擇控件等等內容。當你學習到這個時候或者更後面的學習裏，你能夠去學習如何使用，可以更高效的幫助你完成項目的開發。

（6）經過百度，能夠找到許多網頁交互特效的插件，如二級菜單下拉特效、手風琴菜單、圖片輪播、彈窗效果等等。下載它們源碼及示例，動手學習使用或模仿它們的效果，能夠幫助咱們快速實現一些比較複雜的交互特效。如今有很是多的免費開源插件，讓咱們不用再重複造輪子，直接使用就很方便。固然，個人建議是當你學會使用某個特效插件時，你能夠學習它的源碼，看看效果到底是如何實現的。這也是鞏固學習javascript語言的好方法，你值得擁有哦。

當你能夠完成一個基本的帶有交互效果的頁面以後，參加工做中進一步提高本身就是須要掌握一些流行的前端開發JS框架及高效流行的開發模式。相信到了這一步，你已經成功邁入了前端的大門，接下來就是爲了如何成爲工做中的主力前端工程師而修行了。

四.經常使用的一些前端JS框架建議

（1）vue.js，一款偏向於移動端的JS框架，輕量級。數據驅動交互，學習起來很是容易，它能夠不依賴與Jquery框架獨立使用幫助你開發一個友好的移動端界面。一個前端開發必要掌握的技能，一款流行的JS框架。關於如何使用掌握它，你能夠百度，還能夠去它的官網學習官方文檔，或者是菜鳥網站也有介紹。

（2）react.js，比較起vue，它更復雜一點，重量級一點，可是實現大型的項目也很快速便捷。掌握它也成了諸多公司入職要求，相信學習過vue這類數據驅動框架，在學習起這個就會容易不少。比起日常jQuery開發項目，vue和react開發關鍵是思想會有所轉變，掌握面向對象和數據驅動交互，會讓你感到開發的更加容易和友好。如何掌握它，百度、菜鳥網站、官網文檔都是不錯的選擇。

二、比較流行的開發模式建議

（1）vue + webpack集成開發

（2）react + webpack集成開發

（3）node.js學習及應用，一款可使用javascript語言開發後臺的工具

（4）weex + webpack集成開發，目前不多看到公司使用

（5）angular.js，和vue.js這些差很少，但目前也不多看到使用了

以上的開發框架及開發模式（1）（2）（3），是比較多的互聯網公司團隊，都會採用的。值得去深刻學習，而且當你掌握後，你會發現開發前端項目原來能夠這麼簡單。

保持學習狀態不斷進步

以上的文章都是一些建議。固然貫穿你學習中和之後的工做中，你可能還學要掌握一些其餘的必備技能。如：

（1）學會百度很重要。

（2）學會UI設計文件PSD切圖（必備技能，學會看UI設計交付給你的設計圖）。

（3）學會使用谷歌或火狐瀏覽器的F12開發者模式，在開發過程當中快速調試找到問題。

（4）學會與後臺配合進行數據接口的調試，及解決一些跨域的問題（如：nginx的配置使用）。

（5）學會不一樣項目使用不一樣最佳的開發工具（sublime、editplus、hbuilder、vsCode等等）。

（6）學會使用版本控制工具（如：svn），你與團隊緊密配合的好工具。

學好這些，你就能夠刷一下大廠面試題，比較熱門的面試題

作好充足的準備纔有可能進大廠

我目前是在職前端開發，若是你如今也想學習前端開發技術，在入門學習前端的過程中有碰見任何關於學習方法，學習路線，學習效率等方面的問題，你均可以申請加入我所在的前端學習交流羣。裏面彙集了一些正在 自學前端的初學者,轉行者，初階者，我這裏也有我作前端技術這段時間整理的一些 前端學習思惟導圖，前端大廠面試題，前端開發源碼教程，PDF文檔書籍教程,文章中涉及到的pdf文檔須要的話均可以 戳我獲取。

5、參加工做後，一些建議

（1）認清自我崗位的職責。

（2）與產品經理的配合：瞭解原型及需求，提出本身合理的建議。

（3）與UI設計的配合：根據UI規劃怎樣實現纔是最好最優的方式，而不是拿着設計圖就埋頭苦幹，提出更好的建議。

（4）與其餘前端配合：這個時候代碼規範特別重要，因此從一開始學習前端的時候，我就強調了在學習之初就造成良好的編碼習慣是很不錯的，很必要的。

（5）自個人初步測試：完成一個項目開發後，自我進行功能性的初步測試，無問題後再交付測試人員測試。

（6）配合測試人員，修改bug。

（7）積極配合項目產品的後續迭代。

（8）當你的水平進一步提高，你就要學會管理一個前端團隊進行工做的分配和總體質量及交付時間的把控。這個是一步一步提高的，雖然如今你可能還接觸不到，可是能夠了解一下。