前端學習路線整理

正文

資源教程:

1. 綜合類

   • 前端知識體系

   • 前端知識結構

   • Web前端開發大系概覽

   • Web前端開發大系概覽-中文版

   • Web Front-end Stack v2.2

   • 免費的編程中文書籍索引

   • 前端書籍

   • 前端免費書籍大全

   • 前端知識體系

   • 免費的編程中文書籍索引

   • 智能社 - 精通JavaScript開發

   • 從新介紹 JavaScript（JS 教程）

   • 麻省理工學院公開課：計算機科學及編程導論

   • JavaScript中的this陷阱的最全收集–沒有之一

   • JS函數式編程指南

   • JavaScript Promise迷你書（中文版）

   • 騰訊移動Web前端知識庫

   • Front-End-Develop-Guide 前端開發指南

   • 前端開發筆記本

   • 大前端工具集 - 聶微東

   • 前端開發者手冊

2. 入門類

   • 前端入門教程

   • 瘳雪峯的Javascript教程

   • jQuery基礎教程

   • 前端工程師必備的PS技能——切圖篇

   • 結合我的經歷總結的前端入門方法

3. 效果類

   • 彈出層

   • 焦點圖輪播特效

4. 工具類

   • css sprite 雪碧圖製做

   • 版本控制入門 – 搬進 Github

   • Grunt-beginner前端自動化工具

5. 慕課專題

   • 張鑫旭 - 慕課系列

   • lyn - 慕課系列

   • 艾倫 - 慕課系列

   • 碧仔 - Hello，移動WEB

6. 週報類

   • 平安科技移動開發二隊技術週報

六. API:

1. 總目錄

1. 開發中心

   • mozilla js參考

   • chrome開發中心（chrome的內核已轉向blink）

   • safari開發中心

   • microsoft js參考

   • js祕密花園

   • js祕密花園

   • w3help 綜合Bug集合網站

2. 綜合搜索

   • javascripting

   • 各類流行庫搜索

3. 綜合API

   • runoob.com-包含各類API集合

   • 開源中國在線API文檔合集

   • devdocs 英文綜合API網站

2. jQuery

• jQuery API 中文文檔

• hemin 在線版

• css88 jq api

• css88 jqui api

• 學習jquery

• jquery 源碼查找

3. Ecmascript

• Understanding ECMAScript 6 - Nicholas C. Zakas

• exploring-es6

• exploring-es6翻譯

• exploring-es6翻譯後預覽

• 阮一峯 es6

• 阮一峯 Javascript

• ECMA-262，第 5 版

• es5

4. Js template

• template-chooser

• artTemplate

• tomdjs

• 淘寶模板juicer模板

• Fxtpl v1.0 繁星前端模板引擎

• laytpl

• mozilla - nunjucks

• Juicer

• dustjs

• etpl

5. 彈出層

• artDialog 最新版

• artDialog 文檔

• google code 下載地址

• 賢心彈出層

• 響應式用戶交互組件庫

• sweetalert-有css3動畫彈出層

6. CSS

• CSS 語法參考

• CSS3動畫手冊

• 騰訊css3動畫製做工具

• 志爺css小工具集合

• css3 js 移動大雜燴

• bouncejs 觸摸庫

• css3 按鈕動畫

• animate.css

• 全局CSS的終結(狗帶) [譯]

7. Angularjs

• Angular.js 的一些學習資源

• angularjs中文社區

• Angularjs源碼學習

• Angularjs源碼學習

• angular對bootstrap的封裝

• angularjs + nodejs

• 呂大豹 Angularjs

• AngularJS 最佳實踐

• Angular的一些擴展指令

• Angular數據綁定原理

• 一些擴展Angular UI組件

• Ember和AngularJS的性能測試

• 帶你走近AngularJS - 基本功能介紹

• Angularjs開發指南

• Angularjs學習

• 不要帶着jQuery的思惟去學習AngularJS

• angularjs 學習筆記

• angularjs 開發指南

• angularjs 英文資料

• angular bootstrap

• angular jq mobile

• angular ui

• 整合jQuery Mobile+AngularJS經驗談

• 有jQuery背景，該如何用AngularJS編程思想

• AngularJS在線教程

• angular學習筆記

8. React

• react.js 中文論壇

• react.js 官方網址

• react.js 官方文檔

• react.js material UI

• react.js TouchstoneJS UI

• react.js amazeui UI

• React 入門實例教程 - 阮一峯

• React Native 中文版

• Webpack 和 React 小書 - 前端亂燉

• Webpack 和 React 小書 - gitbook

• webpack

• Webpack，101入門體驗

• webpack入門教程

• 基於webpack搭建前端工程解決方案探索

• React原創實戰視頻教程

9. 移動端API

1. API

   • 99移動端知識集合

   • 移動端前端開發知識庫

   • 移動前端的一些坑和解決方法（外觀表現）

   • 【原】移動web資源整理

   • zepto 1.0 中文手冊

   • zepto 1.0 中文手冊

   • zepto 1.1.2

   • zepto 中文註釋

   • jqmobile 手冊

   • 移動瀏覽器開發集合

   • 移動開發大雜燴

   • 微信webview中的一些問題

2. 框架

   • 特點的HTML框架能夠建立精美的iOS應用

   • 淘寶SUI

10. avalon

• avalonjs

• Avalon新一代UI庫： OniUI

• avalon.oniui-基於avalon的組件庫

11. Requriejs

• Javascript模塊化編程（一）：模塊的寫法

• Javascript模塊化編程（二）：AMD規範

• Javascript模塊化編程（三）：require.js的用法

• RequireJS入門（一）

• RequireJS入門（二）

• RequireJS進階（三）

• requrie源碼學習

• requrie 入門指南

• requrieJS 學習筆記

• requriejs 其一

• require backbone結合

12. Seajs

• seajs

• seajs 中文手冊

13. Less,sass

• sass

• sass教程-sass中國

• Sass 中文文檔

• less

14. Markdown

• Markdown 語法說明 (簡體中文版)

• markdown入門參考

• gitbook 國外的在線markdown可編輯成書

• mdeditor 一款國內的在線markdown編輯器

• stackedit 國外的在線markdown編輯器，功能強大，同步雲盤

• mditor 一款輕量級的markdown編輯器

• lepture-editor

• markdown-editor

15. D3

• d3 Tutorials

• Gallery

• lofter

• iteye

• ruanyifeng

16. 兼容性

• esma 兼容列表

• W3C CSS驗證服務

• caniuse

• csscreator

• microsoft

• 在線測兼容-移動端

• emulators

17. UI相關

• bootcss

• MetroUICSS

• semantic

• Buttons

• kitecss

• pintuer

• amazeui

• worldhello

• linuxtoy

• gitmagic

• rogerdudler

• gitref

• book

• gogojimmy

18. HTTP

• HTTP API 設計指南

19. 其它API

• javascript流行庫彙總

• 驗證api

• underscore 中文手冊

• underscore源碼分析

• underscore源碼分析-亞里士朱德的博客

• underscrejs en api

• lodash - underscore的代替品

• ext4api

• backbone 中文手冊

• qwrap手冊

• 緩動函數

• svg 中文參考

• svg mdn參考

• svg 導出 canvas

• svg 導出 png

• ai-to-svg

• localStorage 庫

20. 圖表類

• Highcharts 中文API

• Highcharts 英文API

• ECharts 百度的圖表軟件

• 高德地圖

• 開源的矢量圖腳本框架

• svg 地圖

21. vue

• Vue

• Vue 論壇

• Vue 入門指南

• Vue 的一些資源索引

21. 正則

• JS正則表達式元字符

• 正則表達式30分鐘入門教程

• MDN-正則表達式

• ruanyifeng - RegExp對象

• 小鬍子哥 - 進階正則表達式

• is.js

• 正則在線測試

22. ionic

• ionic

23. 其它

• Mock.js 是一款模擬數據生成器

七. 開發規範

1. 前端

   • 經過分析github代碼庫總結出來的工程師代碼書寫習慣

   • HTML&CSS編碼規範 by @mdo

   • 團隊合做的css命名規範-騰訊AlloyTeam前端團隊

   • 前端編碼規範之js - by yuwenhui

   • 前端編碼規範之js - by 李靖

   • 前端開發規範手冊

   • Airbnb JavaScript 編碼規範（簡體中文版）

   • AMD與CMD規範的區別

   • AMD與CMD規範的區別

   • KISSY 源碼規範

   • bt編碼規範

   • 規範增強版

   • 前端代碼規範 及 最佳實踐

   • 百度前端規範

   • 百度前端規範

   • 百度前端規範

   • ECMAScript6 編碼規範–廣發證券前端團隊

   • JavaScript 風格指南/編碼規範（Airbnb公司版）

   • 網易前端開發規範

   • css模塊

   • 前端規範資源列表

2. PHP

   • 最流行的PHP 代碼規範

   • 最流行的PHP 代碼規範

3. Android

   • 【敏捷開發】Android團隊開發規範

   • Android 開發規範與應用

八. 其它收集

1. 各大公司開源項目

• Facebook Projects

• 百度web前端研發部

• 百度EFE

• 百度github

• alloyteam

• alloyteam-github

• alloyteam-AlloyGameEngine

• AlloyDesigner 即時修改，即時保存，設計稿較正，其它開發輔助工具

• H5交互頁編輯器AEditor介紹 H5動畫交互頁開發的工具介紹

• AEditor H5動畫交互頁開發的工具

• maka

• 值得訂閱的weekly

• 騰訊html5

• 奇舞團開源項目

• Qunar UED

2. Javascript

1. 經常使用

   • ieBetter.js-讓IE6-IE8擁有IE9+,Chrome等瀏覽器特性

   • 模擬鍵盤

   • 拼音

   • 中國我的身份證號驗證

2. 算法

   • 數據結構與算法 JavaScript 描述. 章節練習

   • 常見排序算法（JS版）

   • 經典排序

   • 常見排序算法-js版本

   • JavaScript 算法與數據結構 精華集

   • 面試常考算法題精講

   • []()

3. 移動端

   • fastclick

   • no-click-delay

4. JSON

   • 模擬生成JSON數據

   • 返回跨域JSONAPI

3. Html5

• HTML5 有哪些讓你驚豔的 demo？

4. CSS

• browserhacks

5. jQuery

1. 焦點圖

   • myfocus

   • myfocus-官方演示站

   • SuperSlidev2.1 – 大話主席

   • soChange

6. Ext, EasyUI, J-UI 及其它各類UI方案

1. Ext

   • extjs

   • ext4英文api

   • ext4中文api

2. EasyUI

   • jquery easyui 未壓縮源代碼

3. J-UI

   • J-UI

4. Other

   • MUI-最接近原生APP體驗的高性能前端框架

   • Amaze UI | 中國首個開源 HTML5 跨屏前端框架

   • 淘寶 HTML5 前端框架

   • KISSY - 阿里前端JavaScript庫

   • 網易Nej - Nice Easy Javascript

   • Kendo UI MVVM Demo

   • Bootstrap

   • Smart UI

   • 雅虎UI - CSS UI

7. 頁面 社會化 分享功能

• 百度分享 pc端

• JiaThis pc端

• 社會化分享組件 移動端

• ShareSDK 輕鬆實現社會化功能 移動端

• 友盟分享 移動端

8. 富文本編輯器

• 百度 ueditor

• 經典的ckeditor

• 經典的kindeditor

• wysiwyg

• 一個有情懷的編輯器。Bach’s Editor

• tower用的編輯器

• summernote 編輯器

• html5編輯器

• XEditor

• wangEditor

9. 日曆

1. PC

   • 經典my97

   • 強大的獨立日期選擇器

   • fullcalendar

   • fullcalendar日曆控件知識點集合

   • 中文api

   • 農曆日曆

   • 超酷的仿百度帶節日日曆老黃曆控件

   • 日期格式化

   • 大牛日曆控件

   • 我羣某管理做品

   • input按位替換-官網

   • input按位替換-github

   • bootstrap-daterangepicker

   • 國外30個插件集合

   • JavaScript datepicker

   • Datepair.js

   • 一個風格多樣的日曆

   • 彈出層式的全日曆

   • jquery雙日曆

2. 移動

   • 大氣實用jQuery手機移動端日曆日期選擇插件

   • jQuery Mobile 移動開發中的日期插件Mobiscroll

3. Date library

   • Datejs

   • sugarjs

10. 綜合效果搜索平臺

• 效果網

• 17素材

• 經常使用的JavaScript代碼片斷

11. 前端工程化

1. 概述

   • 前端工具大全

   • 什麼是前端工程化

2. Gulp

   • Gulp官網

   • Gulp中文網

   • gulp資料收集

   • Gulp：任務自動管理工具 - ruanyifeng

   • Gulp插件

   • Gulp不徹底入門教程

   • 爲何使用gulp?

   • Gulp安裝及配合組件構建前端開發一體化

   • Gulp 入門指南

   • Gulp 入門指南 - nimojs

   • Gulp入門教程

   • Gulp in Action

   • Gulp開發教程（翻譯）

   • 前端構建工具gulpjs的使用介紹及技巧

3. Grunt

   • gruntjs

   • Grunt中文網

4. Fis

   • fis 官網

   • fis

12. 輪播圖

1. pc圖輪

   • 單屏輪播sochange

   • 左右按鈕多圖切換

   • fullpage全屏輪播

2. 移動端

   • 無縫切換

   • 滑屏效果

   • 全屏fullpage

   • 單個圖片切換

   • 單個全屏切換

   • 百度的切換庫

   • 單個全屏切換

   • 滑屏效果

   • 旋轉拖動設置

   • 相似於swipe切換

   • 支持多種形式的觸摸滑動

   • 滑屏效果

   • 大話主席pc移動圖片輪換

   • 滑屏效果

   • 基於zepto的fullpage

   • [WebApp]定寬網頁設計下，固定寬度佈局開發WebApp並實現多終端下WebApp佈局自適應

   • 判斷微信客戶端的那些坑

   • 能夠經過javascript直接調用原生分享的工具

   • JiaThis 分享到微信代碼

   • 聊聊移動端跨平臺開發的各類技術

   • 前端自動化測試

   • 多種輪換圖片

   • 滑動側邊欄

13. 文件上傳

• 百度上傳組件

• 上傳

• flash 頭像上傳

• 圖片上傳預覽

• 圖片裁剪

• 圖片裁剪-shearphoto

• jQuery圖片處理

14. 模擬select

• 糖餅 select

• flexselect

• 雙select

• select2

15. 取色插件

• 相似 Photoshop 的界面取色插件

• jquery color

• 取色插件集合

• farbtastic 圓環＋正方形

16. 城市聯動

• jquery.cityselect.js基於jQuery+JSON的省市或自定義聯動效果

17. 剪貼板

• 剪貼板

• clipboard 最新的剪切方案

• 不是Flash的剪貼板

18. 簡繁轉換

• 簡繁轉換

19. 表格 Grid

• facebook表格

• 相似於Excel編輯表格-handsontable

• bootstrap-table插件

• datatables

20. 在線演示

• js 在線編輯 - runjs

• js 在線編輯 - jsbin

• js 在線編輯 - codepen

• js 在線編輯 - jsfiddle

• java 在線編輯 - runjs

• js 在線編輯 - hcharts

• js 在線編輯 - jsdm

• sql 在線編輯 - sqlfiddle

• mozilla 在線編輯器

21. 播放器

• Html5 VideoPlayer

22. 粒子動畫

• Proton 煙花

九. Nodejs

• nodejs 篇幅比較巨大

• Node.js 包教不包會

• 篇幅比較少

• node express 入門教程

• nodejs定時任務

• 一個nodejs博客

• 【NodeJS 學習筆記04】新聞發佈系統

• 過年7天樂，學nodejs 也快樂

• 七天學會NodeJS

• Nodejs學習筆記（二）— 事件模塊

• nodejs入門

• angularjs nodejs

• 從零開始nodejs系列文章

• 理解nodejs

• nodejs事件輪詢

• node入門

• nodejs cms

• Node初學者入門，一本全面的NodeJS教程

• NodeJS的代碼調試和性能調優

十. 性能優化

1. 常規優化

   • Javascript高性能動畫與頁面渲染

   • 移動H5前端性能優化指南

   • 5173首頁前端性能優化實踐

   • 給網頁設計師和前端開發者看的前端性能優化

   • 複雜應用的 CSS 性能分析和優化建議

   • 張鑫旭——前端性能

   • 前端性能監控總結

   • 網站性能優化之CSS無圖片技術

   • web前端性能優化進階路

   • 前端技術：網站性能優化之CSS無圖片技術

   • 瀏覽器的加載與頁面性能優化

   • 頁面加載中的圖片性能優化

   • Hey——前端性能

   • html優化

   • 99css——性能

   • Yslow——性能優化

   • YSLOW中文介紹

   • 轉一篇Yahoo關於網站性能優化的文章，兼談本站要作的優化

   • Yahoo!團隊實踐分享：網站性能

   • 網站性能優化指南：什麼使咱們的網站變慢？

   • 網站性能優化實踐，減小加載時間，提升用戶體驗

   • 淺談網站性能優化 前端篇

   • 前端重構實踐之如何對網站性能優化？

   • 前端性能優化：使用媒體查詢加載指定大小的背景圖片

   • 網站性能系列博文

   • 加載，不僅是少一點點

   • 前端性能的測試與優化

   • 分享網頁加載速度優化的一些技巧？

   • 頁面加載中的圖片性能優化

   • web前端優化(基於Yslow)

   • 網站性能優化工具大全

   • 【高性能前端1】高性能HTML

   • 【高性能前端2】高性能CSS

   • 由12306談談網站前端性能和後端性能優化

   • AlloyTeam——前端優化

   • 毫秒必爭，前端網頁性能最佳實踐

   • 網站性能工具Yslow的使用方法

   • 前端工程與性能優化（上）：靜態資源版本更新與緩存

   • 前端工程與性能優化（下）：靜態資源管理與模板框架

   • HTTPS鏈接的前幾毫秒發生了什麼

   • Yslow

   • Essential Web Performance Metrics — A Primer, Part 1

   • Essential Web Performance Metrics — Part 2

   • YUISlide,針對移動設備的動畫性能優化

   • Improving Site Performance

   • 讓網站提速的最佳前端實踐

   • Why Website Speed is Important

   • Need for Speed – How to Improve your Website Performance

   • 阿里無線前端性能優化指南 (Pt.1 加載期優化)

2. 優化工具

   • JavaScript 性能分析新工具 OneProfile

   • JavaScript 堆內存分析新工具 OneHeap

3. 在線工具

   • google在線工具

   • 阿里測

   • 阿里-免費測試服務

   • 阿里-F2etest多瀏覽器兼容性測試解決方案

   • js性能測試

十一. 前端架構

• 技術架構

• 前端架構

• 如何成爲前端架構師

• 關於前端架構-張克軍

• 百度騰訊offer比較（騰訊遊戲VS百度基礎架構）