JS工具库

Day.js

一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。

npm install dayjs

基本用法

import dayjs from 'dayjs'

dayjs().format('YYYY-MM-DD HH:mm') // => 2022-01-03 15:06
dayjs('2022-1-3 15:06').toDate() // => Mon Jan 03 2022 15:06:00 GMT+0800 (中国标准时间)

qs

一个轻量的 url 参数转换的 JavaScript 库

npm install qs

基本用法

import qs from 'qs'

qs.parse('user=tom&age=22') // => { user: "tom", age: "22" }
qs.stringify({ user: "tom", age: "22" }) // => user=tom&age=22

js-cookie

一个简单的、轻量的处理 cookies 的 js API

npm install js-cookie

基本用法

import Cookies from 'js-cookie'

Cookies.set('name', 'value', { expires: 7 }) // 有效期7天
Cookies.get('name') // => 'value'

flv.js

bilibili 开源的 html5 flash 视频播放器，使浏览器在不借助 flash 插件的情况下可以播放 flv，目前主流的直播、点播解决方案。

npm install flv.js

基本用法

<video autoplay controls width="100%" height="500" id="myVideo"></video>

<script>
import flvjs from 'flv.js'

// 页面渲染完成后执行
if (flvjs.isSupported()) {
  var myVideo = document.getElementById('myVideo')
  var flvPlayer = flvjs.createPlayer({
    type: 'flv',
    url: 'http://localhost:8080/test.flv' // 视频 url 地址
  })
  flvPlayer.attachMediaElement(myVideo)
  flvPlayer.load()
  flvPlayer.play()
}
</script>

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。如果你还苦于在手机上如何调试代码，用它就对了。

npm install vconsole

基本用法

import VConsole from 'vconsole'

const vConsole = new VConsole()
console.log('Hello world')

Animate.css

一个跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好，使用方便。

npm install animate.css

基本用法

<h1 class="animate__animated animate__bounce">An animated element</h1>

import 'animate.css'

animejs

一款功能强大的 JavaScript 动画库。可以与CSS3属性、SVG、DOM元素、JS对象一起工作，制作出各种高性能、平滑过渡的动画效果。

npm install animejs

基本用法

<div class="ball" style="width: 50px; height: 50px; background: blue"></div>

<script>
import anime from 'animejs/lib/anime.es.js'

// 页面渲染完成之后执行
anime({
  targets: '.ball',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#F00',
  duration: 800
})
</script>

lodash.js

一个一致性、模块化、高性能的 JavaScript 实用工具库

npm install lodash

基本用法

import _ from 'lodash'

_.max([4, 2, 8, 6]) // 返回数组中的最大值 => 8
_.intersection([1, 2, 3], [2, 3, 4]) // 返回多个数组的交集 => [2, 3]

mescroll.js

一款精致的、在H5端运行的下拉刷新和上拉加载插件，主要用于列表分页、刷新等场景。

npm install mescroll.js

基本用法（vue组件）

<template>
  <div>
    <mescroll-vue
      ref="mescroll"
      :down="mescrollDown"
      :up="mescrollUp"
      @init="mescrollInit"
    >
      <!--内容...-->
    </mescroll-vue>
  </div>
</template>

<script>
import MescrollVue from 'mescroll.js/mescroll.vue'

export default {
  components: {
    MescrollVue
  },
  data() {
    return {
      mescroll: null, // mescroll实例对象
      mescrollDown: {}, //下拉刷新的配置
      mescrollUp: {
        // 上拉加载的配置
        callback: this.upCallback
      },
      dataList: [] // 列表数据
    }
  },
  methods: {
    // 初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      // 发送请求
      axios
        .get('xxxxxx', {
          params: {
            num: page.num, // 当前页码
            size: page.size // 每页长度
          }
        })
        .then(response => {
          // 请求的列表数据
          let arr = response.data
          // 如果是第一页需手动置空列表
          if (page.num === 1) this.dataList = []
          // 把请求到的数据添加到列表
          this.dataList = this.dataList.concat(arr)
          // 数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
            mescroll.endSuccess(arr.length)
          })
        })
        .catch(e => {
          // 请求失败的回调,隐藏下拉刷新和上拉加载的状态;
          mescroll.endErr()
        })
    }
  }
}
</script>

<style scoped>
.mescroll {
  position: fixed;
  top: 44px;
  bottom: 0;
  height: auto;
}
</style>

Chart.js

一套基于 HTML5 的简单、干净并且有吸引力的 JavaScript 图表库

npm install chart.js

基本用法

<canvas id="myChart" width="400" height="400"></canvas>

<script>
import Chart from 'chart.js/auto'

// 页面渲染完成后执行
const ctx = document.getElementById('myChart')
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
})
</script>

signature签名

vue 签名

https://l2j2c3.gitee.io/smooth-signature/demo/index.html

npm install smooth-signature
# 或
yarn add smooth-signature

randomColor 颜色随机生成脚本

npm install randomcolor

// 导入 randomColor 库
import randomColor from 'randomcolor';

// 生成20个随机颜色
var customColors = randomColor({
  count: 20,
  luminosity: 'bright',
  format: 'hex'
});
// 或者
var customColors = Array.from({ length: 20 }, () => randomColor())
console.log(customColors);

 method3 () {
     return "#"+(function(color){
     return new Array(7-color.length).join("0")+color;
     })((Math.random() * 0x1000000 | 0).toString(16));
 },

下拉框插件

1.select http://select2.github.io/

2.双 select http://loudev.com

3.selectbox http://aui.github.io/popupjs/doc/selectbox.html

文字工具插件

1.简繁体转换 https://github.com/BYVoid/OpenCC

2.拼音 https://github.com/hotoo/pinyin

图表插件

1.Highcharts https://www.hcharts.cn/

2.ECharts http://echarts.baidu.com/

3.Chart.js http://chartjs.org/

4.Paperjs http://paperjs.org/

5.D3.js https://d3js.org/

地图插件

1.高德地图 http://lbs.amap.com/api

2.jvectormap http://jvectormap.com/

验证类插件

1.validator https://niceue.com/validator/

弹出层插件

1.artDialog http://aui.github.io/artDialog/

2.layer http://layer.layui.com/

3.响应式用户交互组件库 http://bh-lay.github.io/UI/

数据处理插件

1.生成随机数据 http://mockjs.com/

Simplify折线简化库

Simplify.js 是由 Vladimir Agafonkin 编写的高性能 JavaScript 折线简化库，提取自Leaflet。

地址：https://github.com/mourner/simplify-js

焦点图插件

PC端

1.myfocus https://github.com/koen301/myfocus

2.SuperSlide | TouchSlide http://www.superslide2.com/

3.bxslide http://bxslider.com/

4.niceslider http://ajccom.github.io/niceslider/

5.Swiper http://www.swiper.com.cn/

6.Swiper http://idangero.us/swiper/#.WKJsSVN96M8

7.touchslider http://touchslider.com/

8.touchslider http://baijs.com/tinycircleslider/

移动端

1.Parallax.js http://hahnzhu.github.io/parallax.js/

2.Swiper http://www.swiper.com.cn/

3.iSlider http://be-fe.github.io/iSlider/

4.Slip.js http://binnng.github.io/slip.js/

5.fullpage https://github.com/peunzhang/fullpage

时间选择器

1.Date picka http://amsul.ca/pickadate.js/date/

2.Date Range Picker http://www.daterangepicker.com/

3.glDatePicker http://glad.github.io/glDatePicker/

4.Momentjs http://momentjs.com/

5.Kalendae https://github.com/ChiperSoft/Kalendae

6.Kalendae https://fullcalendar.io/

7.Mobiscroll https://demo.mobiscroll.com

取色插件

1.jquery-color https://github.com/jquery/jquery-color

剪切板插件

1.clipboardjs https://clipboardjs.com/

表格插件

1.FixedDataTable http://facebook.github.io/fixed-data-table/

2.handsontable https://handsontable.com/

3.DataTables https://www.datatables.net/

烟花效果插件

1.Proton http://a-jie.github.io/Proton/#example

编辑器插件

1.UEdiet http://ueditor.baidu.com/website/

天气预报插件(api)

心知天气 http://www.thinkpage.cn/

新浪天气 http://php.weather.sina.com.cn/xml.php?city=����&password=DJOYnieT8234jlsK&day=0

国家气象局提供的天气预报接口：

http://www.weather.com.cn/data/sk/101010100.html

http://www.weather.com.cn/data/cityinfo/101010100.html

2345天气插件 http://tianqi.2345.com/plugin/

文件图片上传

1.图片上传预览 http://www.dropzonejs.com/

2.WebUploader http://fex.baidu.com/webuploader/

Canvas 实用框架、工具

canvas 酷炫特效 + 小游戏 https://github.com/poetries/canvas

canvas-confetti 酷炫彩色纸屑动画效果 https://www.kirilv.com/canvas-confetti/https://github.com/catdad/canvas-confetti

lucky-canvas 抽奖插件 https://100px.net/https://github.com/buuing/lucky-canvas

Excalidraw 在线白板工具 https://excalidraw.com/https://github.com/excalidraw/excalidraw

fireworks-js 烟花特效 https://fireworks.js.org/https://github.com/crashmax-dev/fireworks-js

canvas-editor 富文本编辑器 基于 canvas/svg https://hufe.club/canvas-editor/https://github.com/Hufe921/canvas-editor

Luckysheet 类似 excel 在线表格 https://dream-num.github.io/LuckysheetDocs/https://github.com/dream-num/Luckysheet

x-spreadsheet 基于 Web(es6) canvas 构建的轻量级 Excel 开发库 https://myliang.github.io/x-spreadsheet/https://github.com/myliang/x-spreadsheet

QRCanvas 基于 canvas 的 JavaScript 二维码生成工具 https://gera2ld.github.io/qrcanvas/https://github.com/gera2ld/qrcanvas

Signature Pad 基于 Canvas 实现的签名库 http://szimek.github.io/signature_pad/https://github.com/szimek/

Rough.js 是一个轻量级的（大约 8k），基于 Canvas 的可以绘制出粗略的手绘风格的图形库。 https://roughjs.com/https://github.com/rough-stuff/rough

Fabric.js 基于 Canvas 的画布（海报） http://fabricjs.com/https://github.com/fabricjs/fabric.js

uCharts 是一款高性能的前端应用图表库，开发人员编写一套代码，可以在 Web、iOS、Android以及小程序中使用。 https://www.ucharts.cn/v2/#/https://gitee.com/uCharts/uCharts

SpriteJS 是一款由360奇舞团开源的跨终端 canvas 绘图框架，可以基于 canvas 快速绘制结构化 UI、动画和交互效果，并发布到任何拥有canvas环境的平台上（比如浏览器、小程序和node）。 http://spritejs.com/https://github.com/spritejs/spritejs

Paper.js是一款开源的矢量图形脚本框架，基于 HTML5 Canvas 开发，提供清晰的场景图、DOM和大量强大的功能用来创建各种向量图和贝塞尔曲线。 http://paperjs.org/http://github.com/paperjs/paper.js