此文介绍了我个人学习前端所总结的资源分类大纲.每个栏目下的推荐部分基本为必要的,可选的部分以后也是要学的…同时也已经入了全栈的坑,不过我后端还是入门不久,因此这里一笔带过.若文章在作为自己路灯的同时,也能照亮他人,那实为一件荣幸之事~
前端基础
前端学习中最原始也是最重要的东西:
- html5
- css3
- js/es6
github上的前端学习指导
牛人总结的学习大纲
类库
类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。
- 推荐
- jQuery: A fast, small, and feature-rich JavaScript library.
- animateCss: css3动画库
- underscore.js: 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题:“如果我面对一个空白的 HTML 页面,并希望立即开始工作,我需要什么?” 他弥补了 jQuery 没有实现的功能,同时又是 Backbone 必不可少的部分。
- Lodash: underscore.js衍生
- 可选
- socket.io: websocket实时应用框架
- D3.js: 是一个JavaScript库,它可以通过数据来操作文档
- moment.js: JavaScript 日期处理类库
- prototype.js: 原生 js 扩展
- easing.js: jquery 缓冲动画插件
- ceaser: CSS EASING ANIMATION TOOL
- cubic-bezier: 赛贝尔曲线
mv* 框架
框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。
- 推荐
- vueJS: view 层,数据驱动的组件,为现代化的 Web 界面而生. - 尤雨溪
- angularJS: 为了克服HTML在构建应用上的不足而设计的. - Google
- reactJS: view 层,A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES. - Facebook
- backbone.js: 简单纯粹的 mv* 框架.最佳适用场景是单页面应用,并且页面上有大量数据模型,模型之间需要进行复杂的信息沟通。
- 可选
- avalonJS: 迷你 mvvm 框架,司徒正美 去哪儿网
- Ember.js: A framework for creating ambitious web applications.
- Meteor: build app with JavaScript.现代网站开发平台,希望构建一个极简的网站开发环境。
- Flux: 配合 react,用来构建用户端的web应用的应用程序体系架构。- Facebook
- Redux: 配合 react,Redux is a predictable state container for JavaScript apps.是一个友好简洁的 flux 模式的实现.意义:实现前后端同构,更好组织 UI 组件事件分发.
- ThinkJS: 一个快速、简单的基于MVC和面向对象的轻量级Node.js开发框架.使用了 ES6/7.全栈开发
UI 框架
快速建站框架
- 推荐
- Bootstrap: the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. - Facebook
- amaze ui: 中国首个开源 HTML5 跨屏前端框架. - 妹子 UI
- 常用
- foundation: 迄今为止最好的响应式前端框架,更快、更轻、更多功能、更灵活、更强大!
- semantic ui: 语义化的网页语言
- frozen ui: 简单易用,轻量快捷,为移动端服务的前端框架. - 手机QQ UI
- weiui: 微信官方网页开发样式库.
- blendui: 移动web开发框架,通过集成原生组件令App体验一流,并为O2O场景特别优化. - 百度 UI
- echarts: 一个纯 Javascript 的图表库. - 百度
- jqwidgets: Advanced JavaScript & HTML5 UI Framework
游戏引擎
h5 游戏开发
- 推荐
- egret: 国产2D,现在可以3D.中文易学些.
- createJs: 基于HTML5开发的一套模块化的库和工具,拥有共同或独立工作的丰富交互式内容的开源Web技术。
- pixiJs: 2D webGL renderer with canvas fallback
- threeJs: 3D JavaScript Library
- 可选
- pomelo: Fast, scalable, distributed game server framework for node.js. - 网易
混合应用框架
web 入侵其他领域
- 推荐
- reactNative: Learn once, write anywhere.构建原生 APP
- nwjs: node-webkit.桌面应用框架
- 可选
- ionic: HTML5 Hybrid Mobile App Framework.AngularJS移动端解决方案
- hex: USING HTML5 AND NODE.JS TO BUILD DESKTOP APPLICATION. - 网易有道
- appjs: 一个令人振奋的 JavaScript 库,使我们能够使用 Web 技术快速开发桌面应用程序
- Electron: Build cross platform desktop apps with web technologies
预处理器
处理兼容或者便于管理,快速书写
- 推荐
- less/scss: css 预处理器
- babel: es6 语法预编译
- 可选
- polyfill: 使浏览器支持应有特性
- shim: 使浏览器支持新特性
- bluebird: Full featured Promises/A+ implementation with exceptionally good performance
移动端框架
移动开发常用
- 推荐
- zepto: 轻量jQuery
- swiper: 移动端网页触摸内容滑动js插件.
- touch: BAIDU CLOUDA EVENT & GESTURE LIBRARY
- hammerjs: 是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。
- 可选
- iscroll: smooth scrolling for the web
- video.js: html5 视频框架
构建工具
构建自己的前端工作流
- 推荐
- bower: 前端包管理
- npm: nodejs package manager
- gulp: 前端构建工具
- browserify: 模块化
- requireJs: 模块化amd
- webpack: 模块化与前端构建 commonjs&amd. - Facebook
- 可选
- seaJs: 模块化cmd. - 玉伯 淘宝
- fis: 为你定制的前端工程构建工具. - 百度
开发组合
开发全家桶
- 推荐
- gulp+browserify+babel: 前端构建套装
- react + webpack + babel: react项目构建
- react+flux+koa: react 应用开发套装
- 可选
- mean: mongoDB express angular nodejs 全栈套餐
后端
不会后端的前端不是好前端
- 推荐
- php+mysql
- nodejs+mongoDB
- 可选
- thinkphp: 是一个快速、兼容而且简单的轻量级国产PHP开发框架
- laravel: 为 WEB 艺术家创造的 PHP 框架
- express/koa: 基于 Node.js 平台,快速、开放、极简的 web 开发框架。
- jade: 源于 Node.js 的 HTML 模板引擎
工具网站
有用而有趣的工具
- 推荐
- codepen: web在线编辑,各种栗子
- github: 世界著名同性交友网站
- can i use: Support tables for HTML5, CSS3, etc
- 可选
- easyicon: 图标
- iconfont: 图标字体
- impress.js: It’s a presentation framework based on the power of CSS3 transforms and transitions in modern browsers.
- reveal.js: A framework for easily creating beautiful presentations using HTML
- lantern: 翻墙
学习资讯
学习是一门技巧
- 推荐
- 阮一峰个人网站: 大神!但可能出现几年后他说之前理解错了的情况,被误导就怪自己修行不够
- 廖雪峰个人网站: 只看了 git 教程, 简单易懂
- 张鑫旭个人网站: 风格有点奇怪但是很厉害
- 尤雨溪个人网站: 严格意义上的大神
- http://taobaofed.org/: 淘宝前端团队
- alloyteam: 腾讯全端团队
- ISUX: 腾讯社交用户体验设计
- 奇舞团: 360前端
- 知乎: 问答社区
- stackoverflow: 问答社区
- 慕课网: IT 教程
- w3cshool: web 教程
- w3cplus: 引领web前沿,打造前端精品教程
- 菜鸟教程: 入门教程
- segmentfault.com: 是一个专注于解决编程问题,提高开发技能的社区。页面好看,回答好,有教程.
- 推酷: IT人专属个性阅读社区.
- 伯乐在线: 做最专业的IT互联网职业社区
- 开源中国: 找到您想要的开源项目,分享和交流.
- htmleaf: jQuery之家,自由分享jQuery、html5和css3的插件库
- dowebok: 意为做好网站,为用户提供代码、素材、特效、教程、模板等建站服务。
- 微信,微博,qq: 关注些牛人, 技术资讯, 加入些技术干货群
- 可选
- cnblog: 面向开发者的知识分享社区.
- CSDN: 中文 IT 社区
- open-open.com: 您的生活化网络和IT资讯来源
- html5中国: html5中文社区
- 极客学院: 各种教程
- Codepad: a place for developers to share & save code snippets. Join the community!
- v2ex.com: V2EX 是一个关于分享和探索的地方
- 数英: 数字媒体及职业招聘网站
- 码农网: 编程经验分享
- 简书: 交流故事,沟通想法,一个基于内容分享的社区
- 简明现代魔法: 加入魔法协会,一起分享编程的快乐
- cocoachina: 让移动开发更简单
- 脚本之家
- 红黑联盟: IT 门户
- 程序师: 用程序猿的阳光看世界
书籍
只看过一本纸质书,但是觉得很有用
- 推荐
- Javascript设计模式
设计
不会搞艺术的程序员不是好设计师
- 推荐
- ps: 切图(cutterman)
- 可选
- sketch: mac 设计
- axure: 交互原型设计
- xmind: 脑图
其他
必备防身技能
- 推荐
- git: 版本管理
- HTTP
- TCP/IP
- seo: 搜索引擎优化
- shell: 命名行
- 微信jssdk: 微信h5开发
- 可选
- cdn: 内容分发网络
- REST API
- markdown
加分
养成良好习惯,做点能出手的东西
- 推荐
- 技术博客
- github
- 优秀项目
- 收集常遇到的问题
- 全栈
编辑器
好的编辑器对编程速度和质量都很重要
- 推荐
- sublime: 轻量,丰富插件
- idea/webstorm/phpstorm: 强大
- 可选
- vscode: 开源,听说好厉害的样子,但是没研究过
前端优化
优化有很多,网页收藏,云笔记也好,最重要是要用
- 推荐
- 雅虎军规
- 兼容
- 移动端优化
开发调试
少几个bug吧
- 推荐
- 单元测试
- chromeDevTools 调试
- 可选
- jshint