前端经常使用插件、东西类库汇总

本人微信民众号:
前端修炼之路,迎接关注

本篇文章整顿本身运用过的和看到过的一些插件和东西,轻易往后本身查找和运用。

别的,谢谢白小明,文中许多的东西泉源于此。

弹出框

自力保护的三大组件之一(layDate、layer、layim)

基于jQuery的弹出框

基于Bootstrap的弹出框

一个结果异常好的弹层,支撑图片、支撑输入

轮播图

开源、免费、壮大的触摸滑动插件,经常使用于挪动端。

iSlider是一个表现出众,无任何插件依靠的手机平台javascript滑动组件。它能够处置惩罚任何元素,比方图片或许DOM元素

用HTML来完成网页版的PPT和宣扬展现页。

基于jQuery的轮播

jQuery扭转木马插件slick

插件形貌:最全最简朴最通用的 幻灯片轮播 ,可掌握的插件,pc端和挪动端都可圆满运用

及时革新

Browsersync能让浏览器及时、疾速相应您的文件变动(html、js、css、sass、less等)并自动革新页面。

页面调试

腾讯开辟保护的代码调试宣布,毛病监控上报,用户题目定位。能够经由过程url参数长途调试客户端定位题目。

一样是由腾讯开辟保护的代码调试东西,是针对挪动端的调试东西。与上一个差别的是,不能经由过程增添url参数长途调试客户端。

函数库

是一个一致性、模块化、高性能的 JavaScript 实用东西库。许多要领lodash已帮你写好了,直接挪用就行,不必本身费尽心思去写了。

Underscore供应了一套完美的函数式编程的接口,让我们更轻易地在JavaScript中完成函数式编程。

与前二者相似,但差别的是参数位置不一样,Ramda的理念是function first,data last。Ramda 另有一个特性:一切要领都支撑柯里化。
能够经由过程阮一峰的文章Ramda 函数库参考教程进修。

前端营业代码东西库。一致封装经常使用函数,并宣布到npm,以进步开辟效力。

手势库

针对多点触控装备编程的Web手势组件,疾速协助你的web递次增添手势支撑,也不必再忧郁click 300ms的延迟了。具有两个版本,无依靠的自力版和react版本。除了Dom对象,也可监听Canvas内元素的手势。

二维码

是一个能够在客户端天生矩阵二维码的jQuery插件,运用它能够很轻易的在页面上天生二维码。

模版引擎

doT模板轻易快捷的构造页面DOM,特性是快,小,无依靠其他插件。这也是我在项目中经常会运用的一个模版引擎。

Handlebars 是 JavaScript 一个语义模板库,经由过程对view和data的星散来疾速构建Web模板。它采纳”Logic-less template”(无逻辑模版)的思绪,在加载时被预编译,而不是到了客户端实行到代码时再去编译, 如许能够保证模板加载和运转的速率。
中文版本教程能够参考这篇文章Handlebars.js 模板引擎

针对挪动端模板引擎,语法很相似Handlebars。它是Framework7 内置模版引擎。别的据官网说,它比Handlebars在挪动端Safari中快2-3倍。
入门文章能够看[
template7入门教程及对它的一些意见](https://segmentfault.com/a/11…

Node模版引擎,是Express框架内置的模版引擎。中文版的教程能够看这篇Jade模板
别的能够参考Jade Syntax Documentation,这里整顿了Jade模版引擎的运用要领,而且能够及时更新。

色彩挑选器

Bootstrap 4 中运用的色彩挑选器。

支撑挪动端的,超小的色彩挑选器。不必大批的图片、也不须要其他插件,同时支撑自定义。

动画库

css3动画库,也是现在通用的动画库。只须要引入css,增添css款式即可完成动画。

Anime (/ˈæn.ə.meɪ/)是一个轻量级JavaScript动画库。

CSS3 hover 悬停结果,能够应用于链接、按钮、图片、SVG等等。

转动展现动画,WOW.js 依靠 animate.css,所以它支撑 animate.css 多达 60 多种的动画结果。
别的从官网上下载运用的时刻,要注意受权允许。差别的受权允许,价格但是不一样滴哦。

css3 animation动画库。

点击波纹结果,是一个基于 Google’s Material Design 的点击结果。

一个小型的JavaScript库,经由过程JS来掌握一系列的CSS动画递次实行,使CSS3动画变得异常简朴和文雅。

图片上传

一个超简朴的JS文件上传库。

由百度开辟的以HTML5为主,以FLASH为辅的文件上传组件。兼容IE6+,iOS 6+, android 4+。

正则表达式

用图形的体式格局示意正则表达式。

图片无损紧缩

图片无损紧缩,支撑PS软件插件直接紧缩,别的供应http、ruby、php、node.js、pyhont、java、.net多种体式格局API。
供应在线紧缩。如果是多张图片紧缩须要付费~

一款国内的在线图片紧缩。一样大批图片文件紧缩须要付费。

数据Mock

是一款前端开辟中阻拦Ajax要求再天生随机数据相应的东西.能够用来模仿效劳器相应. 长处是异常简朴轻易, 无侵入性, 基础掩盖经常使用的接口数据类型。

官网上没有直接给ajax的要求阻拦例子,能够参考这篇[
Mock.js运用](https://segmentfault.com/a/11…

是一个可视化,而且能疾速天生模仿数据的效劳,是一个Mock平台,由大搜车保护。Easy Mock也是基于Mock.js,差别的是不必在当地存储文件,直接长途接见接口。接口完成后只须要转变url地点即可。
简朴相识Easy Mock运用要领,能够参考怎样运用Easy Mock,直接看文章中给出的视频衔接即可。

基于node效劳,能够天生 REST API ,异常的轻易。

视频播放器

Chimee(读“奇米”, [tʃɪ’mɪ:])是由奇舞团开源的一套 H5 视频播放器处理方案。
支撑 MP4、M3U8、FLV 等多种媒体格式,同时它也帮我们处理了大部分的兼容性、差异化题目,包含全屏、自动播放、内联播放、直播解码等罕见媒体播放需求。

Bilibili开源纯JavaScript编写的FLV播放器。

开源、免费的HTML5和Flash视频播放器

jQuery的HTML5 音频和视频播放器。别的现在已增添了React 版本的jPlayer。

转动库

  • iScroll:https://github.com/cubiq/iscroll

    iScroll是一个高性能、小体积、零依靠、跨平台的js转动库。它支撑PC端、挪动端以至smart TV。
    别的支撑了多个差别的js版本,能够依据需求挑选运用。

  • beter-scroll:https://github.com/ustbhuangy…

    一款重点处理挪动端(已支撑 PC)种种转动场景需求的插件。它的中心是自创的 iscroll 的完成并对其举行了优化。
    别的beter-scroll用vue举行了重写,更适合举行挪动端的开辟。

  • mescroll:https://github.com/mescroll/m…

    细腻的下拉革新和上拉加载 js框架.支撑vue,圆满运转于挪动端和主流PC浏览器。

    原文作者:siberiawolf
    原文地址: https://segmentfault.com/a/1190000017307855
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞