|
什么是web前端？ 在以前，通俗的講是網(wǎng)頁制作，在現(xiàn)在，哼哼，可以參考這篇文章 http://tieba.baidu.com/p/4817153404 那么如果高效優(yōu)雅的學(xué)習(xí)web呢？ 注：以下純屬個(gè)人觀點(diǎn)，如果不當(dāng)請(qǐng)指出 第一階段、html(5)+css(3) Html和css是基礎(chǔ)中的基礎(chǔ)，但對(duì)于很多html標(biāo)簽和css屬性是平常開發(fā)中很難用到的，如果系統(tǒng)的學(xué)真的不知道學(xué)到猴年馬月，所以學(xué)會(huì)一些常用的就好了，這些基礎(chǔ)就不用買書了。推薦跟著慕課網(wǎng)在線敲一下代碼，它那里講的都是一些常用的東西http://www.imooc.com/learn/9 第二階段、Javascript Dom 在這個(gè)階段，你可以學(xué)會(huì)怎么用js寫一些網(wǎng)頁特效啊、交互啊之類的。注：這是js里面最簡單最低級(jí)的功能，并不是學(xué)會(huì)了寫特效就學(xué)會(huì)了js。 推薦書籍：《Javascript DOM 編程藝術(shù)》 網(wǎng)站資源推薦：http://www.imooc.com/course/list?c=javascript 慕課網(wǎng)上有很多小效果的實(shí)現(xiàn)，可以跟著熟悉js的語法規(guī)則 第三階段、Jquery 什么是jquery？Jquery是一個(gè)js的庫。 以前有朋友問我，為什么有jquery還要學(xué)js，這里大家要搞清楚，jq只是一個(gè)庫，它把一些常用的繁瑣的js方法用自己的方式封裝好，便于我們使用，它強(qiáng)大的地方在瀏覽器兼容，既然提高了兼容性，那么內(nèi)部肯定有繁瑣的條件判斷，所以jq的性能會(huì)比較偏低。 jq的插件有很多，可以實(shí)現(xiàn)很多效果。 所以jquery也是我們學(xué)習(xí)的基礎(chǔ)之一。 推薦書籍《鋒利的jquery》 第四階段、一個(gè)UI-庫(bootstrap or other) 既然javascript有庫（jquery），那么css呢？ 沒錯(cuò)，一般css的庫叫做ui庫，或者叫做css框架，比如bootstrap，以下簡稱bs，我們學(xué)習(xí)bs的目的是什么？ 1．學(xué)習(xí)優(yōu)雅的css命名規(guī)范 2．學(xué)習(xí)什么是可復(fù)用的web組件，為什么要復(fù)用這些組件 3．提高開發(fā)效率 Bootstrap中文文檔：http://v3./ 學(xué)完這些，你也應(yīng)該入門前端了。學(xué)完以上四個(gè)部分你應(yīng)該會(huì)： 1) 高度還原psd設(shè)計(jì)稿；（簡稱切圖） 附上切圖教程：http://www.imooc.com/learn/506 2) 會(huì)熟練使用瀏覽器調(diào)試工具 Web調(diào)試工具：http://www.imooc.com/learn/137 3) 看的懂別人寫的網(wǎng)頁，會(huì)修修改改 如果這些你都會(huì)，4k+月薪?jīng)]問題 進(jìn)階（以下知識(shí)點(diǎn)不分前后） l 移動(dòng)端頁面制作 會(huì)寫pc端頁面還遠(yuǎn)遠(yuǎn)不夠，我們還得會(huì)寫移動(dòng)端頁面： 稍微復(fù)雜點(diǎn)的flex布局、響應(yīng)式布局和移動(dòng)端基礎(chǔ)知識(shí)： http://www.imooc.com/learn/494 很簡單的rem布局： http:///flexible-js.html l 混合APP開發(fā) 什么是混合app開發(fā)？ 原生的android、ios應(yīng)用我們稱之為nativeApp。 運(yùn)行在網(wǎng)頁的app我們稱之為webapp，比如淘寶觸屏版。 混合App其實(shí)就是原生態(tài)App與Web App的結(jié)合，簡單說混合App擁有原生App的外殼，內(nèi)部的展現(xiàn)都是通過Web App的H5技術(shù)實(shí)現(xiàn)，在通俗點(diǎn)就是可以用html5技術(shù)寫一個(gè)可以安裝在手機(jī)上的應(yīng)用，這個(gè)應(yīng)用可以擴(kuò)展一些js功能，比如訪問手機(jī)硬件等等。 H5+與mui：http://www./ l Javascript高級(jí)部分 我們之前說過js遠(yuǎn)不是寫寫特效那么簡單，這里我們學(xué)習(xí)： a.Ajax 什么是ajax？ Ajax就是前端與后臺(tái)交互，實(shí)現(xiàn)數(shù)據(jù)獲取、異步請(qǐng)求等等。 這方面知識(shí)百度很多 b.Canvas 什么是canvas？ HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像，可以實(shí)現(xiàn)很多炫酷的效果，有興趣的同學(xué)可以學(xué)一學(xué) c.H5新特性 離線儲(chǔ)存、視頻、音頻。。。等等 d.Js面向?qū)ο笈c原型 這方面內(nèi)容很重要，得好好學(xué)一學(xué)。了解js的原型機(jī)制。 推薦書籍《jsvascript面向?qū)ο缶幊獭贰赌悴恢赖膉avascript》 e.Js設(shè)計(jì)模式 如果想深學(xué)，可以看一看，推薦書籍《javascript 設(shè)計(jì)模式與開發(fā)實(shí)踐》 l Nodejs與npm 什么是nodejs？ 首先，nodejs是一門后臺(tái)語言，對(duì)，后臺(tái)語言！在node上，我們可以用js語言進(jìn)行后臺(tái)的開發(fā)。相比較php，node的優(yōu)點(diǎn)是非阻塞IO處理，采用事件驅(qū)動(dòng)的異步編程，對(duì)前端開發(fā)人員很友好，做前端的很容易上手 什么是npm？ Npm是nodejs里的一個(gè)包管理器，首先得理解模塊化，類似java的package。 這些剛開始可以不必深學(xué)，但是得知道是干啥的： Nodejs中文網(wǎng)：http:/// 慕課網(wǎng)nodejs視頻：http://www.imooc.com/learn/348 l ECMAScript2015 ECMAScript2015，也稱es6，下一代javascript語言，雖說是下一代，但是我已經(jīng)用了好一陣子了。^-^ ES6加了很多js新特性，比如解構(gòu)賦值，promise對(duì)象，模塊，塊作用域等等等等。。。 一般現(xiàn)有瀏覽器對(duì)es6還不是全面支持，但是可以通過一些預(yù)編譯，編譯成es5語法格式，讓瀏覽器支持它。 阮一峰--《ECMAScript6入門》:http://es6. l 前端自動(dòng)化 又是nodejs這個(gè)家伙，nodejs不僅將前端帶到了后端，也在前端掀起了自動(dòng)化的浪潮。 為什么要自動(dòng)化。電腦能完成的為什么要手動(dòng)完成，可以實(shí)現(xiàn)：
常見的自動(dòng)化工具有g(shù)runt，glup，還有后起只秀webpack。 這里我強(qiáng)烈推薦學(xué)習(xí)webpack，學(xué)成之后你會(huì)真正感受到什么是酸爽。 l 前端MVC框架 重頭戲來了，會(huì)一個(gè)mvc框架，是現(xiàn)在前端招聘高級(jí)技術(shù)人員的基本條件。 為什么我要把這個(gè)放在后面，因?yàn)閷W(xué)起來并不是很難，繁瑣的是一開始的各種node配置或者文檔的es6語法看不懂，所以的先了解node與es6. 現(xiàn)在主流的框架有angular ，react ，vue。 Angular和react的社區(qū)背景很龐大，一個(gè)是谷歌，一個(gè)是facebook。 而我更佩服的是vue，vuejs的作者是中國人，名叫尤雨溪，從他的個(gè)人項(xiàng)目，到github三萬+star。附上尤大美照一張 簡直提高了程序員的平均顏值 相比于ng和react，vue更加輕量，更易于學(xué)習(xí)。當(dāng)然每個(gè)框架都有自己的優(yōu)點(diǎn)和缺點(diǎn)，具體怎么學(xué)習(xí)，自己選擇吧。 l Github 和 git 如果你是學(xué)了幾年計(jì)算機(jī)專業(yè)的學(xué)生，連github都不知道的話，那么我真的不知道你整天在看些啥。 Github是最大的開源代碼托管平臺(tái)，你可以在github上查看一些開源項(xiàng)目，你可以給一個(gè)項(xiàng)目貢獻(xiàn)自己的代碼（當(dāng)然得符合開發(fā)規(guī)范），你也可以將自己的代碼開源供他人使用。 Git是一個(gè)分布式的版本控制系統(tǒng)，相比于svn，git可以在離線的狀態(tài)下在本地commit做一個(gè)版本，當(dāng)有網(wǎng)的時(shí)候在一并push到倉庫。 關(guān)于git和github的內(nèi)容可以自行百度 |
|
|
