前端方向-学习指路
只要能看到的,不管是 app,小程序,pc端,都是前端做的
前后端分離模式下,只需要從服務器獲取數據,展示到頁面,
或者把客戶端獲取到的數據傳遞給服務器,屬于應用層和交互層
后臺需要處理數據,需要會算法
通過算法考察思維邏輯
動手是學習的重要組成部分:書籍中的每一個例子都動手實現并在瀏覽器中查看效果
掌握原生javascript的基礎上推薦熟練掌握jQuery,在實際工作中用處很大
Grunt:前端自動化工具,提高工作效率
less css:優秀的CSS預處理器
bootstrap:優秀的CSS框架,對沒有設計師的團隊很不錯,與less結合使用效果完美
requirejs:AMD規范的模塊加載器,前端模塊化趨勢的必備工具
Node.js:JavaScript也可以做后臺,前端工程師地位更上一步
AngularJS:做Single Page Application的好工具
移動端web開發:智能手機的普及讓移動端的流量正在逐步趕超PC端
Javascript內存管理:SPA長期運行需要注意內存泄露的問題
工具
chrome dev tools:前端開發調試利器
console(廢話)
elements:元素樣式調整,很常用
sources:代碼中添加斷點,單步調試,以及單步調試過程中查看內存中的對象
watch expression:通過表達式查看當前內存中的值
call stack:查看調用棧,開啟async,可以看異步調用棧(這個非常有用,尤其是ajax調試的時候)
scope variables:作用域鏈上的變量,非常有用
network:抓包查看每個請求,非常重要,前后端聯調必備
timeline:分析渲染、js執行等等各個階段,性能優化利器
emulation:模擬移動端環境,mobile頁面開發必備
liveload: 修改頁面后自動刷新,不用按F5
dimensions:直接在頁面上測量的利器
livestyle:css樣式修改后自動起效果,不需要刷新,elements修改后也能同步到代碼中
image tool:測量,取色
UC二維碼:移動端調試掃碼必備
pagespeed,YSlow:頁面性能分析和優化插件
馬克飛象:優秀的在線markdown編輯器,快速寫周報,做記錄
Mark Men:測量、取色、標注利器,拿到視覺稿之后第一個打開的軟件
GFW Fucker:我用紅杏,可以的話買個虛擬服務器當梯子
iHosts:非常優秀的hosts管理軟件,輕松修改hosts,開發調試必備
Charles:Mac 平臺最好用的抓包分析工具
Rythem:AlloyTeam出品的代理抓包軟件,非常輕量,安裝簡單,移動端(真機)開發調試很好用
Wunderlist:一個非常不錯的Todo List,任務、需求多的時候管理起來很方便
語言基礎
作用域鏈、閉包、運行時上下文、this
原型鏈、繼承
NodeJS基礎和常用API
選擇器
瀏覽器兼容性及常見的hack處理
CSS布局的方式和原理(盒子模型、BFC、IFC等等)
CSS 3,如animation、gradient、等等
語義化標簽
進階
異步控制(Promise、ES6 generator、Async)
模塊化的開發方式(AMD、CMD、KMD等等)
JavaScript解釋器的一些相關知識
異步IO實現
垃圾回收
事件隊列
常用框架使用及其原理
jQuery:基于選擇器的框架,但個人認為不能叫框架,應該算工具庫,因為不具備模塊加載機制,其中源碼很適合閱讀鉆研
AngularJS/Avalon等MVVM框架:著重理解MVVM模式本身的理念和雙向綁定的實現,如何解耦
underscore:優秀的工具庫,方便的理解常用工具代碼片段的實現
polymer/React: 組件化開發,面向未來,理解組件化開發的原理
CSS和HTML:主要是CSS3的特性和HTML5的特性,以及瀏覽器處理的流程和繪制原理
DOM樹、CSSOM樹、渲染樹的構建流程及頁面渲染的過程
解析HTML、CSS、JavaScript時造成的阻塞
HTML5相關
SVG及矢量圖原理
Canvas開發及動畫原理(幀動畫)
Video和Audio
flex box布局方式
icon fonts的使用
常用NodeJs的package:
koa
express
underscore
async
gulp
grunt
connect
request
一些理念:
響應式Web
優雅降級、漸進增強
don’t make me think
網頁可用性、可訪問性、其中的意義
SEO搜索引擎優化,了解搜索引擎的原理
SPA的好處和問題
性能優化:
減少請求數量(sprite、combo)
善用緩存(application cache、http緩存、CDN、localstorage、sessionstorage,備忘錄模式)
減少選擇器消耗(從右到左),減少DOM操作(DOM和JavaScript解釋器的分離)
CSS的回流與重繪
項目
版本管理:首推Git,用過Git都不會想用SVN了
Git:本地版本管理的機制
SVN:遠程中心的版本管理機制
自動化構建:主要就是less、模板、coffee等的預處理以及對代碼壓縮和合并
Gulp:基于流構建,速度快、模塊質量好
Grunt:獨立任務構建,速度慢,配置蛋疼,靈活性高
預處理和模板引擎
less:語法簡單,但功能有限
jade、ejs、velocity等模板引擎,各有各的長處 - caffe:python工程師最愛,我沒用過
環境搭建:主要是將線上代碼映射到本地,并在本地啟動一個demo服務器,至于模擬數據的mock,見仁見智了
本地代理:ihosts
自動化測試:在業務較為穩定的情況下,可以通過自動化測試來減少測試的事件,但需求較多的時候,維護測試用例的成本會很高,可能用自動化測試會起到反效果
jasmine
mocha
生態系統
npm
bower
spm
搭建一個屬于自己的博客
git pages
hexo
jekyll
未來
HTML模板
Shadow DOM
Custom Elements
HTML Import
其他
有些東西不是考敲碼就能弄好的,
- 對于業務的思考:我個人這方面非常欠缺,所以放在最前面,在敲碼前要多思考業務
- 交流和溝通能力:這個非常重要,前端同時需要與項目經理、產品、交互、后臺打交道,溝通不善會導致很多無用功,延緩項目
- 知識管理、時間管理:input和output的平衡,output是最好的input。如何做好分享,參與社區,做好交流,作好記錄
- 對新技術的渴望,以及敢于嘗試
入門書
入門可以通過啃書,但書本上的東西很多都已經過時了,在啃書的同時,也要持續關注技術的新動態。
《JavaScript高級編程》:可以作為入門書籍,但同時也是高級書籍,可以快速吸收基礎,等到提升再回來重新看
《JavaScript權威指南》:不太適合入門,但是必備,不理解的地方就去查閱一下,很有幫助
《編寫可維護的JavaScript》
《JavaScript DOM編程藝術》學習JavaScript和DOM開發的必讀之作。
《Node.js開發指南》:不錯的Nodejs入門書籍
《深入淺出Node.js》:Nodejs進階書籍,必備
《JavaScript異步編程》:理解JS異步的編程理念
《JavaScript模式》和《JavaScript設計模式》:JavaScript的代碼模式和設計模式,將開發思維轉變到JavaScript,非常好的書
《JavaScript框架設計》:在用輪子同時,應當知道輪子是怎么轉起來的,講解很詳細,從源碼級別講解框架的各個部分的實現,配合一個現有框架閱讀,可以學到很多東西
《Don`t make me think》:網頁設計的理念,了解用戶行為,非常不錯
《CSS禪意花園》:經久不衰的一部著作,同樣傳遞了網頁設計中的理念以及設計中需要注意的問題
《高性能JavaScript》和《高性能HTML5》:強調性能的書,其中不只是性能優化,還有很多原理層面的東西值得學習
《HTML5 Canvas核心技術》:我正在讀的一本書,對于canvas的使用,動畫的實現,以及動畫框架的開發都非常有幫助
《HTTP權威指南》:HTTP協議相關必備,前端開發調試的時候也會經常涉及到其中的知識
《響應式Web設計》:技術本身不難,重要的是響應式網頁的設計理念,以及移動先行的思想
《JavaScript語言精粹》:老道的書,也是普及JavaScript的開發思維的一本好書,非常適合入門
一些不錯的網站
- github:沒啥好說的,多閱讀別人的源碼,多上傳自己的源碼,向世界各地的大牛學習
- codepen:感受前端之美的必選之地,里面有很多酷炫的效果和優秀的插件
- echojs:快速了解js新資訊的網站
- stackoverflow和segmentfault:基本上各種問題都能在上面獲得解答
- google web fundamentals:每篇文章都適合仔細閱讀
- static files:開放的CDN,很好用
- iconfont:阿里的矢量圖標庫,非常不錯,支持CDN而且支持項目
- html5 rocks: 一個不錯的網站,很多瀏覽器的新特性以及前沿的技術,都能在這上面找到文章
- css tricks:如何活用CSS,以及了解CSS新特性,這里可以滿足你
- JavaScript 秘密花園 JavaScript初學必看,非常不錯
- w3cplus:一個前端學習的網站,里面的文章質量都挺不錯的
- node school:一個不錯的node學習網站
- learn git branch:一個git學習網站,交互很棒
- 前端亂燉:一個前端文章分享的社區,有很多優秀文章
- 正則表達式:一個正則表達式入門教程,非常值得一看
- 阮一峰的博客和張鑫旭的博客:快速了解某些知識的捷徑,但是如果需要深挖,還需要其他的資源
- 各路大牛的博客:知乎上有很全的
- 各種規范的官方網站,不懂得時候讀規范
前端的定位
前端技術日新月異,范圍越擴越寬,標準越來越豐富,似乎任何一個觸角都能伸出很遠。怎么給前端一個合適的定位?
用戶和網站的聯結者,用戶體驗的創造者
不管你是從交互設計上下手,還是從性能優化出發,或者改進工作流提升工作流效率,最終都是為了創造和提升用戶體驗,最終都要體現到用戶體驗這一點上來。
現在的前端工程師做到一定階段不可避免會接觸到很多比切頁面、實現視覺要求、實現交互等更深入的問題,比如前端自動化、圖像編程、性能優化等等,再往后推一點就是PHP/JSP/ASP/nodeJs,
現在隨著前端架構的演進,可能會讓你去寫后端模板的代碼,需要用到后端語言(PHP/Java/C#等),這就是所謂大前端(然而這與前端的定位并不是相背離的,大前端處理的依然是與用戶接觸的部分,仍然是對用戶體驗的優化)??赡茏畛R娀蛘弑徽務撟疃嗟木褪莕ode,其實這幾種技術選型都可以,bat三家據說百度用PHP比較多,阿里用node比較多。
玉伯在他的博客里提過所謂全端是橫向的,全棧是縱向的。全端即所有的終端說白了都是前端,因為都關乎到用戶體驗,直接和用戶接觸。適應多終端的開發,要求你在web前端的基礎上,可能還要去擴展android開發和ios開發的知識,好在由于hybrid開發方式的流行,對使用native語言開發的技能會要求的不那么深入。
總結
- 上一篇: 从前端菜鸟到大神,看这一篇就够了
- 下一篇: 实用高效,27款腾讯热门开源项目推荐