web前端學習路線與書籍推薦

什麼是web前端？

在之前，通俗的講是網頁製做，在如今，哼哼，能夠參考這篇文章

http://tieba.baidu.com/p/4817153404

 

那麼若是高效優雅的學習web呢？

注：如下純屬我的觀點，若是不當請指出

 

第一階段、html(5)+css(3)

Html和css是基礎中的基礎，但對於不少html標籤和css屬性是日常開發中很難用到的，若是系統的學真的不知道學到猴年馬月，因此學會一些經常使用的就行了，這些基礎就不用買書了。推薦跟着慕課網在線敲一下代碼，它那裏講的都是一些經常使用的東西http://www.imooc.com/learn/9

 

第二階段、Javascript Dom

在這個階段，你能夠學會怎麼用js寫一些網頁特效啊、交互啊之類的。注：這是js裏面最簡單最低級的功能，並非學會了寫特效就學會了js。

推薦書籍：《Javascript DOM 編程藝術》

 

網站資源推薦：http://www.imooc.com/course/list?c=javascript

慕課網上有不少小效果的實現，能夠跟着熟悉js的語法規則

 

第三階段、Jquery

什麼是jquery？Jquery是一個js的庫。

之前有朋友問我，爲何有jquery還要學js，這裏你們要搞清楚，jq只是一個庫，它把一些經常使用的繁瑣的js方法用本身的方式封裝好，便於咱們使用，它強大的地方在瀏覽器兼容，既然提升了兼容性，那麼內部確定有繁瑣的條件判斷，因此jq的性能會比較偏低。

jq的插件有不少，能夠實現不少效果。

因此jquery也是咱們學習的基礎之一。

推薦書籍《鋒利的jquery》

 

 

 

第四階段、一個UI-庫(bootstrap or other)

既然javascript有庫（jquery），那麼css呢？

沒錯，通常css的庫叫作ui庫，或者叫作css框架，好比bootstrap，如下簡稱bs，咱們學習bs的目的是什麼？

　　1．學習優雅的css命名規範

　　2．學習什麼是可複用的web組件，爲何要複用這些組件

　　3．提升開發效率

Bootstrap中文文檔：http://v3.bootcss.com/

 

學完這些，你也應該入門前端了。學完以上四個部分你應該會：

　　1) 高度還原psd設計稿；（簡稱切圖）

　　附上切圖教程：http://www.imooc.com/learn/506

　　2) 會熟練使用瀏覽器調試工具

　　Web調試工具：http://www.imooc.com/learn/137

　　3) 看的懂別人寫的網頁，會修修改改

若是這些你都會，4k+月薪沒問題

 

 

進階（如下知識點不分先後）

l 移動端頁面製做

會寫pc端頁面還遠遠不夠，咱們還得會寫移動端頁面：

稍微複雜點的flex佈局、響應式佈局和移動端基礎知識：

http://www.imooc.com/learn/494

很簡單的rem佈局：

http://caibaojian.com/flexible-js.html

 

l 混合APP開發

什麼是混合app開發？

原生的android、ios應用咱們稱之爲nativeApp。

運行在網頁的app咱們稱之爲webapp，好比淘寶觸屏版。

混合App其實就是原生態App與Web App的結合，簡單說混合App擁有原生App的外殼，內部的展示都是經過Web App的H5技術實現，在通俗點就是能夠用html5技術寫一個能夠安裝在手機上的應用，這個應用能夠擴展一些js功能，好比訪問手機硬件等等。

H5+與mui：http://www.dcloud.io/

 

l Javascript高級部分

咱們以前說過js遠不是寫寫特效那麼簡單，這裏咱們學習：

　　a.Ajax

　　什麼是ajax？

　　Ajax就是前端與後臺交互，實現數據獲取、異步請求等等。

　　這方面知識百度不少

 

　　b.Canvas

　　什麼是canvas？

　　HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像，能夠實現不少炫酷的效果，有興趣的同窗能夠學一學

 

　　c.H5新特性

　　離線儲存、視頻、音頻。。。等等

 

　　d.Js面向對象與原型

　　這方面內容很重要，得好好學一學。瞭解js的原型機制。

　　推薦書籍《jsvascript面向對象編程》《你不知道的javascript》

 　　     

   

　　e.Js設計模式

 

若是想深學，能夠看一看，推薦書籍《javascript 設計模式與開發實踐》

 

 

l Nodejs與npm

什麼是nodejs？

首先，nodejs是一門後臺語言，對，後臺語言！在node上，咱們能夠用js語言進行後臺的開發。相比較php，node的優勢是非阻塞IO處理，採用事件驅動的異步編程，對前端開發人員很友好，作前端的很容易上手

什麼是npm？

Npm是nodejs裏的一個包管理器，首先得理解模塊化，相似java的package。

 

這些剛開始能夠沒必要深學，可是得知道是幹啥的：

Nodejs中文網：http://nodejs.cn/

慕課網nodejs視頻：http://www.imooc.com/learn/348

 

l ECMAScript2015

ECMAScript2015，也稱es6，下一代javascript語言，雖然說是下一代，可是我已經用了好一陣子了。^-^

ES6加了不少js新特性，好比解構賦值，promise對象，模塊，塊做用域等等等等。。。

通常現有瀏覽器對es6還不是全面支持，可是能夠經過一些預編譯，編譯成es5語法格式，讓瀏覽器支持它。

阮一峯--《ECMAScript6入門》:http://es6.ruanyifeng.com

 

l 前端自動化

又是nodejs這個傢伙，nodejs不只將前端帶到了後端，也在前端掀起了自動化的浪潮。

爲何要自動化。電腦能完成的爲何要手動完成，能夠實現：

1. 圖片無損壓縮
2. Sass，less等css預編譯的編譯與壓縮
3. Js文件壓縮合並
4. 自動檢測文件變化，開發時網頁自動刷新
5. 對各個模塊的管理
6. ......

 

常見的自動化工具備grunt，glup，還有後起只秀webpack。

這裏我強烈推薦學習webpack，學成以後你會真正感覺到什麼是酸爽。

 

l 前端MVC框架

重頭戲來了，會一個mvc框架，是如今前端招聘高級技術人員的基本條件。

爲何我要把這個放在後面，由於學起來並非很難，繁瑣的是一開始的各類node配置或者文檔的es6語法看不懂，因此的先了解node與es6.

如今主流的框架有angular ，react ，vue。

Angular和react的社區背景很龐大，一個是谷歌，一個是facebook。

而我更佩服的是vue，vuejs的做者是中國人，名叫尤雨溪，從他的我的項目，到github三萬+star。附上尤大美照一張

 

簡直提升了程序員的平均顏值

 

相比於ng和react，vue更加輕量，更易於學習。固然每一個框架都有本身的優勢和缺點，具體怎麼學習，本身選擇吧。

 

l Github 和 git

   若是你是學了幾年計算機專業的學生，連github都不知道的話，那麼我真的不知道你成天在看些啥。

Github是最大的開源代碼託管平臺，你能夠在github上查看一些開源項目，你能夠給一個項目貢獻本身的代碼（固然得符合開發規範），你也能夠將本身的代碼開源供他人使用。

Git是一個分佈式的版本控制系統，相比於svn，git能夠在離線的狀態下在本地commit作一個版本，當有網的時候在一併push到倉庫。

關於git和github的內容能夠自行百度

附上個人github主頁：https://github.com/zhuhuahuablogs  ^-^

 

介紹這麼多也差很少了，前端一天一個樣！如果源於興趣，請深學。 我的網站：http://zhuhuahua.applinzi.com