fe-books

前端开发常用文档/网站地址、样式/js方法封装库、项目模板。

---

1. 常用网站

目录：

• 1.1 HTML/CSS/JavaScript
• 1.2 兼容/查询
• 1.3 CSS工具
• 1.4 JS插件/库
• 1.5 Vue
• 1.6 React
• 1.7 Nodejs和构建
• 1.8 Hybird和跨端
• 1.9 辅助工具
• 1.10 测试、安全及加密

1.1 HTML/CSS/JavaScript

地址	标签	说明
MDN 文档手册	html/css/js	很全很有用的查询网站。
W3C官网	html/css/js	W3C官方，不解释。
html中文网-css教程手册	css	快速查询css属性及基本使用。
canvas速查手册	canvas	一目了然canvas的api方法。
VML 参考手册	VML(IE)	*微软开发的在低端IE上运行的“SVG”。
ES6入门（阮一峰）	ES6	使用频率最高的ECMAScript6文档。
ECMA International(6) China	ES6	ECMAScript6官方文档，部分中文翻译。
ECMA International(6)	ES6	ECMAScript6官方文档。
TypeScript中文文档	typescript	TypeScript官网文档。
Typescript Handbook	typescript	TypeScript使用手册。
Web API Reference	html5	HTML5 web API查询，如摄像头/地理位置。
Safari HTML Ref查询	html	Safari webview的HTML标签查询，某些ios特殊的属性或表现可以查这个。
Web Assembly中文网	wasm	Web Assembly(wasm)中文网。

1.2 兼容/查询

地址	标签	说明
can i use	--	使用频率最高的兼容支持查询网站。
ES兼容查询	js	ECMAScript兼容查询。
IOS字体支持查询	ios font	IOS系统自带字体查询。
Web安全色查询	web color	为了尽量让用户看到色彩相同的网页,请尽量使用216色的web安全色。
浏览器份额统计	browser	百度统计的市面上浏览器份额，（要Flash，Chrome不一定能看）。

1.3 CSS工具

1.3.1 预处理

地址	标签	说明
less文档	less	易上手的CSS预处理工具。
sass 文档	sass	热门的CSS预处理工具。
stylus 文档	stylus	功能丰富的CSS预处理工具。
stylus 文档(张旭鑫)	stylus	stylus中文文档。

1.3.2 后处理

地址	标签	说明
postcss 文档	postcss	被广泛运用的CSS后处理工具。
github-postcss	postcss	post插件库中心。
github-autoprefixer	autoprefixer	自动补充浏CSS前缀的后处理工具。
cssnano官网	cssnano	CSS优化和分解插件。
postcss-plugin-px2rem	px2rem	将px单位转为rem单位的工具。
postcss-px-to-viewport	px2vw	将px单位转为vw单位的工具。
cssnext官网	cssnext	让今天的我们写着明天的CSS特性。

1.3.3 样式库/模块

地址	标签	说明
30s-of-code(css)	30s-of-code(css)	常用CSS样式模块集合，30s of code系列。
animate.css	bulma.css	CSS3动画库。
Hover.css	Hover.css	鼠标hover交互动画库。
bulma.css	bulma.css	一款轻量级的CSS UI库。
cardinal.css	cardinal.css	一款移动优先的less库。
bootflat.css	bootflat.css	一款扁平化风格scss库，基于BootStrap3.3。
corpus.css	corpus.css	一款scss集合库。
weui	weui	微信风格的样式库，腾讯。
materialize.css	materializecss	Material风格的响应式前端样式框架。
mui.css	MUI	Material风格的轻量级前端样式框架。
Metro UI	Metro UI	一款流行的响应式前端样式框架，React版。
NES.css	NES.css	游戏机风格的前端样式框架。
paper.css	paper.css	手绘风格的前端样式框架。
css3 icon	css3 icon	纯CSS实现的图标。
Bootstrap 文档	bootstrap	红极一时的前端样式框架。
fontawesome	fontawesome	字体图标库。
iconfont	iconfont	字体图标库，阿里。
normalize	normalize	相对较优的CSS reset替代方案。

1.3.4 其他

地址	标签	说明
css tricks	css tricks	包括布局、图标、动画等CSS技巧。
BEM	bem	BEM写法规范。
ACSS	acss	Atomic CSS，一种模块化写法规范。
IT.css	itcss	IT CSS，一种组件化写法规范。
CSS modules	css-modules	一种CSS样式模块化的解决方案。
css in js	css-in-js	用写js的方式生成css样式。
Moo-CSS	moo-css	一种CSS写法方案。

1.4 JS插件/库

1.4.1 库

地址	标签	说明
jQuery api	jQuery	红极一时的js库。
Zepto api	Zepto	移动端使用的轻量级“jQuery”。
city.js	city	全国行政区划分数据文件。
phaser.js	phaser	2D游戏前端库。
fabric.js	fabricjs	有名的svg和canvas相互转换的封装库。
babylon.js	babylonjs	有名的3D游戏/视频框架。
stdlib	stdlib	js的数学增强库。
immutable-js	immutable	生产环境js的List, Stack, Map, OrderedMap, Set, OrderedSet以及Record数据结构支持。
GCanvas	gcanvas	轻量的跨平台图形引擎（web/weex/react-native），阿里。

1.4.2 数据工具

地址	标签	说明
LoDash	lodash	广为人知的函数式工具库。
ramda	ramda	广为人知的函数式工具库。
UnderscoreJS	underscorejs	红极一时的函数式工具库。
StreamJs	streamjs	一款js数据的操作工具。
BaconJs	baconjs	也是一款js数据的操作工具。
MomentJs	momentjs	一款日期格式化的工具。
numbro	numbrojs	一款多国语言的数字转化工具。
accounting.js	accounting.js	数字，金钱的格式化工具。
money.js	money.js	金钱的汇率转换工具。

1.4.3 请求、cookie和缓存

地址	标签	说明
axios	axios	高频使用的ajax库。
fetch	fetch	Fetch API的兼容polyfill。
jsonp	jsonp	不用多说，实现jsonp。（axios没有封装jsonp）
URI.js	uri	URI解析操作的工具。
StoreJs	storage	storage的封装库，兼容IE6。
js-cookie	js-cookie	cookie的封装库。
Dexie.js	Dexie.js	IndexedDB的封装库。

1.4.4 插件

地址	标签	说明
swiper.js	swiper	轮播插件。
nanobar.js	nanobar	绚丽的进度条展示插件，IE7+。
sweetalert	sweetalert.js	还算库的PC alert展示插件。
bowserjs	bowserjs	通过ua做的浏览器探测插件。
vConsole	vconsole	被誉为移动端的开发者工具。
clipboard.js	clipboardjs	剪贴板控制插件。
Qrcode-generator	grcode-generator	二维码生成工具。
html2canvas	html2canvas	html转为图片（canvas），即实现网页截图。
Pen Editor	Pen Editor	web的文本编辑工具。
cleave.js	cleave.js	一款好用的input输入控制插件。
autosize.js	autosize.js	一款好用的<textarea/>高度自适应工具。
FileSaver.js	FileSaver.js	网页端字符/图片/文件另存为插件。
FileAPI.js	FileAPI	控制文件上传的插件。
shake.js	shake.js	移动端摇晃震动监听插件。

视/音频

地址	标签	说明
mediaelement.js	mediaelementjs	一款视频控制插件。
video.js	videojs	一款视频控制插件。
flv.js	flvjs	一款无需flash的flv播放插件。
howler.js	howlerjs	视、音频控制插件。
jplayer	jplayer	jQuery的视、音频控制插件。
audio5.js	audio5js	一款音频控制插件。

图片

地址	标签	说明
caman.js	camanjs	一款web图片处理插件。

1.4.5 工具

地址	标签	说明
md5.js	md5	md5加密。
requirejs 文档	requirejs	js模块化工具。
seajs 文档	seajs	js模块化工具。
Browserify 文档	browserify	浏览器端使用类似于 node 的 require() 方式。
validate.js	validate.js	form表单校验工具。
validator.js	validator.js	有名的内容校验工具，比如邮箱验证、数值验证等。

1.4.6 数据可视化(图表)

地址	标签	说明
highcharts	highcharts	效果、兼容最好（ie6+）的可视化库，可惜企业要收费。
echarts	echarts	国内最全面的可视化库。
d3	d3	不直接输出图形，输出开发功能的svg工具。
Chartjs	chartjs	模块化可视化库。
antv	G2/F2	包括pc/移动的可视化库，蚂蚁。
FundCharts	fundcharts	本人的跨端轻量可视化库。
ThreeJs文档	threejs/webGL	3D建模工具
scene.js	scenejs	WebGL 3D基础库。
Snap.svg	snap	一款svg操作库。
pixi.js	pixijs	2D WebGL渲染引擎。
svg-3d-builder	svg-3d-builder	3D SVG渲染引擎。
jsplumb	jsplumb	一款好用的流程图可视化库。
cytoscapejs	cytoscape	一款好用的关系图谱可视化库。

1.4.6 数据可视化(地图)

地址	标签	说明
cesiumjs	Cesium.js	一款开源的3D城市建模库。
Kartograph	Kartograph.js	一款普通的2D SVG城市数据展示库，IE7+。
leafletjs	Leaflet.js	一款移动优先的地图展示插件。

1.4.7 h5动画

地址	标签	说明
Bounce.js	BounceJS	牛啤的CSS3动画创建工具。
animateplus.js	Animateplus	仅3k的动画工具。
svg.js	svgjs	轻量的svg操作/动画库。
snapsvg	Snap.svg	一款有名的svg操作/动画库。
lottie	lottie	web/原生/小程序的跨端动效方案。
EaselJS	easeljs	canvas动画操作库，CreateJS四剑客之一。
TweenJS	tweenjs	动画曲线（ease/linear...）操作库，CreateJS四剑客之一。
SoundJS	soundjs	音频控制库，CreateJS四剑客之一。
PreloadJS	preload	资源预加载库，CreateJS四剑客之一。

1.4.8 移动端手势

地址	标签	说明
AlloyFinger.js	AlloyFinger	增加移动端的各种手势事件。
hammer.js	hammerjs	增加手势以及取消了移动端click的300ms延迟。

1.4.9 加载

地址	标签	说明
aload.js	aload.js	异步图片/js/css加载工具。
layzr.js	layzr.js	轻量图片懒加载工具。
lazysizes.js	lazysizes	高性能的图片/iframe懒加载工具。

1.5 Vue

地址	标签	说明
Vue 文档	vue	官方文档。
vue-cli 文档	vue-cli	vue脚手架工具文档。
vuex 文档	vuex	vue数据流控制工具。
vue-router 文档	vue-router	基于vue的前端路由控制。
vue-content-loader 文档	create-vue-content-loader	vue版SVG骨架屏插件。
better-scroll 文档	better-scroll	控制滚动场景的插件。
vant 文档	vant	移动UI库，有赞。
vue-weui 文档	vue-weui	weui风格的移动UI组件库。
Element 文档	element	使用PC中后台前端开发的UI组件库，饿了么。
vue-lazyload 文档	vue-lazyload	vue版的图片/组件懒加载插件。
iView 文档	iview	PC UI组件库。
antd-vue 文档	antd-vue	PC UI组件库，ant design的Vue版。
vue-i18n 文档	vue-i18n	多语言解决方案。
vue-echarts 文档	vue-echarts	Echarts的Vue封装组件。
Nuxt.JS 文档	nuxtjs	Vue的服务端渲染应用框架。

1.6 React

地址	标签	说明
React 文档	react	官方文档。
create-react-app 文档	create-react-app	react脚手架工具文档。
react-router	react-router	基于react的前端路由控制。
redux 文档	redux	广泛使用的数据流控制工具，reducer+flux。
flux 文档	flux	数据流控制工具。
mobx 文档	mobx	轻量数据流控制工具。
dvajs 文档	dvajs	基于 redux 和 redux-saga 的数据流方案，蚂蚁。
UmiJs 文档	umijs	可插拔的企业级 react 应用框架，蚂蚁。
NextJs 文档	nextjs	轻量级的 React 服务端渲染应用框架。
react-content-loader 文档	create-content-loader	react版SVG骨架屏插件。
antd 文档	antd	ant design，PC UI组件库。
antd-mobile 文档	antd-mobile	移动版的antd，UI组件库。
styled-components 文档	styled-components	react的css-in-js实现。
react-lazyload 文档	react-lazyload	react版的图片/组件加载插件。
react-markdown	react-markdown	在react上使用的markdown工具。
classnames	classnames	操作className的工具，多用于React。
30s-of-react	30s-of-react	常用React代码模块集合，30s of code系列。

1.7 Nodejs和构建

地址	标签	说明
npm	npm	node包统一平台。
yarn	yarn	高速的node包管理平台。
nodejs api	node	Node官方文档。
V8	v8	V8引擎介绍。
docker	docker	应用容器引擎Docker。
Linux	linux	Linux命令查询手册。
GraphicsMagick	gm	后台图片处理工具。

1.7.1 构建

地址	标签	说明
ejs	ejs	简单上手的html模板引擎。
pug	pug	html模板引擎。
jade	jade	html模板引擎。
gulp 配置文档	gulp	自动化构建工具。
gulp plugins	gulp	gulp插件中心。
grunt 配置文档	grunt	自动化构建工具。
rollupjs文档	Rollup	一款ES6模块构建工具。
webpack 配置文档	webpack	应用面不能再广的打包工具。
parceljs 配置文档	parceljs	轻量打包。
babel	babel	应用面不能再广的ES编译器。

1.7.2 服务端

地址	标签	说明
express 配置文档	express	轻量web应用程序开发框架。
Koa 文档	koajs	web应用程序开发框架。
feathers.js	feathersjs	轻量web应用程序开发框架。
Nest.js	nestjs	强大的Web应用框架。
Mockjs 配置文档	mockjs	接口数据模拟工具，可以在客户端和服务端使用。
SheetJs	sheetjs	通过node操作word的工具。
js-pdf	js-pdf	通过node操作生成pdf的工具。
pm2	pm2	node进程管理。
colors.js	colorsjs	node log控制台输出颜色控制。
log4.js	log4js	log日志工具。
nw.js	nwjs	基于nodeJs和chromium的应用程序运行环境，允许您直接从DOM调用所有Node.js模块。
node-archiver	node-archiver	支持ZIP/TAR文档流传输和接收插件。
yazl	yazl	压缩zip插件，对应解压为yauzl。

1.8 Hybird和跨端

地址	标签	说明
pwa	pwd	渐进式web应用。
微信小程序官网	小程序/hybird	微信小程序开发官网。
支付宝小程序官网	小程序/hybird	支付宝小程序开发官网。
百度小程序官网	小程序/hybird	百度小程序开发官网。
wepy文档	小程序/hybird	vue语法的小程序开发官网。
小程序工具集合	小程序/hybird	小米轻应用开发官网。
小米轻应用官网	轻应用/hybird	小米轻应用开发官网。
Oppo/vivo快应用官网	轻应用/hybird	Oppo/vivo轻应用开发官网。
华为快应用官网	轻应用/hybird	华为轻应用开发官网。
React-native 文档	跨端	热门的react语法跨端工具。
Weex文档	跨端	热门的vue语法跨端工具。
Weex-UI文档	跨端/weex	weex的UI组件库。
Taro文档	小程序/跨端	跨web/小程序/原生的react语法跨端工具。
uni-app文档	小程序/跨端	跨web/小程序/原生的vue语法跨端工具。
Flutter文档	跨端	超火的Dart语法的跨端开发工具。
Electron文档	跨端	windows应用的开发。
chrome extension	chrome-extension	Chrome拓展程序官方文档。
chrome-plugin-demo	chrome-plugin, chrome-extension	一篇很好的Chrome拓展程序开发教程，有demo。

1.9 辅助工具

地址	标签	说明
正则表达式30分钟	regexp	正则上手教程。
在线正则验证	regexper	可视化在线正则验证网站。
whistle	whistle	web调试代理工具。
husky	Husky	NodeJS上的git工具。
eslint 文档	eslint	js代码检查工具。
visualgo	Visualgo	可视化算法查询。
visualgo	Visualgo	可视化算法查询。
动画曲线查询	cubic	动画曲线查询网站（ease/linear...）
Character Entity Reference Chart	charref	字符标点的转义字符查询。
gradient-editor	gradient-editor	CSS渐变样式生成工具。
valineJS	valine	评论系统工具。
GitTalk	gittalk	github的评论工具。
webIDE	webide	web上写代码。
Fusuma	fusuma	用markdown写web ppt。
VuePress	vuepress	用markdown写文档/博客
Hexo	hexo	用markdown写文档/博客
materialui	materialui	快速色值选择
polacode	polacode	代码截图的vscode IDE插件
carbon	carbon	生成写博客时代码的美腻截图
tinypng	Tinypng	压缩png和jpeg图片
svgomg	SVGOMG	压缩SVG图形
ImageMagick	imagemagick	后台运用极广的图片处理工具。

1.10 测试、安全及加密

1.10.1 单元测试

地址	标签	说明
MochaJS文档	mocha	一款单元测试工具。
JestJS文档	jest	一款单元测试工具。

1.10.2 安全及加密知识

《浅谈前端安全》

《8大前端安全问题》

《前端加密那点事》

《HTTPS 到底加密了什么？》

《Web 端反爬虫技术方案》

《那些我们该讨论的前端加密方法》

1.10.3 Debug

地址	标签	说明
FunDebug	FunDebug	简单的项目debug监控工具，有免费版

1.10.4 质量检测

地址	标签	说明
JSLint js代码检查	jslint	一个JavaScript验证工具
JSHint js代码检查	jshint	一个JavaScript验证工具
ESLint js代码检查	eslint	一个JavaScript验证工具
CSSLint css代码检查	csslint	一个CSS验证工具
Markup Validation Service	validator	在线HTML验证网站
SonarLint vscode	sonarlint	js/ts工程代码质量验证的vscode插件

---

FE-Tools - Chrome插件

功能：

• 工具网站搜索（√）
• 本地收藏夹网站搜索（√）
• CSS属性/Moo-CSS搜索（√）
• url转二维码及svg矢量图（√）
• 图片压缩及转base64（√）
• px/rem/vw换算计算器（√）
• rgb/hsb/hex色值换算（√）
• 快速翻译（√）
• 工具函数库搜索
• 搜索自定义拓展

前往>>

安装方式

clone本仓库到本地，点击“加载已解压的拓展程序”选择本地仓库目录下的chrome-extension目录。

---

2.fe-tools方法/工具库

├─client    
│  ├─js
│  │  ├─functions
│  │  └─plugins
│  └─less
└─nodejs
    ├─base
    ├─imgbuild
    ├─pagebuild
    └─typicalbuild
        ├─react
        ├─vue
        ├─gulp+webpack		
        └─webpack

说明

2.1 client 客户端

前端开发常用样式、方法；

2.1.1 js js方法、插件

functions js方法

• dom：DOM操作；
• native：验证、cookie、css、颜色/图片、平台、时间、url解析、storage封装等方法；

plugins js插件

• js：原生组件
  • alert 弹框
  • toast toast提示
  • keyboard-number 数字软键盘
  • pullRefresh 下拉刷新
• vue：vue组件
  • Alert弹窗
  • PullRefresh下拉刷新
  • Toast通知提示
• react：react组件
  • Alert弹窗
  • PullRefresh下拉刷新
  • Toast通知提示

2.1.2 less 基础样式库

• pc：PC端
• mobile：移动端

3 nodejs 服务端、脚本

使用可见ijijin-cli 使用可见ijijin_builder

3.1.1 base 方法

• fs：文件操作
• server：简易服务器
• util：其他工具

3.1.2 pagebuild 页面构建

3.1.3 typicalbuild 典型项目构建

• gulp+webpack
• webpack
• vue
• react

更新信息

• 2019.04.28：新增storage封装；新增下拉刷新、数字键盘原生组件；