github上最全的資源教程-前端涉及的所有知識體系

前端無疑是2016年最火熱的技術，沒有之一。

各種前端mvc框架層出不窮，angular js，vue，react，前端組件化開發概念已經深入人心。前端工資已經比手機端開發還要高了。

作為個人站長，學習下前端設計也是有必要的，一來有些小的設計問題可以自己解決，同時還能提高自己的審美，提高網站的ui設計水平。

必備基礎技能

前端技能彙總這個項目詳細記錄
了前端工程師牽涉到的各方面知識。在具備基本技能之後可以在裡面找到學習
的方向，完善技能和知識面。

frontend-dev-bookmarks是老外總結的前端開發資源。覆蓋面非常廣。包括各種知識點、工具、技術，非常全面。

以下是個人覺得入門階段應該熟練掌握的基礎技能：

• HTML4，HTML5語法、標簽、語義
• CSS2.1，CSS3規範，與HTML結合實現各種佈局、效果
• Ecma-262定義的javascript的語言核心，原生客戶端javascript，DOM操作，HTML5新增功能
• 一個成熟的客戶端javascript庫，推薦jquery
• 一門伺服器端語言：如果有伺服器端開發經驗，使用已經會的語言即可，如果沒有伺服器端開發經驗，熟悉Java可以選擇Servlet，不熟悉的可以選PHP，能實現簡單登陸註冊功能就足夠支持前端開發了，後續可能需要繼續學習，最基本要求是實現簡單的功能模擬，
• HTTP

在掌握以上基礎技能之後，工作中遇到需要的技術也能快速學習。

基本開發工具

恰當的工具能有效提高學習效率，將重點放在知識本身，在出現問題時能快速定位並
解決問題，以下是個人覺得必備的前端開發工具：

• 文本編輯器：推薦Sublime Text，支持各種插件、主題、設置，使用方便
• 瀏覽器：推薦Google Chrome，更新快，對前端各種標準提供了非常好的支持
• 調試工具：推薦Chrome自帶的Chrome develop tools，可以輕鬆查看DOM結構、樣式，通過控制台輸出調試信息，調試javascript，查看網路等
• 輔助工具：PhotoShop編輯圖片、取色，fireworks量尺寸，AlloyDesigner對比尺寸，以及前面的到的Chrome develop tools，
• FQ工具：lantern, 壁虎漫步

學習方法和學習目標

方法：

1. 入門階段反覆閱讀經典書籍的中文版，書籍中的每一個例子都動手實現併在瀏覽器中查看效果
2. 在具備一定基礎之後可以上網搜各種教程、demo，瞭解各種功能的實際用法和常見功能的實現方法
3. 閱讀HTML，CSS，Javascript標準全面完善知識點
4. 閱讀前端牛人的博客、文章提升對知識的理解
5. 善用搜索引擎

目標：

1. 熟記前面知識點部分的重要概念，結合學習經歷得到自己的理解
2. 熟悉常見功能的實現方法，如常見CSS佈局，Tab控制項等。

入門之路

以下是入門階段不錯的書籍和資料

1. HTML先看《HTML & CSS: Design and Build Websites》1-9章，然後《HTML5: The Missing Manual》1-4章。
2. CSS先看《CSS: The Missing Manual》，然後《CSS權威指南》
3. javascript先看《javascript高級程式設計》，然後《javascript權威指南》
4. HTTP看HTTP權威指南
5. 在整個學習過程中HTML CSS JavaScript會有很多地方需要互相結合，實際工作中也是這樣，一個簡單的功能模塊都需要三者結合才能實現。
6. 動手是學習的重要組成部分，書籍重點講解知識點，例子可能不是很充足，這就需要利用搜索引擎尋找一些簡單教程，照著教程實現功能。以下是一些比較好的教程網址
   • 可以搜索各大公司前端校招筆試面試題作為練習題或者他人總結的前端面試題還有個人總結的面試題（帶參考答案）
   • http://code.tutsplus.com有各種各樣的教程
   • MDN也有很多教程，更重要的是裡面有詳細的文檔，需要查找某個功能時在Google搜索：xxx site:https://developer.mozilla.org
   • http://www.html5rocks.com/zh/也有很多優質教程
   • http://www.sitepoint.com/
   • http://alistapart.com/
7. 原生javascript是需要重點掌握的技能，在掌握原生javascript的基礎上推薦熟練掌握jQuery，在實際工作中用處很大，這方面的書籍有《Learning jQuery》或者去jQuery官網
8. 建一個https://github.com/賬號，保存平時學習中的各種代碼和項目。
9. 有了一定基礎之後可以搭建一個個人博客，記錄學習過程中遇到的問題和解決方法，方便自己查閱也為其他人提供了幫助。也可以去http://www.cnblogs.com/或者http://www.csdn.net/這樣的網站註冊賬號，方便實用
10. 經常實用Google搜索英文資料應該經常找到來自http://stackoverflow.com/的高質量答案，與到問題可以直接在這裡搜索，如果有精力，註冊一個賬號為別人解答問題也能極大提高個人能力。
11. 經典書籍熟讀之後，可以打開前面必備基礎技能部分的鏈接。認真讀對應標準，全面掌握知識

繼續提高

有了前面的基礎之後，前端基本算是入門了，這時候可能每個人心中都有了一些學習方向，如果還是沒有。
可以參考前面必備技能部分提到的那兩個項目，從裡面選一些進行發展學習。以下是一些不錯的方面：

• Grunt：前端自動化工具，提高工作效率
• less css：優秀的CSS預處理器
• bootstrap：優秀的CSS框架，對沒有設計師的團隊很不錯，與less結合使用效果完美
• requirejs：AMD規範的模塊載入器，前端模塊化趨勢的必備工具
• Node.js：JavaScript也可以做後臺，前端工程師地位更上一步
• AngularJS：做Single Page Application的好工具
• 移動端web開發：智能手機的普及讓移動端的流量正在逐步趕超PC端
• Javascript記憶體管理：SPA長期運行需要註意記憶體泄露的問題
• High Performance JavaScript(Build Faster Web Application Interfaces)
• Best Practices for Speeding Up Your Web Site：重要技能

一些個人經歷

LingyuCoder的學習經歷

上面的大神都總結得差不多了，我這裡就胡扯一些吧

####工具

• 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編輯器，快速寫周報，做記錄
• sublime text2：編碼方便，插件多，速度快，性能好
  • emmet：提升html編碼速度必備
  • sublimelinter + 各種語言的lint和hint：代碼糾錯
  • 一些snippets：自動補全，提升開發效率
• Intellij IDEA和WebStorm：集成開發環境，集成了各種功能，開發比sublime要方便，但會比較吃性能
• Mark Men：測量、取色、標註利器，拿到視覺稿之後第一個打開的軟體
• GFW Fucker：我用紅杏，可以的話買個虛擬伺服器當梯子
• iHosts：非常優秀的hosts管理軟體，輕鬆修改hosts，開發調試必備
• Charles：Mac 平臺最好用的抓包分析工具
• Rythem：AlloyTeam出品的代理抓包軟體，非常輕量，安裝簡單，移動端（真機）開發調試很好用
• Wunderlist：一個非常不錯的Todo List，任務、需求多的時候管理起來很方便

####技能
前端的技能其實除了JavaScript（包括NodeJS）、HTML、CSS以外，還有很多。其實前端的技能樹很大，這裡只能列一些我開發中見到的說一說
#####語言基礎
JavaScript：

• 作用域鏈、閉包、運行時上下文、this
• 原型鏈、繼承
• NodeJS基礎和常用API

CSS：

• 選擇器
• 瀏覽器相容性及常見的hack處理
• CSS佈局的方式和原理（盒子模型、BFC、IFC等等）
• CSS 3，如animation、gradient、等等

HTML：

• 語義化標簽

#####進階
JavaScript:

• 非同步控制（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
• 優雅降級、漸進增強
• dont 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等模板引擎，各有各的長處
  • coffee：python工程師最愛，我沒用過
• 環境搭建：主要是將線上代碼映射到本地，併在本地啟動一個demo伺服器，至於模擬數據的mock，見仁見智了
  • 本地代理：ihosts
• 自動化測試：在業務較為穩定的情況下，可以通過自動化測試來減少測試的事件，但需求較多的時候，維護測試用例的成本會很高，可能用自動化測試會起到反效果
  • jasmine
  • mocha
• 生態系統
  • npm
  • bower
  • spm
• 搭建一個屬於自己的博客
  • git pages
  • hexo
  • jekyll

#####未來

• Web Componets：面向未來的組件化開發方式
  • HTML模板
  • Shadow DOM
  • Custom Elements
  • HTML Import
• 移動端Native開發：這也是需要瞭解的，以後前端工程師會經常地和webview打交道，也要瞭解native開發

#####其他
有些東西不是考敲碼就能弄好的，我參與實習的時候感受到了很多，這些是我遇到的也是我感覺自己做的不好的地方

• 對於業務的思考：我個人這方面非常欠缺，所以放在最前面，在敲碼前要多思考業務
• 交流和溝通能力：這個非常重要，前端同時需要與項目經理、產品、交互、後臺打交道，溝通不善會導致很多無用功，延緩項目
• 知識管理、時間管理：input和output的平衡，output是最好的input。如何做好分享，參與社區，做好交流，作好記錄
• 對新技術的渴望，以及敢於嘗試

####入門書
入門可以通過啃書，但書本上的東西很多都已經過時了，在啃書的同時，也要持續關註技術的新動態。這裡推幾本我覺著不錯的書：

• 《JavaScript高級編程》：可以作為入門書籍，但同時也是高級書籍，可以快速吸收基礎，等到提升再回來重新看
• 《JavaScript權威指南》：不太適合入門，但是必備，不理解的地方就去查閱一下，很有幫助
• 《編寫可維護的JavaScript》和：
• 《Node.js開髮指南》：不錯的Nodejs入門書籍
• 《深入淺出Node.js》：Nodejs進階書籍，必備
• 《JavaScript非同步編程》：理解JS非同步的編程理念
• 《JavaScript模式》和《JavaScript設計模式》：JavaScript的代碼模式和設計模式，將開發思維轉變到JavaScript，非常好的書
• 《JavaScript框架設計》：在用輪子同時，應當知道輪子是怎麼轉起來的，講解很詳細，從源碼級別講解框架的各個部分的實現，配合一個現有框架閱讀，可以學到很多東西

• 《Dont 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學習網站，交互很棒
• 前端亂燉：一個前端文章分享的社區，有很多優秀文章
• 正則表達式：一個正則表達式入門教程，非常值得一看
• 阮一峰的博客和張鑫旭的博客：快速瞭解某些知識的捷徑，但是如果需要深挖，還需要其他的資源
• 各路大牛的博客：這個太多了，就不貼了，知乎上有很全的
• 各種規範的官方網站，不懂得時候讀規範

####歷程
以前是做Java SSH的，半路出家做的前端，所以水平比較弱，遇到問題也比較多。基本上入門靠看書和W3C School上的教程，以及一些前端博客，如湯姆大叔的博客。以前也只是使用jQuery，原生js也沒有太多的鑽研，後來逐漸看了很多本動物書，比如老道的語言精粹等等。從這些書中學到了很多語言層面的知識。但這顯然是不夠的，所以我經常會去社區上看看大家在談論什麼，然後去看看相關的資料，感興趣就會多找些資料看看，或者寫一寫demo。學CSS主要就是通過這種方式。後來開始更多的關註各路大牛的博客和一些比較深的書籍，以及關註一些新的知識和框架，並且不斷地練手提交代碼到github，這樣也學到了很多知識。在實習的過程中，切身參與到實際項目開發之中，能學到很多在學校學不到的理念和思維，這點也有很大的幫助。不說了，我要去搬磚求offer了…

MrRaindrop的學習經歷

應qiu神的邀請分享一下前端學習經驗，這裡對前端知識體系架構就不做總結了，各位大神們的總結已經相當到位了，我就貢獻幾個個人認為還比較有用的鏈接大家研究研究就好，然後主要分享一下我在前端學習過程中遇到的問題和總結的經驗教訓吧，如果能幫到想要入門的FE初學者（我就姑且假定為本文的讀者受眾類型了），讓他們少走點彎路，每走一步都知道自己下一步的方向，這是最好了。各位大神的總結和分享詳見qiu神整理的FE-learning。

先說下，前端這個東西每個人都可以有適合自己的學習方法，這篇僅作參考，寫的有點亂，各位湊合看。

緣起

我是屬於誤打誤撞進了前端，之前一直往做游戲的方向去來著，搞過游戲網站，玩過游戲引擎，比如unity，unreal這種商業引擎，搗鼓了幾個游戲原型，不過自打研一進了實驗室，直接就被導師派去寫了js，導師給了我半個月時間讓我寫個基於百度地圖api的數據展示頁面，雖然這個時間還是相當寬裕的，不過之前沒怎麼寫過js，也不會用地圖api，於是我就一邊啃著《Javascript權威指南》（犀牛書）一邊參考實驗室前人留下的“代碼”，總算是把功能都寫出來了。那個頁面算我的js入門作了，也是我前端學習路線的開始。

現在想來，雖然指派了去做前端，但是一直做下去並做好還是得靠興趣維持，當然前端是一個趣味性十足的技術領域，而且社區每天都很“熱鬧”。

項目，下一個項目

我個人認為前端的學習，初學階段你可以完全脫離開書本，以項目驅動。雖然我個人是從犀牛書開始啃的，不過如果你沒有充足的時間，或者覺得啃大部頭乏而無味的話，還是別像我這樣。當然瞭如果決定啃書最好是把書里的例子都跟著敲一遍的。我上研之前沒接觸過js，4月份還沒開學呢就被直接被導師甩了個百度地圖api的項目到臉上，接著就是各種ERP，地圖數據展示，雖然換著花樣來一點不重樣，不過基本上都是前端的活，SSH和android開發也打過醬油，整個實驗室就我一個人寫前端敢信？富客戶端SPA時代的後端就是一個restful介面，代碼量基本都在前端啊，寫的我一個人怎一個爽字了得…期間跟著導師感受了一把創業，每天從7點搞到晚上10點，也算是經歷了一段快速成長期。

掌握一門技術先掌握它的大體框架，想一個能實現的點子，做一個能跑就行的demo，再去完善它的細節，等到demo完成了，對這門技術有了一個感性的認識，再去啃書，收穫會大很多。我從開始原生js寫到jquery，再到extjs，再到angularjs，從導師指定技術，到自己做技術選型，一個項目接著一個項目的練，就跟打怪升級似的。當然沒有項目就去自己創造項目，動手實現自己的想法是件有樂趣和成就感的事。

收集癖和知識管理

前端學習有個特點，很多東西都很零碎，分散，需要你自己去整理、歸納和總結。在微博、知乎上follow了眾多的大神，你不僅僅是為了聽八卦，大神們的隻言片語有時候留下的是無盡的餘味，很有可能一個不經意提到的一個詞就成為你下一個學習的目標。收集這些信息，善用google，提問，思考。就像游戲里的收集要素，前端學習也是充滿搜集要素的一個“游戲”，只不過你需要一個知識管理工具來充當物品欄和倉庫，我所知道的大牛們無一不是知識管理工具的重度使用者。以前用的oneNote，那時候還沒綁定到雲存儲，現在基本上用evernote，筆記已經累計到1200+篇。書簽一直打算用delicious，因為它是基於tag管理的，但一直沒用起來。當然重點不在於這些工具，但是趁手的工具可以提高你的學習效率。最關鍵當然是隨時保持旺盛的學習欲望，你的目標是瞭解有關前端的一切（當然不是所有都要掌握，因為畢竟你的精力有限，而且現實的說這也不太可能）。

跟對神

這個可控性貌似不大…跟對老大這個就不多說了，一定程度要看造化。不過話說回來，多跟身邊的高手交流是王道，這個高手不一定要多高，但是一定要對技術有熱情。研一的時候熱情高漲，每天7點進實驗室門，然後發現有個家伙居然比我還早到。後來發現這家伙上午就走了，下午又來了，而且導師對此習以為常，原來這家伙晚上不睡覺通宵寫代碼，上午才跑回去睡。後來經常和這位神討論問題，每次感覺經驗值蹭蹭蹭的往上漲。然後實驗室還有一位神，被前面這位通宵神形容為“只能望其項背，一直在追趕，從來沒趕上”，兩位神的特點都是什麼都瞭解一點，所以什麼都能跟你討論得起來，我有段時間做了個讀書計劃，從c/c++到vc/mfc再到unix網路編程，最後一路看到java核心技術和MSDN上的C#編程指南，和神們也能扯得很high了。

總之就是這兩位神把我拉進了坑，或者說從一個坑跳進另一坑，雖然兩位神都不是搞前端的，不過技術之間總有相通之處。

讀書

讀書，多讀書，讀好書。在劉未鵬的博客里看到過一個公式，你第一個月的工資等於之前買過（讀過）的技術書價格總和（這裡說的技術書指那些經典的公認的好書）。討論這個公式的正確性似乎沒什麼意義，然而它的合理性是毋庸置疑的，那就是多讀經典技術書。最極端的一個例子，google的徐宥在我的大學裡面說他掃蕩了圖書館的整個TP312書架…對於前端的經典書籍，後面列了一個我收集的前端書列（如果有遺漏的前端經典好書，還請留言告訴我），有條件可以嘗試刷一遍這些書，我也是在找完整的時間去啃完它們。之前說的，前端知識點鬆散，收集零散的知識點，從博客里快速學習等，這些只是前端學習的一個方面，如果你要想深入理解一個知識體系，瞭解它的來龍去脈，對它建立系統認識，讀經典書還是必不可少的。

我從最開始啃完犀牛書，然後接著去看了其他一些和前端干係不大的經典技術書，再後來通過實驗室的項目和自己弄的一些小項目逐漸對前端領域比較上路以後，又看了《Javascript模式》、《Javascript設計模式》、《編寫可維護的Javascript》，後來瞭解到node並開始用node搞點小玩意兒，又看了本《NodeJS up and run》和《Mongodb權威指南》，不過感覺前者略坑。那會兒樸靈那本深入淺出（曬書麽麽噠）還沒出，後來出了就去圖書館借來看完，這麼看下來感覺還不錯，不過感覺看的還是偏少了，還需要繼續刷（參照上面的書列）。

前端的定位

前端的定位關乎到你需要吸收什麼樣的知識和技能，決定在技術世界里你對什麼需要格外敏感。如果你認為前端僅僅停留在切頁面，實現交互和視覺的要求，那你對前端的認識還停留在初級階段。阿裡終面的時候我問了考官這麼個問題：前端技術日新月異，範圍越擴越寬，標準越來越豐富，似乎任何一個觸角都能伸出很遠。怎麼給前端一個合適的定位？考官給我分析了半天，然後總結成一句話，就是用戶和網站的聯結者，用戶體驗的創造者（原話不是這樣，但大體是這個意思）。也就是說前端的終極目標其實就是創造用戶體驗，提升用戶體驗，以用戶體驗為中心。不管你是從交互設計上下手，還是從性能優化出發，或者改進工作流提升工作流效率，最終都是為了創造和提升用戶體驗，最終都要體現到用戶體驗這一點上來。我認為這個總結非常有道理（當然“用戶體驗”這個詞太寬泛了，並且不僅僅是前端工程師的範疇，比如開發後臺的時候對一個數據處理過程進行優化，提升了整體性能，這也是對用戶體驗的一個提升）。

現在的前端工程師做到一定階段不可避免會接觸到很多比切頁面、實現視覺要求、實現交互等更深入的問題，比如前端自動化、圖像編程、性能優化等等，再往後推一點就是PHP/JSP/ASP/nodeJs，過去後端模板一般屬於後端的範疇，現在隨著前端架構的演進，可能會讓你去寫後端模板的代碼，需要用到後端語言（PHP/Java/C#等），這就是所謂大前端（然而這與前端的定位並不是相背離的，大前端處理的依然是與用戶接觸的部分，仍然是對用戶體驗的優化）。可能最常見或者被談論最多的就是node，其實這幾種技術選型都可以，bat三家據說百度用PHP比較多，阿裡用node比較多。

玉伯在他的博客里提過所謂全端是橫向的，全棧是縱向的。全端即所有的終端說白了都是前端，因為都關乎到用戶體驗，直接和用戶接觸。適應多終端的開發，要求你在web前端的基礎上，可能還要去擴展android開發和ios開發的知識，好在由於hybrid開發方式的流行，對使用native語言開發的技能會要求的不那麼深入。

全棧可以說是最適合初創公司的一種發展類型，廣義上認為是從前端乾到後端，從開發乾到運維，這種就不說了，一般人應該不會想要去往這個方向發展，想要成為這種意義上的full-stack dev的，可能用不著來看我這篇文章了；而狹義上的全棧特指使用js語言從前端寫到架設在nodeJs上的後端，前後端統一語言，統一編程模型，甚至公用同一套代碼。更多瞭解全棧開發可以看看玉伯這篇說說全棧工程師。

以上是我對前端以及衍生出來的技術路線的一些淺薄理解，學習一個領域掌握它的整體上的走向和趨勢還是挺重要的。另外如果想要對前端學習方向、職業成長路徑有一個整體的認識，推薦看看拔赤總結的這篇前端開發十日談。

最後

貢獻幾個對前端學習、面試有幫助的鏈接：

• 前端面試問題合集（Front-end-Developer-Interview-Questions）
• 前端技能彙總（JacksonTian）
• 另一張前端技能彙總圖
• 前端那點事兒（書列）

byr論壇yiyizym的建議

與grunt相比，學習gulp會比較簡單

做SPA的話，推薦backbone.js和 backbone.marionette.js

FQ不用折騰，花十塊錢買一個月的 紅杏。

把基礎打扎實了再學這些都沒問題。

html 沒什麼好說的，有空學學html5。

css 儘量看文檔 ，因為很多中文資料都各執一辭，看多了反而會糊塗。

有個網站可以查找html/css標簽、屬性在各個瀏覽器中的支持情況，挺好用的。

javascript 就看 javascript高級程式設計 。不過這麼厚的書看過就會忘。對javascript核心概念的講解：對象/原型鏈/ 構造函數/執行上下文/作用域鏈/閉包/this，這裡有篇不錯的文章。

有閑情可以看看 ecmascript 6，計劃明年6月就發佈啦。阮一峰的網站有入門資料。

jquery 有很多 API,這個網站可以方便查到。有時間弄清楚jquery deferred 的用法。

多給 sublimetext 裝插件，比如說檢查代碼錯誤的，新建目錄文件的，整理代碼的。

綜合類

入門類

工具類

綜合效果搜索平臺

團隊Blog|周報類

開發中心

Nodejs

綜合API

Ecmascript

Js template

HTML5(HTML)

CSS3(CSS)

Angularjs

Angularjs	地址
Angular.js 的一些學習資源	https://github.com/dolymood/AngularLearning
angularjs中文社區	您的分享是我們最大的動力! -Advertisement- 更多相關文章 JS是按值傳遞還是按引用傳遞 按值傳遞(call by value)是最常用的求值策略：函數的形參是被調用時所傳實參的副本。修改形參的值並不會影響實參。 按引用傳遞(call by reference)時，函數的形參接收實參的隱式引用，而不再是副本。這意味著函數形參的值如果被修改，實參也會被修改。同時兩者指向相同的值。 按引用傳 ... backbone學習總結（二） 今天來看下backbone的路由控制的功能。其實個人感覺backbone，模塊就那麼幾個，熟悉它的框架結構，以及組成，就差不多。 廢話不多說，我們來看看還剩下的功能。 關於路由和歷史管理 通過 Backbone.Router.extend 來創建路由模型，鏈接到不同的指定的動作和事件.當應用已經全部 ... CSS之position理解 position的四個屬性值： <div id="demo"> <div id="demo1">demo1</div> <div id="demo1">demo2</div></div> 1. relativerelative屬性是相對它本身的位置來進行偏移的。如果設定demo1一個relative ... 移動端-js觸摸事件 開發者工具 在移動開發中，一種較為容易的做法是，先在桌面上開始原型設計，然後再在打算要支持的設備上處理移動特有的部分。多點觸摸正是難以在PC上進行測試的那些功能之一，因為大部分的PC都沒有觸摸輸入。 不得不在移動設備上進行的測試有可能會拉長你的開發周期，因為你所做的每項改變都需要提交代碼到伺服器上， ... bootstrap的實際應用 學習bootstrap 中的柵格系統 非常重要 排版佈局經常用到 其中 row col 可以相互嵌套 穿插使用 例如： 會達成這樣的效果： 在BOOTSTRAP中 有很多現成的 按鈕 內聯框架 導航 輪播圖 等各種炫酷效果的源代碼 可直接複製粘貼皆可使用 不過 當他的細節部分不適合個人使用要求時 改 ... 最近關於less sass的新手總結 less 是基於CSS的一種 擴展技術.less 通過解析器 （比如koala）轉換文件格式為CSS@+變數名+值語法變數LESS 允許開發者自定義變數，變數可以在全局樣式中使用，變數使得樣式修改起來更加簡單。我們可以從下麵的代碼瞭解變數的使用及作用：清單 3 LESS 文件 @border-col ... js對象深拷貝 由於引用類型（數組、對象）是按地址傳遞，直接拷貝是淺拷貝，即修改拷貝後的變數，原變數也會改變。有時需要深拷貝一個對象，這時就需要遍歷徹底複製，使原對象和拷貝對象完全脫離關係。 代碼： 實現細節：假定傳入的是一個引用類型，首先判定傳入的是數組還是對象，根據判定結果，確定o是初始化為空數組還是空對象。之 ... web面試題大全 $HTML， HTTP，web綜合問題 常見排序演算法的時間複雜度,空間複雜度 前端需要註意哪些SEO web開發中會話跟蹤的方法有哪些 <img>的title和alt有什麼區別 doctype是什麼,舉例常見doctype及特點 HTML全局屬性(global attribute)有哪些 什麼是we ... 一周排行 -Advertisement- WPF 已知問題 監聽 WMI 事件導致觸摸失效 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ... [STAThread]特性 [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ... UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ... .NET 多版本 WinForm 開源控制項庫 SunnyUI 前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ... .net core8 使用Swagger（附當前源碼） 說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ... WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大 一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ... C# 開源教程帶你輕鬆掌握數據結構與演算法 前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ... 第22篇 生成proto文件bat腳本 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ... 記一次 .NET某上位機視覺程式 卡死分析 一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ... 醫學DICOM文件與PACS系統進行數據傳輸 前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ... 所有分類 NET技術 編程語言 軟件設計 WEB前端 手機開發 數據庫技術 操作系統