[关闭]
@yyman001 2018-06-30T20:04:33.000000Z 字数 20880 阅读 8109

一些前端开发的干货

资料或许有重复! 资料或许有重复! 资料或许有重复!,我也只是一个搬运工！

库?
目前最全的前端开发面试题及答案

推荐

编码规范

前端库搜索

前端导航

API文档

移动端资料
- H5 案例 - 不定期收集市面上优秀的 H5 作品。
- 移动H5前端性能优化指南
- 支付宝无线Web开发经验谈
- 移动前端系列——移动端页面坑与排坑技巧( 2014-12-08 )
- 移动web最佳实践（2013）
- 移动Web前端框架 ( 2014 )
- 移动端自适应方案-lib.flexible,淘宝手机版都是用这个框架
- iOS 微信 音频 视频自动播放
- 解决ios下的微信打开的页面背景音乐无法自动播放
- 微信JS-SDK说明文档
- 微信js demo
- QQ浏览器X5内核问题汇总
- 手机分辨率查询
- 移动端响应式框架-测试阶段,不适用于复杂页面
- 视频H5のVideo标签在微信里的坑和技巧
- LAVAS 基于 Vue.js 的 PWA 解决方案 帮助开发者快速搭建 PWA 应用，解决接入 PWA 的各种问题

学习资料/文章
- 中国程序员容易发音错误的单词
- 面向对象的JavaScript编程：原理与实践
- React 入门教程-中文
- React-Native学习指南
- [译]看漫画理解Flux
- 《看漫画，学 Redux》 —— A cartoon intro to Redux
- 什么是正则表达式?
- 前端基础进阶系列
- Study-Step-by-Step 书籍合集
- 渲染性能
- awesome-javascript
- JavaScript教程 - 廖雪峰的官方网站
- Github使用指南-从新手到专家
- Git 学习目录
- node.js中文资料导航
- 了不起的Nodejs Nodejs的各种资源,英文
- AngularJS ,一些关于 AngularJS 的博客，文章，视频，书籍等
- HelloSea.js seajs教程
- HTTP API 设计指南
- JSON API：用 JSON 构建 API 的标准指南中文版
- 了不起的React React的各种资源,英文
- 一家伙（s5s5）学习css3动画的心得
- 让WEB前端的变优雅的东东，如：代码规范，代码组织，最佳实践之类
- 前端工具推荐
- 设计规范 -强烈推荐看 链接失效
- 腾讯团队web移动文章
- 视觉设计师是怎样让前端工程师 100% 实现设计效果的？
- JavaScript 秘密花园
- vue 教程
- 10 个原则让动画带你飞
- React Native 中文网
- cssreference.io
- 大话设计模式
- YOU MIGHT NOT NEED JQUERY - 是用原生写法代替jq
- 全景漫游VR -（淘宝造物节背后的库）
- 从零开始构建 JavaScript 技术栈
- 微信小程序开发资源汇总
- 《一起学 Node.js》彻底重写完毕
- TypeScript 入门教程
- TypeScript 官方文档
- 第一本 PWA 中文书
- 如何通过饿了么 Node.js 面试
- JavaScript 算法与数据结构
- 《编程之法：面试和算法心得》
- learnVue - Vue.js源码分析
- 前端面试手册

书籍资料
- 免费的计算机编程类中文书籍
- 免费编程书籍
- 码农周刊整理-推荐关注
- git资料
- 高质量的Git中文教程
- 运维实践指南
- 《微服务：从设计到部署》
- GitHub秘籍

一些社区
- Stack Overflow：Stack Overflow是一个与程序相关的IT技术问答网站。用户可以在网站免费提交问题，浏览问题，索引相关内容，在创建主页的时候使用简单的HTML。
- segmentfault：是中国领先的开发者技术社区。

系列文章
- 《深入理解Node.js：核心思想与源码分析》
- 性能专栏
- Docker — 从入门到实践
- Nginx开发从入门到精通
- React Cookbook
- React.js 小书
- React 入门实例教程
- React-Native学习指南
- html5 Canvas画图系列教程目录
- web前端开发分享-目录系列
- 深入理解javascript原型和闭包系列
- 深入理解JavaScript系列
- JavaScript模式集合
- 深入理解JavaScripts设计模式系列：
- 设计模式总结,非js
- 7 天打造前端性能监控系统
- 七天学会NodeJS
- 前端之困 · XSS CookBook系列
- 一个月时间整理《深入浅出Node.js》
- 【web必知必会】——图解HTTP
- 廖雪峰-JavaScript基础教程
- MDN JavaScript基础教程
- 45个实用的JavaScript技巧、窍门和最佳实践
- Must-Watch JavaScript 需要翻墙
- Must-Watch CSS 需要翻墙
- 搜罗一切webpack的好文章好工具
- Vim 从入门到精通
- 如何提高英语技能
- 《Node.js 调试指南》
- 《JavaScript 闯关记》

其他工具
- flexbox在线制作器
- SPARK动画平台 这是我们组做的一个动画效果平台，里面集合了所有的牛逼动画，可以让你灵感猛增！（目前已开放外网使用）
- OneDiv 这是个神奇的网站，里面的所有细节都是用一个div元素通过复杂的Css3实现的，有空可以去开开脑洞噢
- 贝塞尔曲线生成器
- HTML5 与 CSS3 技术应用评估
- 各种奇妙的hack
- 几乎所有设备的屏幕尺寸与像素密度表
- 移动设备参数表
- ios端移动设备参数速查
- 浏览器兼容表
- 移动设备查询器
- 移动设备适配库
- 移动设备适配库2
- viewport与设备尺寸在线检测器
- html5 移动端兼容性速查
- 在线转换字体
- css3 选择器测试
- 兼容性速查表
- 浏览器的一些独特参数
- 各种各样的媒体查询收集
- sass @include-media 媒体查询库
- css3 动画在线制作器
- css3 渐变在线制作器
- 移动端手势表
- webkit独有的样式分析
- HTML5 Cross Browser Polyfills
- HTML5 POLYFILLS
- iPhone 6 屏幕揭秘
- 智图客户端 – 你的图片你做主,本地图片快速压缩工具
- 网站视频/音乐 扒神器
- ELF 灵活可扩展的HTML5 构建工具
- 让小程序支持组件化开发的框架-类型vue组件开发

js插件网站
- Unheap
- jquer.in
- OpenLib--http://www.open-lib.com/
- jQuery插件库--http://www.jq22.com/
- jquery之家--http://www.htmleaf.com/
- 分享天空--http://www.sharetk.com/
- jQuery Script--http://www.jqueryscript.net/
- dowebok 做好网站--http://www.dowebok.com/
- Web前端开发--http://www.zjgsq.com/

前端组件库

搭建web app常用的样式/组件等收集列表(移动优先)

手势库
- TouchSwipe

vue专题
- awesomes vue 各种组件
- 『收藏』VUE优秀UI组件库合集
- cooking更易上手的前端构建工具 for vue
- 一个记录使用了vue技术的网站列表-made with vue.js

Vue相关开源项目库汇总
- http://www.opendigg.com/tags/front-vue
- https://github.com/opendigg/awesome-github-vue
- https://vuejsexamples.com/
- Vue.js Script

vue ui组件库
- vue.js ie9+
- 滴滴 Web 移动端组件库 cube-ui
- AT UI 由阿里通信技术团队打造基于Vue的Web组件库
- 微信UI Vux 支持@^1.0.24
- bootstrap风格 Vux 支持@v1.x.x
- material风格 vue-mdl
- Keen-UI
- Mint UI
- iView UI
- element UI 支持vue@2.0
- Muse-UI - 基于 Vue 2.0 和 Material Desigin 的 UI 组件库
- Vue Material
- vant 有赞开发的基于 Vue.js 2.0 的 UI 组件库
- vue-beauty 基于 ant design 的漂亮的 vue 组件库

vue 其他插件组件
- PortalVue ， anywhere in the document/普通开发使用组件
- mpvue vue转微信小程序
- vue-axios
- Vue-Lazyload 图片延迟加载
- vue-amap 基于Vue 2.0 和高德地图的地图组件
- Vueditor 基于Vue 2.0 的富文本编辑器
- Scroller for Vue 2.0
- JRoll无限加载+下拉刷新 for Vue2
- Vue-Core-Image-Upload 2.0 一款轻量级图片裁剪上传插件
- vue-datepicker 日期拾取组件
- 一个生成 svg 图标组件的工具 (vue2.x)
- vue GUI generator

React 相关
- ANT DESIGN
- reactSPA
- ReCharts 是一个 React 图表组件库
- React-Bootstrap

Weex
- Weex Ui

  1. 前端自动化(Workflow)

  2. 前端框架(Frameworks)

1.2 后端UI框架
- Layui
- BUI

  1. JavaScript 框架汇总
  1. 前端游戏框架(动画引擎)
  1. ui组件库
  1. 基础模版
  1. 排版
  1. 网格系统
  1. HTML5 API 应用
  1. UA 识别
  1. 表单处理

10.1 表单验证(Form Validator)/表单提示
- (Depreciated) A Laravel styled JavaScript Object/Form/JSON validation library
- validate.js
- Validator
- Parsley
- jquery.form.js - jQuery Form Plugin
- Validform
- validator.js
- jquery-validation - jQuery Validation Plugin
- formvalidator.js
- Fort.js – 表单填写进度提示
- mailcheck - 用于检测email地址的域名
- Floatlable.js - 输入时显示placeholder文本
- jQuery Label Better
- 2016 年最好用的表单验证库 SMValidator.js

10.2 < select > 相关

10.3 单选框/复选框相关

10.4 上传组件


10.7 标签插件(Tag)

10.8 自动完成插件

10.8.1
- Cleave.js – 自动格式化表单输入框的文本内容

10.9 样式修正
- autosize - 使文本框自动适应所输入的内容

  1. 图表绘制/图形库(Graphics)
  1. 日期格式化
  1. 页面交互

13.1 Slider

13.2 瀑布流

13.3 懒加载/加载监听/预加载
- basket.js – 基于 LocalStorage 的资源加载器
- imagesLoaded – 检测网页中的图片是否加载完成
- layzr.js - git关注蛮高的 - github
- Echo.js
- lazySizes
- jquery_lazyload
- BttrLazyLoading
- lazyload.js
- waitForImages - 图片加载监听库
- PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能
- jQuery.preload - 预加载图片资源
- bindWithDelay - jQuery Plugin For Delayed Event Execution
- TypeWatch - 停止输入时调用

13.4 图片轮播(幻灯片)/图片展示

13.5 图片剪裁/图片处理

13.6 图片放大镜
- EasyZoom for jQuery
- ZooMove for jQuery
- Magnifier.js

13.6 进度条/加载动画(Loading)
- CSS Loader 是一个非常有用加载器。它允许开发人员利用纯 CSS 文件，以及一个空

元素便可以快速的创建加载指示器。
- progressbar.js svg线条
- NProgress.js
- progress.js
- Pace - Automatic page load progress bar
- jquery-ajax-progress
- waitMe - 很漂亮的loading效果
- spin.js
- sonic.js
- fakeLoader.js - 依赖jQ的全屏加载js
- Easy Pie Chart

13.7 侧滑插件(offcancas)

13.8 菜单(Menu)

13.9 滚动侦测(ScrollSpy)

13.10 滚动加载更多/下拉刷新(Pull to Refresh)

13.11 平滑滚动插件(Smooth Scroll)

13.12 全屏滚动/全屏切换

13.13 分屏滚动

13.14 转场效果

13.15 固定元素(Sticky)
- Sticky-Kit 比较出名,功能强大,个人推荐
- Sticky Navbar -可定点
- Waypoints
- sticky - jQuery Plugin for Sticky Objects
- jquery.pin - 固定页面元素
- stickUp
- Slinky.js - 堆叠头部创建滑动导航列表
- Headroom.js
- ScrollMagic
- Sticky Float
- Sticky Mojo
- Zebra Pin
- HC-Sticky

13.16 触控事件

13.17 拖拽组件

13.18 隐藏或展示页面元素

13.19 滚动条(Scrollbar)
- jQuery-slimScroll pc效果不错5k,手机端不建议是用
- jquery.mCustomScrollbar pc,苹果效果不错,安卓效果略差,大小较大
- jScrollPane
- jquery.scrollbar
- perfect-scrollbar
- nanoScrollerJS
- tinyscrollbar
- gemini-scrollbar

13.20 视差滚动(Parallax Scrolling)
- MidnightJS 效果很赞
- parallax.js
- jparallax
- StickyStack.js -github
- jquery.superscrollorama.js 很酷的动画效果

  1. 代码高亮插件/代码编辑器
  1. UI Icon 组件

  1. 动画(Animate)

  2. 本地存储

17.1 数据库
- nedb
- lowdb
- localForage
- Dexie.js
- ZangoDB

  1. 模板引擎

  1. 通知组件/弹框组件/模态窗口

  2. 提示控件(Tooltips)

  1. 对话框/遮罩层/弹出层(lightbox)
  1. 文档/表格/PDF
  1. 目录树插件
  1. Ajax模块

  1. 音频/视频

  2. 按钮

  1. 富文本编辑器/Markdown编辑器/Markdown解析器
  1. 内容提取(Readability)
  1. 颜色(CSS Colors)/SVG
  1. 选项卡(Tabs)
  1. 文本处理
  1. 布局(Layout)
  1. 实用工具/其他插件
  1. sass 库

34.1 分页
- jqPagination 分页插件

34.2 模拟打字
- jQuery.type-typetype 用于textarea文本域;
- typing.js 华丽的打字效果JS插件
- superplaceholder.js 利用文本框的 placeholder 属性，以打字形式展示出自定义的文字，可用于提示。
- iTyped.js 实现打字效果

34.3 字数统计
- Countable.js：这个脚本可以添加实时段落，文字和字符数到一个html元素

  1. 未知分类

  2. Canvas库

webpack 插件

其他

前端参考集

欢迎分享你的好东西给我@黑色技术

发布时间:2015-04-17

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注