前端知识库

简介: 前端开发全面知识库,包括HTML5,CSS3和js的基本框架知识,以及DOM和BOM操作的基础知识和一些基本工具和IDE。学习本篇,你将了解到以下知识。 核心 Core HTML5 W3C http://www.

前端开发全面知识库,包括HTML5,CSS3和js的基本框架知识,以及DOM和BOM操作的基础知识和一些基本工具和IDE。学习本篇,你将了解到以下知识。

这里写图片描述

核心 Core

HTML5

W3C http://www.w3school.com.cn/html5/
W3C https://www.w3.org/html/ig/zh/wiki/HTML5
菜鸟教程 http://www.runoob.com/html/html5-intro.html
HTML5中文门户 http://www.html5cn.org/

CSS3

W3C CSS教程 http://www.w3school.com.cn/css/index.asp
W3C CSS3教程 http://www.w3school.com.cn/css3/index.asp
菜鸟教程CSS教程 http://www.runoob.com/css/css-tutorial.html
菜鸟教程CSS3教程 http://www.runoob.com/css3/css3-tutorial.html
CSS参考手册 http://css.doyoe.com/

JS

W3C http://www.w3school.com.cn/js/
菜鸟教程 http://www.runoob.com/js/js-tutorial.html
廖雪峰js教程 http://www.liaoxuefeng.com
js标准参考教程-阮一峰http://javascript.ruanyifeng.com/

jQuery

W3C http://www.w3school.com.cn/jquery/
菜鸟教程 http://www.runoob.com/jquery/jquery-tutorial.html
极客学院 http://wiki.jikexueyuan.com/project/jquery-tutorial/
廖雪峰 http://www.liaoxuefeng.com/wiki/
参考手册 http://www.css88.com/jqapi-1.9/
参考手册 http://www.runoob.com/manual/jquery/

ES6

阮一峰ES6 http://es6.ruanyifeng.com/
极客学院 http://wiki.jikexueyuan.com/project/es6/
JavaScript 标准参考 阮一峰http://javascript.ruanyifeng.com/advanced/ecmascript6.html

插件

parallel.js: 前后端通用的一个并行库
zepto: 用于现代浏览器的兼容 jQuery 的库
totoro: 稳定的跨浏览器测试工具
TheaterJS: 一个用于模拟人输入状态的 JS 库
stellar.js: 前端用于实现异步滚动效果的库,现已不再维护
skrollr: 另一款实现一步滚动的开源库,使用人数众多,可实现各种狂拽酷炫掉渣天的前端效果,看真相
Framework7: 前端框架,是开发人员可以基于 web 技术构建 IOS7 程序
regulex: 用于生成 正则表达式 的可视化流程图
markdown-it: 新型 Markdown 解析器,快速,支持插件
multiline: 用于 Javascript 中的多行文本,类似于 Ruby 的 HERE Doc
screenfull.js: 全屏插件,支持各大浏览器
lunr.js: 类似于 Solr, 但是用于浏览器上的全文搜索引擎,可以为 JSON 创建索引,离线也可以使用
jquery.hotkeys: jQuery 插件,用于绑定热键
breach_core: Javascript 编写的 Browser (浏览器)
octocard: 用于生成 Github 信息卡片的库
github-cards: 用于生成 Github 信息卡片的库
money.js: 轻量级货币转换库,web 和 node 皆可用
accounting.js: 轻量级的数字、货币转换库
javascript-algorithms: Javascript 实现的各种算法集合
lazy.js: 类似于 underscore, 但是会延迟执行,某些场景下,性能会有很大的提升
seajs: 前端模块加载器,解决模块化、依赖等问题
jQuery-One-Page-Nav: 单页应用中一个用于处理导航栏的库
js.js: Javascript 实现的 javascript JIT
jquery-ui: jQuery 团队开发的 UI 相关的前端库,功能强大
todomvc: 分别基于 AngularJS/EmberJS/Backbone等实现的 TODO List, 帮助开发者选择前端 MVC 库
localForage: Mozilla 出品,用于离线存储,基于IndexedDB, WebSQL 或者 localStorage, 提供一致的接口
EventEmitter: 浏览器版的 EventEmitter
jquery.serializeJSON: jQuery 插件,用于将 form 表单序列化成 JSON 数据
knockout: 前端 MVVM 框架,用于开发富前端应用
mermaid: 可以根据文本生成流程图,类似于 Markdown 的语法
js-sequence-diagrams: 另一款可以根据文本生成流程图的库,类似于 Markdown 的语法
flow: 一个用来检测 Javascript 语法错误的库, Facebook 出品
zoomooz: jQuery 插件,用来处理浏览器缩放
fancyBox: 一个用于放大缩小图片、Web 内容或者多媒体元素的库,优雅大方
mithril.js: 轻量型前端 MVC 框架,部分使用场景下性能优于 Angular.js 和 React
backbone: 强大的前端 MVC 库,鼻祖级前端库,最初为了配合 Rails 来模块化前端应用,兼容性良好 (兼容到 IE6),插件丰富,性能良好
jquery.smartbanner: smartbanner 是从 IOS6 开始支持的一个新特性, 这个插件提供了对早期 IOS4/5 和 Android 的支持
jquery.scrollTo: 在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素, 支持回退等
jScrollPane: 自定义的滚动条,让所有浏览器都显示一样的滚动条
onepage-scroll: 提供类似于 iPhone6 展示页类似的效果,适用于单页应用,兼容到 IE8
scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等),性能很好
ScrollMagic: 神奇的滚动交互效果插件,可以在滚动的过程中设置各种各样的动态效果
infinite-scroll: 滚动加载,滚动到最下到自动加载, Paul Irish 大神之作
animatable: 仅仅依靠 border-width 和 background-position 实现的各种动态效果,看真相
Fluidbox: 页面上内嵌图片的放大缩小效果,类似于 Medium 中的效果
jquery-validation: jQuery 的一个插件,用于校验 Form 表单
BigVideo.js: jQuery 的一个插件, 用于实现大背景(视频、图片)效果
emscripten: 一款基于 LLVM, 可以将 C/C++ 转换成 Javascript 的工具,使得 Javascript 可以近乎 Native 的速度
qrcode-generator: 各种语言的二维码生成工具
device.js: 一个可以检测设备类型的工具,可以让我们根据不同的设备来为其定制响应的 Javascript 和 CSS
jquery-qrcode: jQuery 插件,用来生成二维码
Wookmark-jQuery: jQuery 的一个插件,可以用来实现瀑布流的效果
isotope: 可以用来过滤、排列布局,实现美观的动态布局切换效果,Demo
lazysizes: 功能强大的图片延迟加载工具,可以首先加载一个低质量的图片,然后再加载高质量的图片
progressbar.js: 简洁美观的进度条,扁平化
pigshell: 一个由 Javascript 实现的Shell, 将互联网当做一个大的文件系统, 通过 cd/ls/cat…..等命令, 可以访问 Facebook/Twitter/Google Drive 等网络服务
spectrum: Js实现的颜色选择器 (Colorpicker)
jQuery.countdown: jQuery 倒计时插件
summernote: WYSIWYG 富文本编辑器
awesomplete: 非常轻型的一个自动补全 JS 库, 没有任何依赖, 配置简单, 美观
switchery: IOS 7 上 Switch 的 JS 实现, 支持 IE8 及以上浏览器
trix: Basecamp 公司出品的富文本编辑器,简洁小巧
sensor.js: 在智能移动设备浏览器上,通过HTML5的api使用移动设备的功能。定位、运动、倾斜等
hyhyhy: 用于创建 基于 HTML5 的 演示文稿
swipebox: jQuery 插件,用于处理移动端的触摸事件
FileAPI: 前端用户处理文件(拖放、多文件上传等)
Sortable: 现代浏览器上用于实现元素拖拽排序的功能,支持 Meteor, AngularJS, React,不依赖 jQuery
Swiper: 用于实现浏览器上的滑动切换效果,支持硬件加速
matter-js: 2D 物理效果引擎,碰撞、弹跳等
jQTouch: 用于辅助创建手机端的 Web 应用,支持主题、Zepto.js 等
snabbt.js: 一个利用 Javascript 和 CSS transform 的 animation 库
c3: 基于 D3 的图表库
echarts: 企业级图表库,百度开发
parallax.js: 一个用于响应智能手机 orientation 的库
jQuery-Animate-Enhanced: jQuery 动画库的一个增强,用于现代浏览器
wysihtml: 富文本编辑器,适用于现代浏览器
slip: 一个通过滑动或者拖拽来操控列表的库
evil-icons: 一个矢量图库,提供 Ruby/Node 等支持
PhotoSwipe: JS 的一个图片展示库
focusable: 是页面上一个元素高亮的库,有图有真相
firefox.html: Firefox 在浏览器端的实现 —— HTML 版的 Firefox
jquery-mobile: jQuery 团队开发的用于辅助手机端 web app 开发的库,基于 HTML5
mobile-angular-ui: 基于angularjs和bootstarp的web app开发框架
interact.js: 一个适用于现代浏览器的,用于处理 手势、拖放、缩放等的库
rebound-js: 实现部分物理效果,Facebook 出品
basket.js: 基于 LocalStorage 的资源加载器,可以用来缓存 script 和 css, 手机端使用速度快于浏览器直接缓存
iscroll: 高性能的滚动(scroll)处理库,功能强大,支持各种事件,不依赖任何的库,且插件丰富, 大众点评的手机端列表滚动就是用这个库处理的
metrics-graphics: 基于 D3 的图表库,简洁、高效,Mozilla 出品
accessible-html5-video-player: Paypal 出品的 Video 播放器
loading: 几种 Loading 效果,基于 SVG
flippant.js: 一款能够漂亮的网页元素翻转效果库,代码许久不更新,不过作为源码学习还是不错的
move.js: 基于 CSS3 的前端动画框架
scrollReveal.js: 使元素以非常酷帅的方式进入画布 (Viewpoint),看 Demo
Modernizr: 一个用来检测 HTML5 和 CSS3 支持情况的库
foundation: 另一款前端模版框架,类似于 Bootstrap
Flat-UI: Bootstrap 的一款主题,简洁美观
iCheck: 一款漂亮的 Checkbox 插件
Swipe: 非常轻量级的一个图片滑动切换效果库, 性能良好, 尤其是对手机的支持, 压缩后的大小约 5kb
slick: 功能异常强大的一个图片滑动切换效果库
SocialButtons: 漂亮的社交按钮
sweetalert: 一个非常美观的用于替换浏览器默认 alert 的库
web-animations-js: Javascript 实现的 Web Animation API
vivus: 可以动态描绘 SVG 的 JS 库, 支持多种动画
plyr: 轻量, 小巧, 美观的 HTML5 视频播放器
timesheet.js: 基于 HTML5 & CSS3 时间表
slideout: 一个非常美观的侧滑菜单

包管理工具 Package Managers

NPM

菜鸟教程NPM 使用介绍 http://www.runoob.com/nodejs/nodejs-npm.html
淘宝 NPM 镜像 https://npm.taobao.org/
npm 模块安装机制简介 http://www.ruanyifeng.com/blog/2016/01/npm-install.html
npm包搜索地址 https://www.npmjs.com/

Bower

Bower中文网 http://www.bowercn.com/
Bower:客户端库管理工具-阮一峰 http://javascript.ruanyifeng.com/tool/bower.html

Yarn

yarn中文网 https://yarnpkg.com/zh-Hans/快速、可靠、安全的依赖管理
YARN 简介 https://www.ibm.com/developerworks/cn/data/library/bd-yarn-intro/

编辑器 Text Editors

WebStorm

官网下载 http://www.jetbrains.com/webstorm/download
前端网破解版下载 http://www.qdfuns.com/tools

VScode

官网下载 https://code.visualstudio.com/
vscode 插件精选 - 献给所有前端工程师https://segmentfault.com/a/1190000006697219

SublimeText

官网下载 https://www.sublimetext.com/
前端网破解版插件版下载 http://www.qdfuns.com/tools
SublimeCodeIntel: Sublime Text 的代码补全工具,支持多种语言
Emmet:一个用于提高开发效率的编辑器插件,前身是Zen coding
SublimeLinter: 一个提供代码质量检测的插件
SublimeTmpl:快速新建指定的模版文件
Syntax-highlighting-for-Sass:sass代码高亮插件
MarkdownEditing: Sublime Text 强大的 Markdown 扩展, 提供快捷键, 主题等
ApplySyntax: 辅助检测语法插件
CTags: Sublime Text Ctags 支持插件, 需要安装 ctags
sublime-react: React 代码高亮

Atom

官网下载 https://atom.io/

HBuilder

官网下载 http://www.dcloud.io/

JS框架 JS Frameworks

Backbone

Backbone.js API中文文档http://www.css88.com/doc/backbone/

AngularJs

中文官方文档https://angular.cn/
angularjs中文网http://www.apjs.net/
angularjs教程http://www.angularjs.net.cn/
Angular 基础入门http://www.cnblogs.com/micua/p/angular-essential.html
angular-masonry: Masonry 的 AngularJS 插件,用于瀑布流
angular-schema-form: 根据 JSON 生成响应的 Form 表单
restangular: Angular 中用来处理 RESTful API 的插件,可替代 $resource
ng-cordova: Cordova 常用组件的 Angular 版本
angular-translate: Angular 的国际化 (I18n)
ng-inspector: Chrome 插件,用于调试 Angular
angularjs-style-guide: AngularJS 代码风格
ngReact: React 的 Angular 插件,可以在 Angular 中使用 React Components
material: Google Material Design 效果的 Angular 实现
angular-local-storage: Angular 插件, 提供了对 localStorage 的友好支持, 并对不支持的浏览器使用 cookie 优雅降级
angular-filter: 一组有用的 Angular Filters
bindonce: Angular 插件, 用于减少 Watcher 的数量, 提升性能

React

英文官方文档https://facebook.github.io/react/docs/hello-world.html
中文官方文档http://reactjs.cn/react/docs/getting-started-zh-CN.html
gitbooks手册https://hulufei.gitbooks.io/react-tutorial/content/introduction.html
阮一峰react入门http://www.ruanyifeng.com/blog/2015/03/react.html
阮一峰React Router入门http://www.ruanyifeng.com/blog/2016/05/react_router.html
React Router 中文文档https://react-guide.github.io/react-router-cn/
react-redux 中文文档http://cn.redux.js.org/docs/react-redux/index.html
阮一峰Redux 入门教程http://www.ruanyifeng.com/blog
react: React 框架源代码
react-native: Facebook 出品的使用 React 开发 IOS 原生应用的框架
react-hot-loader: 实时调整 React 组件效果
grunt-react: React 的 Grunt 组件, 用于将 JSX 编译成 JS
touchstonejs: 基于 React 的手机应用前端框架
essential-react: 基于 React, ES6, React-Router的一个应用脚手架
react-router: React 路由解决方案

Vue

vue官方http://cn.vuejs.org/
vuex官方http://vuex.vuejs.org/zh-cn/
vue-router官方https://router.vuejs.org/zh-cn/

UI框架 UI Frameworks

Bootstrap

最受欢迎的 HTML、CSS 和 JS 框架 http://v3.bootcss.com/

Ionic

一款接近原生的Html5移动App开发框架 会html css js就可以开发apphttp://www.ionic.wang/

Foundation

Foundation 中文网 迄今为止最好的响应式前端框架http://www.foundcss.com

FrozenUI

移动端服务的前端框架http://frozenui.github.io/

materializecss

基于Material Design的主流前端响应式框架http://www.materializecss.cn/

mui

最接近原生APP体验的高性能前端框架http://dev.dcloud.net.cn/mui/

AntDesign

和react配合的UI框架https://ant.design

eleme

和vue配合的UI框架http://element.eleme.io/

JS预处理 JS Preprocessors

TypeScript

TypeScript 入门教程 菜鸟教程http://www.runoob.com/
TypeScript中文网https://www.tslang.cn/
TypeScript教程gitbookhttps://www.gitbook.com/

CoffeeScript

CoffeeScript 中文http://coffee-script.org/
CoffeeScript 实用手册 极客学院http://wiki.jikexueyuan.com/project/coffeescript/

过程自动化 Process Automation

Grunt

Grunt中文网http://www.gruntjs.net/

Gulp

gulp.js 中文网http://www.gulpjs.com.cn/
gulp详细入门教程http://www.ydcss.com/
前端构建工具gulpjs的使用介绍及技巧http://www.cnblogs.com/2050/p/4198792.html
Gulp开发教程https://www.w3ctech.com/topic/134

模板引擎 Templating

Handlebars

handlebarsjs官网http://handlebarsjs.com/
Handlebars中文文档http://www.360doc.com/content/
Handlebars.js 中文文档http://keenwon.com/992.html
Handlebars的使用方法文档整理http://www.tuicool.com/articles/fqQFN3

Haml

haml官方文档https://github.com/haml/haml
haml入门http://blog.csdn.net/napoay/article/details/50491363

Jade

Jade 官方的英文文档http://www.w3cplus.com/html/how-to-use-jade.html
Jade的使用http://www.w3cplus.com/html/how-to-use-jade.html
带你学习Jade模板引擎视频http://www.imooc.com/learn/259

构建工具 Build Tools

RequireJS

RequireJS 英文网http://requirejs.org/
RequireJS 中文网http://requirejs.cn/
require.js的用法-阮一峰http://www.ruanyifeng.com/blog

seajs

seajs文档http://seajs.org/docs/
SeaJS从入门到原理http://www.tuicool.com/articles/FfEJv2u

Browserify

官网http://browserify.org/
githubhttps://github.com/substack/node-browserify/

Webpack

Webpack 中文指南http://webpackdoc.com/
webpack的实例http://www.vichily.com
webpack的入门http://www.vichily.com
一小时包教会 —— webpack 入门指南http://www.w2bc.com/Article/50764

CSS预处理器 CSS Preprocessors

Sass

sass入门http://www.w3cplus.com/sassguide/
sass参考手册http://sass.bootcss.com/docs/sass-reference/
SASS用法指南-阮一峰http://www.ruanyifeng.com/blog/

Less

less中文网http://lesscss.cn/
less快速入门http://less.bootcss.com/

stylus

stylus中文文档-张鑫旭http://www.zhangxinxu.com/jq/stylus/


目录
相关文章
|
消息中间件 JavaScript 前端开发
前端基础知识库-事件循环
众所周知JavaScript是个单线程的语言,但是为了能更快更好的处理程序,JavaScript有一个基于事件循环的并发模型,事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。这个模型也是JavaScript异于其他语言(c java等)处理并发任务之处。本篇也是我在工作学习中自己对JavaScript事件循环的理解,下面我们一起来了解下JavaScript中事件循环是如何执行的。
|
存储 安全 前端开发
前端知识库-前端安全系列二(同源策略)
在我们日常开发中在与后台联调的时候是不是会经常遇到CORS错误,作为一名前端开发大家应该都知道这个事浏览器同源策略导致的,如何解决这个问题相信大家都有自己团队的方法。如有不了解的可以看下我之前总结过文章跨域解决方案,本文主要来分析下跨域的原因,以及跨域涉及到的API。
|
存储 Web App开发 JavaScript
前端知识库-前端安全系列一(攻防)
最近重新整理了下自己的前端相关知识,在前端安全这个领域由于最近两年做的事内部项目,对此没有太多的实际应用,借此机会重新去了解下,俗话说温故而知新,从故有的知识中总结获取新的知识才是我们进步的基础。
|
前端开发 JavaScript C++
前端知识库Reactjs进阶系列(组件的加载过程)
最近在项目中遇到react的组件多次渲染的问题,最后虽然顺利解决了但也同时发现了自己对于react生命周期的不熟悉,于是便找出react的文档重新去了解下,重新学习之后总结为以下两个主要知识点:react组件的整个渲染流程 react组件更新的注意点。
|
前端开发 JavaScript
前端基础知识库-ES6基础知识
随着前端的发展,JavaScript应用的领域也越来越广泛,其原本的语法的局限性也越来越明显,这便推动了ECMA制定ECMASCRIPT6(以下简称ES6)规范的推广,目前各大浏览器基本都支持了ES6的语法,下面就来了解下ES6的基本语法。
|
存储 前端开发 JavaScript
前端基础知识库JavaScript闭包
在JavaScript中,闭包对于JavaScript的意义无异于指针在c++中的意义。理解闭包是我们掌握JavaScript这门语言的基础能力,而对闭包的掌握程度就可以看出来你对JavaScript这门语言的深入程度,网上关于闭包的文章也不少但多数让人看过之后一头雾水,也许是自己理解能力较差。所以我还下定决心以提问的方式来理解何谓闭包,希望能给与我有相同境遇的博友一点帮助。
|
移动开发 前端开发 JavaScript
前端知识库前端路由-简介
在前端架构中,路由的设计的合理与否决定了这个项目的是否优秀。现在前端的框架angular,vue react都有对应的路由插件,在页面渲染方便基本都不用我们前端工程师考虑,基本上我们安装他们的文档配置好路由都能良好的运行,但是这并不意味我们不需要去掌握路由的实现原理。
|
JSON 前端开发 JavaScript
前端基础知识库-JavaScript对象的深拷贝
在JavaScript数据类型分为基础类型和引用类型,而引用类型又称为对象,可见了解对象是我们真正掌握JavaScript语言的必备技能。本章主要与大家一起去探索JavaScript对象的一些经常被我们忽略的以及难以理解的知识。好了,废话不多说让我们一起进入JavaScript对象的世界吧。
|
缓存 前端开发 JavaScript
前端知识库Reactjs基础系列五mobx初识
在reactjs中,父子组件,同级组件间的状态传递只能通过props传递,如果需要传递的变量过多,就会导致项目混乱难以维护,并且容易产生意想不到的bug。所以我们需要一个能管理全局状态的工具,如redux,mobx这类的就是为了解决这个问题。
|
前端开发 JavaScript API
前端知识库Reactjs基础系列四react-router
在开发spa项目中,前端路由是一个无法绕开的技术,在整个spa前端架构中我觉的掌握前端路由配置,状态管理以及异步请求的封装是最基本的能力。本文主要介绍react-router对于react项目的作用,以及基本配置。