前端开发常用文档/网站地址、样式/js方法封装库、项目模板。
目录：
- 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 测试、安全及加密
| 地址 | 标签 | 说明 |
|---|---|---|
| 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特殊的属性或表现可以查这个。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| can i use | -- |
使用频率最高的兼容支持查询网站。 |
| ES兼容查询 | js |
ECMAScript兼容查询。 |
| IOS字体支持查询 | ios font |
IOS系统自带字体查询。 |
| Web安全色查询 | web color |
为了尽量让用户看到色彩相同的网页,请尽量使用216色的web安全色。 |
| 浏览器份额统计 | browser |
百度统计的市面上浏览器份额，（要Flash，Chrome不一定能看）。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| less文档 | less |
易上手的CSS预处理工具。 |
| sass 文档 | sass |
热门的CSS预处理工具。 |
| stylus 文档 | stylus |
功能丰富的CSS预处理工具。 |
| stylus 文档(张旭鑫) | stylus |
stylus中文文档。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| 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特性。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| 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替代方案。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| 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写法方案。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| 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数据结构支持。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| LoDash | lodash |
广为人知的函数式工具库。 |
| ramda | ramda |
广为人知的函数式工具库。 |
| UnderscoreJS | underscorejs |
红极一时的函数式工具库。 |
| StreamJs | streamjs |
一款js数据的操作工具。 |
| BaconJs | baconjs |
也是一款js数据的操作工具。 |
| MomentJs | momentjs |
一款日期格式化的工具。 |
| numbro | numbrojs |
一款多国语言的数字转化工具。 |
| accounting.js | accounting.js |
数字，金钱的格式化工具。 |
| money.js | money.js |
金钱的汇率转换工具。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| 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的封装库。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| 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图片处理插件。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| md5.js | md5 |
md5加密。 |
| requirejs 文档 | requirejs |
js模块化工具。 |
| seajs 文档 | seajs |
js模块化工具。 |
| validate.js | validate.js |
form表单校验工具。 |
| validator.js | validator.js |
有名的内容校验工具，比如邮箱验证、数值验证等。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| 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渲染引擎。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| cesiumjs | Cesium.js |
一款开源的3D城市建模库。 |
| Kartograph | Kartograph.js |
一款普通的2D SVG城市数据展示库，IE7+。 |
| leafletjs | Leaflet.js |
一款移动优先的地图展示插件。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| 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四剑客之一。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| AlloyFinger.js | AlloyFinger |
增加移动端的各种手势事件。 |
| hammer.js | hammerjs |
增加手势以及取消了移动端click的300ms延迟。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| aload.js | aload.js |
异步图片/js/css加载工具。 |
| layzr.js | layzr.js |
轻量图片懒加载工具。 |
| lazysizes.js | lazysizes |
高性能的图片/iframe懒加载工具。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| 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 |
多语言解决方案。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| 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。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| npm | npm |
node包统一平台。 |
| yarn | yarn |
高速的node包管理平台。 |
| nodejs api | node |
Node官方文档。 |
| V8 | v8 |
V8引擎介绍。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| 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编译器。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| 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控制台输出颜色控制。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| 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应用的开发。 |
| 地址 | 标签 | 说明 |
|---|---|---|
| 正则表达式30分钟 | regexp |
正则上手教程。 |
| whistle | whistle |
web调试代理工具。 |
| husky | Husky |
NodeJS上的git工具。 |
| eslint 文档 | eslint |
js代码检查工具。 |
| 动画曲线查询 | cubic |
动画曲线查询网站（ease/linear...） |
| ImageMagick | imagemagick |
后台运用极广的图片处理工具。 |
| GraphicsMagick | gm |
后台图片处理工具。 |
| valineJS | valine |
评论系统工具。 |
| GitTalk | gittalk |
github的评论工具。 |
| webIDE | webide |
web上写代码。 |
| Fusuma | fusuma |
用markdown写web ppt。 |
| VuePress | vuepress |
用markdown写文档/博客 |
| Hexo | hexo |
用markdown写文档/博客 |
| 地址 | 标签 | 说明 |
|---|---|---|
| MochaJS文档 | mocha |
一款单元测试工具。 |
| JestJS文档 | jest |
一款单元测试工具。 |
├─client
│ ├─js
│ │ ├─functions
│ │ └─plugins
│ └─less
└─nodejs
├─base
├─imgbuild
├─pagebuild
└─typicalbuild
├─react
├─vue
├─gulp+webpack
└─webpack
前端开发常用样式、方法；
- dom：DOM操作；
- native：验证、cookie、css、颜色/图片、平台、时间、url解析、storage封装等方法；
- js：原生组件
- alert 弹框
- toast toast提示
- keyboard-number 数字软键盘
- pullRefresh 下拉刷新
- vue：vue组件
- Alert弹窗
- PullRefresh下拉刷新
- Toast通知提示
- react：react组件
- Alert弹窗
- PullRefresh下拉刷新
- Toast通知提示
- pc：PC端
- mobile：移动端
使用可见ijijin-cli 使用可见ijijin_builder
- fs：文件操作
- server：简易服务器
- util：其他工具
- gulp+webpack
- webpack
- vue
- react
- 2019.04.28：新增storage封装；新增下拉刷新、数字键盘原生组件；
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent