漫談前端之路

前言

前端之路何其漫漫~

    說明：本篇文章原是寫給學弟學妹的，但想來花的功夫確實很多，就把此篇文章當作本身的一個階段性總結文章了，會保持長期更新。

HTML

    總的來講HTML並不難，甚至能夠說很無腦……HTML的標籤我的以爲過一遍就得，知道何時該用什麼標籤就能夠了，由於在之後的開發中打交道最多的就是各類各樣的標籤，想不熟都難。就像如今我寫這篇文章用的Markdown同樣，只是幾個標籤的反覆應用。那麼html的學習就相對來講很自由了，能夠跟着w3schoolW3school網址過一遍標籤，網上也有不少其它網站作這個的，像菜鳥教程,慕課網視頻之類的均可以用,等熟練了就能夠去國外看看一些前端的新技術，像MDN,W3cschool(國際)，stackoverflow(最大的程序員問答網站)。

HTML重點

1. 標籤，span,div分清他們的特性，哪些是塊級元素，哪些是行內元素;

2. 語義化編程,HTML5的新元素的運用;

3. 按照XHTML規範寫代碼,XHTML簡單說是一種比HTML規範更加嚴格的HTML;

4. XML，這個和HTML實際上關係不大但長得很像，瞭解下便可，這是一種做爲數據傳輸的文本形式，現在用的更多的是json傳輸數據，XML基本已經退出歷史舞臺了;

CSS

    一個網頁，咱們把它分爲結構層（HTML），樣式層（CSS），行爲層（JavaScript）。這三門語言就構成了咱們日常所見到的全部的網頁。須要強調的是，包括手機端網頁在內都逃脫不了這三門語言，只不過是無數的前輩爲了讓後來人寫代碼更自由一點，更爽一點，本身封裝了不少函數供咱們調用。好比HTML ，CSS比較有名的框架Bootstrap,JavaScript的jQuery。Bootstrap是Twitter員工設計的如今整個github上star數最多的估計就是bootstrap了，截止改動日期已經達到了96802,相信過不了多久就會突破十萬了！bootstrap呢，有人說這是專門爲後端設計的框架，由於它運用起來十分的簡單，將文件引入後，知道它的定義效果是什麼樣的就能很熟練的運用，並且支持移動端，響應式佈局作的很好，這是它受歡迎的很大一部分緣由~關於jquery,JQuery是繼prototype以後又一個優秀的Javascript庫。它是輕量級的js庫 ，它兼容CSS3，還兼容各類瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）,jQuery是免費、開源的，使用MIT許可協議。jQuery的語法設計可使開發更加便捷，例如操做文檔對象、選擇DOM元素、製做動畫效果、事件處理、使用Ajax以及其餘功能。設計理念就是寫更少的代碼作更多的事，所以這個庫用起來仍是很爽的，但一樣也致使不少人會用jQuery實現某個功能殊不知道原生js如何實現，我的以爲原生js仍是要學深的，畢竟框架和庫老是在改變，但核心——JavaScript是不會變的。
    那麼CSS該如何學習呢，就一個字，敲！等你把CSS全部的坑都踩過一遍以後，CSS也就完全出師了。在CSS3出來以前CSS就是一個純粹的樣式表，想要什麼樣式，直接設置就OK，但隨着CSS3的推出，整個CSS好像就被打了雞血同樣，煥發着活力。由於在必定程度上它把JavaScript的活給搶了，好比簡單動畫，對鼠標事件的某些觸發等等，不少人說CSS是實際上是設計師的工具，由於他沒有變量也沒有條件語句，純粹的羅列代碼，不少程序員都以爲寫CSS很痛苦，事實上也的確如此，因此有了sass和less等CSS預處理器，這個讓CSS寫起來變得爽多了~另外，CSS3的動畫也是很值得研究的。

CSS重點

1. 明白什麼是塊級元素，什麼是內聯元素；塊級元素（div, form，h1-h6,hr,p等），內聯元素（span,b,a,i,img）；

2. id和class選擇器的理解；

3. div和CSS的配合（包括疊加，定位和浮動）；

4. 佈局，普通，自適應，響應式，流式等佈局（一點點理解吧）；

5. 對於這張圖的理解；；

6. less和sass的學習；

7. bootstrap學習;

8. CSS3動畫 @keyframes;

JavaScript

    首先我想讓你們明白的是，這門語言很好入門，何況是在你們學了一學期C語言的前提下，但一樣要明白的是做爲一門編程語言，想要精通這門語言毫不是一兩月那麼簡單的。在瀏覽器裏面有一個叫JS引擎的東西，它是用C++寫出來的，而它的做用就是渲染JavaScript代碼，說的通俗點，就是讓瀏覽器知道咱們所寫出來的JavaScript應該如何解析。Chrome之因此讓人感受快就是由於它本身有一個牛逼的V8引擎，這是其它四個瀏覽器（IE，Firefox,Opera,Safari）所沒有的，這個V8引擎不論解析JavaScript仍是Jquery都特別的吊，因此呈現頁面也就特別的快。這裏須要說一下的是，瀏覽器解析一個網頁的順序大致上是這樣的：先加載HTML標籤組成DOM樹（不知道DOM是啥沒關係，學完數據結構就明白了），遇到link,script而後加載相關的CSS或是JavaScript代碼，這也是爲何通常script標籤寫在body以後的緣由，由於一旦相關的DOM沒有加載完而JavaScript須要對它有操做，那瀏覽器就要懵逼了。
    若是說HTML和CSS給網頁穿上了一件衣服的話，那麼JavaScript就是在構造網頁的五臟六腑了。咱們在編寫代碼的時候必定要記住咱們是在和瀏覽器說話，是在和瀏覽器交流，你要讓瀏覽器明白你想要呈現出的效果是什麼，否則你讓它猜（它的確會猜，這也是HTML代碼比較自由的緣由，不過仍是推薦你們按照XHTML的要求寫代碼）,瀏覽器會感受很操蛋的，那這個交流就很不成功，即便呈現出了想要的頁面，之後想要優化的話就比較費力了。
    附上幾個學習地址：慕課網視頻；W3School；我這裏還有極客學院的視頻有要的能夠找我拷。給你們總結下JavaScript的重點吧：

1. 若是你認爲JS就是操做DOM樹，彈出個警告框那麼簡單的話就錯了，必定要抱着謙虛的態度去學（學完HTML，CSS很容易讓人產生JavaScript也很簡單的錯覺），固然它並無C++那麼逆天，好好學仍是很容易出成績的。

2. 表單驗證，對於表單的提交，容錯性的考慮；

3. 網頁特效，好比咱們常常看到的圖片輪播，菜單導航（有一部分是純粹的CSS代碼寫的）等；

4. 數據傳輸，經過Ajax咱們能夠在不刷新網頁的前提下更新網頁的部分元素哦，並且經過對於數據的操做，咱們能夠實現諸如瀑布流，數據交換等功能。這點能夠參考QQ空間網頁版看好友動態，只要你往下一直翻，就有結果呈現出來。之前咱們數據傳輸的形式是直接把php代碼寫在HTML文件中，但AJAX的出現打破了這一僵局，使得先後端分離的更爲完全，由於只須要一個接口，先後端定下接口也就各幹各事了。

5. 事件觸發（鼠標點擊，鍵盤），開發WebAPP的話得考慮手機系統API的調用，和鼠標鍵盤時間就不同的了，前端的API實際上只有14w+但webapp光安卓的API就有40w+,因此webapp是個大坑，在它還無法超越原生性能以前仍是不要觸碰的好~；

6. OOP,jaascript沒有傳統的類的概念，因此它的不少東西實際上都是特立獨行的一套，但OOP思想纔是javascript的精髓，前面操做個DOM樹，頁面優化啥的實際上並無多少技術含量;剛開始可能會無從下手，相信我，每一個人都是這樣。先從一個小demo寫起來,起碼{}得有啊;

7. json，接觸了OOP,學會了AJAX那麼如今就得學下json了，json是一種數據格式，在頁面交互中,後端會把數據以json格式返回，前端用ajax拿到後，把這個字符串進行相應的解析,從而獲得咱們須要的數據。到了這一步，你就能夠出去找項目了，只有實踐才能不斷提升本身；

8. 閉包，這個後期很重要，也是javascript的一大特點，簡單的說，閉包就是實現了在函數外調用函數內定義的局部變量的功能；

9. 原型鏈和繼承，這是個很抽象的東西，但頗有用處的東西，必定要深刻看才行，真的，否則真的看不懂...找個角落，帶上耳機，看看閉包原型鏈未嘗不是一種樂趣呢~;

10. 庫和框架的學習，近幾年jquery不是很受待見了，這倒不是說jquery不值得學了,只是新技術層出不窮，使得jquery的優點再也不明顯，這其實是個好事，一方面說明技術不斷進步，另外一方面也說明前端始終散發着活力。最近幾年angularjs,react，Vue都是比較火的框架，有機會能夠看看，你會發現寫前端頓時變成了一件享受的事情，國內的框架還有dcloud,apicloud等等,這倆國人設計出來主要的方向是webapp，因此想作app的童鞋也能夠嘗試下，感覺下一次開發多平臺調用的快感~關於webapp有興趣的能夠了解下，這裏按下不表。框架建議學完jquery再看;

11. webpack,grunt,gulp等前端構建工具的學習和使用;

12. ECMAscript6學習阮一峯的日誌;

13. Nodejs學習;

後端

    如今的前端並非純粹的前端，絕大數都已經叛變了！咱們口口聲聲宣稱着要實現先後端分離（實際上這纔是開發的終極目標），但在實際開發中每每不能分離，因此基本每個前端都會學一門後臺語言，比較熱門的後臺語言有：PHP，Java，Python，Node；PHP運用的最爲普遍，Java適合開發大型網站（什麼是大型網站呢，就相似於淘寶那種滿天的圖片數據那種），如今世界上80%網站仍是用的PHP的，因此PHP儘可能瞭解下（這估計是大家下學期考慮的事了），Node就是js(和js的語法啥的一毛同樣)，不過它多了一個模塊，彌補了js的缺陷，關於模塊....不知道大家理解不理解，像java有類文件，Python有import機制，PHP有require和include。如今不懂Node的前端是很尷尬的，因此之後有機會也要了解下的。Node我也還在學習中,按下不表;

後端重點

1. PHP語法簡單的瞭解;

2. PHP框架了解CI,thinkphp,laravel等等;

3. SQL語句學習，這個必備，雖然如今的數據庫工具十分的強大，但必要的SQL語句還得懂要不怎麼用PHP代碼操做數據庫呢~;

4. Node學習，Node發展實在太快，醉的不行，如今都6.2.0版本了~;

5. PHP7.0語法瞭解，這個具體的不太清楚,聽那些後端說加了不少新的特性~;

6. 其它語言推薦，也能夠嘗試下Java寫後端的感受，試試Python，Python在寫爬蟲和數據處理上效率仍是很給勁的~

其它

    Photoshop,身爲前端工程師Photoshop確定是要掌握的由於不少時候設計師給的圖並非切好的，咱們主要本身切圖，因而乎，切圖也就成了咱們的必備技能，切圖仔的戲稱由此而來。另外，會點Photoshop也能夠給本身PP圖，裝裝逼嘛~
     git，svn的使用，鏈接github啊，服務器提交代碼啊，仍是很方便的，這個看我的，往深了也是頗有意思的。
    不少人以爲前端工程師不須要懂算法，但事實倒是各大公司的面試題裏都會多多少少有算法題，這門學問很深，倒也沒必要深刻研究，術業有專攻，能把前端一層搞好就不錯了，切記眼高手低~，一些比較基礎經典的算法，好比快速排序算法，堆排序算法，歸併排序，選擇排序算法，深度優先，廣度優先...等等等，試着用javascript敲一遍成就感仍是很大大滴有的~~~;
    數據結構~有算法也就有數據結構咯~棧，隊列等線性表，樹，圖;come on,baby!
    網絡協議，咱們知道OSI七層協議：物理層，數據鏈路層，網絡層，傳輸層，會話層，表示層，應用層；咱們所作的都是在這層皮膚上（應用層）,接觸最多的就是是HTTP協議了，協議這個玩意看不見摸不着的，很抽象，咱們能夠用一些抓包工具抓包像Wireshark,Fiddler等抓包工具,能夠很方便抓取數據，其中wireshark各類協議通吃，也是國際上承認度很高的一款抓包工具，Fiddler通常開發者用的比較多，它能夠抓取HTTPS協議，並且對於前端後端交互的數據有很好的處理，深受前端開發者的喜好~。協議這東西看起來很無用，彷佛黑客用的比較多一點~但這玩意有個好處——穩定啊，不會變，整個世界都在用的就是TCP/IP，學習成本低，也不會貶值，何不拿來耍耍~另外，不少公司面試都會問本機和服務器創建鏈接時的三次握手具體都發生了什麼~因此協議這塊仍是頗有必要學的；
    操做系統...以我如今的水平說不出來...沒學過，不過起碼得熟悉window，Linux,Mac系統的操做吧(好像仍是啥都沒說，留着之後補充吧);

前端工具

    做爲一個前端開發者，要有適合本身的工具作開發使用，那麼使用IDE還文本是編輯器，我在這裏就不給建議了，剛開始的我的傾向仍是文本編輯器，由於不一樣於其它語言，HTML有點像語言學科，須要記，使用IDE的話不太利於記憶標籤。IDE的話推薦WebStorm和atom(我如今再用)，國內有一款Hbuilder（可開發webapp，配合mui,html5plus,dcloud），我用過一段時間.....很蛋疼的IDE，界面設計的很不錯，也還好用，也一直在我電腦裏，但不寫APP的話是不會打開的....像VS,Dreamweaver之流能夠體驗，要是你骨骼驚奇以爲好用也能夠用....並不強求；文本編輯器呢，那不用說確定Sublime，Sublime強大的插件支持讓它如虎添翼，用着用着就會發現，實際上在插件的支持下它自己就是一個IDE，但卻沒有IDE啓動緩慢的詬病。剛開始能夠各類工具（notepad++，UEditor，Vim等等）都試一下，不過我相信最後你仍是會回到Sublime的懷抱的（若是你以爲Sublime很差用，那隻能說明你還不會用它）。附上學習地址：慕課視頻，Sublime相關博客；安裝的話網上教程多得是，本身百一下就行。
    說完了開發工具，再來講下調試工具，調試工具的話，Firefox有一個 插件叫Firebug很好用，也可使用瀏覽器自帶的開發者工具（按F12就出來了，console的使用，XHR的使用，斷點調試，基本已經足夠平常開發了），若是要對網頁某個元素進行操做或是瞭解就把鼠標放到元素下面，右鍵檢查就OK。或是直接點擊左上角的箭頭移動鼠標到要檢查的元素上面。調試很重要，前端前輩們在很長一段時間裏調試JavaScript純粹靠運氣。因此咱們是很幸運的。

平常學習

書籍推薦

    《JavaScript高級程序設計》《JavaScript權威指南》若是你要走前端這兩本書是必買的，甚至整個職業生涯有這兩本書就足夠了，尤爲是高程深刻淺出很適合新手學習。
    《JavaScript DOM編程藝術》很通俗，適合入門；
    《鋒利的jquery》jquery入門書；
    《PHP和MySQL web開發》這本是不少人PHP的入門書籍，經典程度不亞於高程；
    《深刻淺出nodeJS》國內最好的nodejs書籍，淘寶在職大牛樸靈著做，但這本不適合入門...入門的話推薦看下面這本
    《Nodejs開發指南》郭家寶著做;
    《圖解HTTP》經過漫畫的形式講解HTTP協議，很通俗易懂，小日本的這本書的確不錯哦~
    《HTTP權威指南》HTTP權威書籍，O'REILLY出品必屬精品~條件好的話真心推薦把O'REILLY出版的前端方面的書都買來看看;

自媒體平臺推薦

    做爲一個程序員，咱們逛的網站確定就有偏向性咯，要說程序員彙集地確定是Github(感興趣的能夠了解下，這裏按下不表)，國內網站作的比較好的博客平臺有CSDN，博客園，Segmentfault，V2EX,MDN，掘金等等，常常逛逛這些網站看看大牛們的博客也是頗有好處的。固然像知乎，今日頭條等相似自媒體平臺，想學也是有不少文章能夠看得。微信訂閱號推薦：優秀網頁設計，前端開發，Web開發，差評（這個主要是增加點Web以外的互聯網知識），前端大全。微博帳號推薦：IT程序猿，優秀網頁設計，酷勤網-程序員的那點事。你們有好的媒體平臺記得分享給我啊，嘿嘿。

前端大牛/團隊推薦

    前端的世界變化快，但也正由於此涌現出了一批大牛，他們對新技術的學習樂此不疲，經常自發的翻譯新技術文章，解釋新技術要點，成爲新技術的佈道者。張鑫旭,阮一峯，嗷嗷，李成銀，拔持，聶微東，囧克斯，justjavac.....還有一些牛×的前端團隊,360的奇舞團，百度FEX，淘寶FED,騰訊的alloy......這些基本就是國內前端技術的最前沿了，想學新技術或是想把一個點挖深能夠多關注下這些站點~