網(wǎng)站前端開發(fā)工程師學(xué)習(xí)，需要掌握哪些知識？
大家好，我是小邱！一個(gè)不負(fù)正業(yè)的程序員。
在此給大家推薦一些提高效率的工具。
思維導(dǎo)圖工具-XMind，免費(fèi)，Windows/Mac平臺都有,當(dāng)我們學(xué)習(xí)知識的時(shí)候，仔仔一直堅(jiān)信理解并梳理清楚才能夠算真學(xué)會(huì)了。所以我會(huì)結(jié)合博客和XMind，讓知識體系更為清晰。圖形類工具-PowerPoint，Mac平臺OmniGraffle，可能你也發(fā)現(xiàn)了，這篇文章里面的配圖很多都是用Omni制作的。不會(huì)休息的程序員不是好的切圖仔，所以使用Pomodoro管理我們自己的節(jié)奏吧，寫上20分鐘，休息上5分鐘，在5分鐘的時(shí)候思考那些沒解決的bug，保證會(huì)比坐在電腦前想著要舒服，值得高興的是，它又是一個(gè)全平臺產(chǎn)品。下面是學(xué)習(xí)前端的一些學(xué)習(xí)路線：
HTML部分對HTML5的理解，Web語義化，SEO頁面加載的過程結(jié)構(gòu)組織新增API 如本地存儲、CanvasCSS部分CSS3 transition transform animatew3c盒子模型 和 IE盒子模型，box-sizing屬性BFC選擇器優(yōu)先級less 與 sassbackground-* 系列屬性，這個(gè)不要忽視了，還是很重要的JS部分原型 閉包聲明提升基本數(shù)據(jù)類型高階函數(shù)JSON、JSONP 跨域 iframe 通信Ajax原生DOM操作（比如 逆序DOM節(jié)點(diǎn)）事件捕捉，捕獲，冒泡，代理Array常用函數(shù)String常用函數(shù)ES5 + ES6VUE框架部分（大部分按照簡歷來）HTTP1/2 理解、狀態(tài)碼、優(yōu)化、緩存控制（必考）TCP三次握手，四次揮手XSS與CSRF（必考）學(xué)習(xí)經(jīng)歷和方法性能優(yōu)化單元測試React + Redux總結(jié)有一個(gè)好的學(xué)習(xí)方法比什么都重要，雖然這篇文章是討論前端的，但是學(xué)習(xí)的方法并不局限在前端上，掌握好的學(xué)習(xí)方式，可以無形中減少我們的學(xué)習(xí)成本，努力不是用消耗的時(shí)間來衡量的，我們需要的是學(xué)好，更需要玩好，開心才是最重要的。
零基礎(chǔ)的前端開發(fā)初學(xué)者應(yīng)如何系統(tǒng)地學(xué)習(xí)？
所以語言來學(xué)習(xí)都有共同之處。作為一名年輕數(shù)的前端開發(fā)轉(zhuǎn)的話，如果從零到一去學(xué)習(xí)前端開發(fā)知識，我給出以下建議。
第一，學(xué)習(xí)HTML和CSS的基礎(chǔ)知識。這里你需要熟悉HTML各個(gè)標(biāo)簽的功能和作用，學(xué)習(xí)css的各種屬性等。因?yàn)槟隳玫矫拦ぬ峁┙o你的設(shè)計(jì)之后，把它開發(fā)成一個(gè)精美頁面，就在是內(nèi)容來說，需要HTML和css的知識。如果你不清楚每一個(gè)屬性是什么樣子的，那么你在開發(fā)的時(shí)時(shí)候效率比較低，還先查一下需要用什么屬性再進(jìn)行開發(fā)。
這類知識的學(xué)習(xí)可以充分利用目前的在線平臺，例如菜鳥教程，慕課網(wǎng)等等。如果你想通過書本學(xué)習(xí)，可以找銷量比較高的書。
第二點(diǎn)，學(xué)習(xí)JavaScript相關(guān)知識。在前端里js是非常重要的，頁面中的聯(lián)動(dòng)數(shù)據(jù)處理，或者是彈窗或者是一些觸發(fā)事件等等，都是需要js來實(shí)現(xiàn)的。
js就要比html和css復(fù)雜很多，你可以用js實(shí)現(xiàn)一個(gè)算法，而另外兩種不能。書籍的話推薦《avaScript DOM 編程藝術(shù)》、大厚本里Zakas的《JavaScript高級程序設(shè)計(jì)》 、犀牛書《JavaScript權(quán)威指南》、《高性能JavaScript》等等
JavaScript學(xué)習(xí)可以參考上面提到，從零到一，從一到N，循序漸進(jìn)掌握。此外，還需要學(xué)習(xí)AJAX、jQuery相關(guān)知識，一個(gè)是跟后端交互，一個(gè)是快速、簡潔的JavaScript框架。
第三點(diǎn)，學(xué)習(xí)前端框架web前端三大主流框架都是Angular、React、Vue。前端框架的使用可以讓你如虎添翼，更方便快速的開發(fā)。
(1) Angular
Angular原名angularJS誕生于2009年，之前都是用jquery開發(fā)，自從angular的出現(xiàn)讓開發(fā)者有了新的選擇，這個(gè)框架之前開發(fā)中有使用過，它把后端的一些開發(fā)模式移植到前端來實(shí)現(xiàn)，如MVC、依賴注入等。
(2) React
React，facebook出品，正式版推出是在2013年，比angular晚了4年，但得益于其創(chuàng)新式的VirtualDOM，性能上碾壓angularJS，一經(jīng)推出，火的一塌糊涂。 特點(diǎn)很多，VirtualDOM、JSX、Diff算法等，支持ES6語法，采用函數(shù)式編程，門檻稍高，但也更靈活，能讓開發(fā)具有更多可能性。
(3) Vue
Vue作為最晚推出的框架（2014年），借鑒了前輩angular和react的特點(diǎn)（如VirtualDOM、雙向數(shù)據(jù)綁定、diff算法、響應(yīng)式屬性、組件化開發(fā)等）并做了相關(guān)優(yōu)化，使其使用起來更加方便，更容易上手，比較少適合初學(xué)者。國內(nèi)目前使用vue的開發(fā)者越來越多，的確也比較好用
第四點(diǎn)，著手開發(fā)一個(gè)練手的應(yīng)用。除了一系列基礎(chǔ)知識的學(xué)習(xí)之外，必要的開發(fā)練習(xí)還是很重要的。你在學(xué)習(xí)基礎(chǔ)知識的時(shí)候同時(shí)加以練習(xí)，這樣你可以知道每一個(gè)變量它具體實(shí)現(xiàn)的是什么樣的效果。
其實(shí)是將你學(xué)過的所有知識給我廢話哦。開發(fā)一個(gè)完整的應(yīng)用，將你所學(xué)的知識盡可能的應(yīng)用其中，這樣對你會(huì)有更大的提升，因?yàn)閷W(xué)習(xí)編程語言的目的最終的結(jié)果就是開發(fā)出一個(gè)完整的應(yīng)用。我實(shí)際開發(fā)應(yīng)用的過程中，你就會(huì)知道某個(gè)方法在具體場景下如何使用。