10个常用的JS工具库,80%的项目都在用!

更新日期: 2022-01-17阅读: 705标签: 工具

高手区别于普通人的重要一点是,他们善于利用工具,把更多的时间留给了规划和思考。写代码也是同样的道理,工具用好了,你就有更多的时间来规划架构和攻克难点。今天就给大家分享一下当前最流行的 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>

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()
}


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>

import anime from 'animejs/lib/anime.es.js'

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


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>

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
      }
    }
  }
})

以上每一个工具库都是本人亲测,目前公司的项目也基本都在用。

来自:前端阿飞,https://juejin.cn/post/7048963605462515743


链接: https://www.fly63.com/article/detial/11029

常用的前端开发者的工具、库和资源

这篇文章简单的分享一套我认为有助于提升开发者工作流的工具集。这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。这个列表包含许多种类的资源,所以这里我将它们分组整理。

web前端程序员代码编辑器推荐

今天给大家分享前端程序员最爱用的代码编辑器,来看看你用哪款?包括:Visual Studio Code、Atom、HBuilder、Sublime Text、Dreamweaver、Brackets、Notepad++

JavaScript常用工具方法封装

Js常用工具方法封装:type 类型判断、Date、Array、String 字符串操作、Number、Http、DOM、Other 其它操作

Node.js 命令行工具的编写

日常开发中,编写 Node.js 命令行工具来完成一些小任务是很常见的操作。其编写也不难,和日常编写 Node.js 代码并无二致。package.json 中的 bin 字段

一百行js代码实现一个校验工具

做过校验需求的小伙伴们都知道,校验其实是个麻烦事。规则多,需要校验的字段多,都给我们前端带来巨大的工作量。一个不小心,代码里就出现了不少if else等不可维护的代码。因此,我觉得一个团队或者是一个项目

Licia 支持小程序的 JS 工具库

Licia 是一套在开发中实践积累起来的实用 JavaScript 工具库。该库目前拥有超过 300 个模块,同时支持浏览器、node 及小程序运行环境,提供了包括日期格式化、md5、颜色转换等实用模块,可以极大地提高开发效率。

程序员常用命令行工具

WordGrinder它是一款使用起来很简单,但拥有足够的编写和发布功能的文字编辑器。Proselint:它是一款全能的实时检查工具。GNU Aspell:

Web前端开发工程师常用的工具!

工欲善其身必先利器,作为前端行业的你,如果知道一些好用的软件工具可以帮助他们更好的工作。下面,就给大家分享Web前端开发工程师常用的工具。

用100行代码,完成自己的前端构建工具!

ES2017+,你不再需要纠结于复杂的构建工具技术选型。也不再需要gulp,grunt,yeoman,metalsmith,fis3。以上的这些构建工具,可以脑海中永远划掉。100行代码,你将透视构建工具的本质。

欺骗技术13款开源工具分享

一旦被那些受利益驱使或有政府背景的黑客团伙盯上,在这场不太公平的攻防博弈中,你会明显感到力不从心。他们有充足的时间,有娴熟的技术和丰富的资源,而且只要在无数次的尝试中成功一次就可以大获全胜

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!