前端学习路线整理

正文

资源教程:

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百度基础架构）