javascript - 轮子已经够多了，不要再造啦 - 前端工具库大全 - 个人文章

大家好，我是斌少。

前端开发中，我们会经常遇到一个较为棘手的功能，比如复杂动画、轮播、各种工具函数等，如果每个都要自己去封装，不仅多余、不便于复用，还会让我们需求完成的时间遥遥无期。

好在，业界已经有了非常多已经封装好了的工具库，遵循能用的轮子就不要重复造的原则，我们一起来看看吧！

动画库

Animate.css(推荐)

一个纯粹的CSS动画库，它提供了一系列预定义的CSS类，可以轻松地将动画效果应用到HTML元素上，而无需编写JavaScript代码。

Github Star: 78.8k
适用于简单的动画效果场景
Vue版本：v-animate-css
React版本：react-animated-css

Anime.js

是一个基于JavaScript的动画库，它允许您以编程方式创建复杂的动画效果，包括颜色变化、路径动画、缓动函数、循环和更多。

Github Star: 47.3k
适用于更高级、自定义的动画效果，或者需要与用户交互的场景
Vue版本：vue-animejs
React版本：react-anime

时间日期处理

Moment

用于解析、验证、操作和格式化日期的 JavaScript 日期库.应该属于前端使用最广的日期处理库了。

Github Star: 47.5k
包含许多本地化数据，例如本地化语言、时区，导致包体积较大
Vue版本：vue-moment
React版本：react-moment

Day.js（推荐）

一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库，和 Moment.js 的 API 设计保持完全一样。如果你曾经用过 Moment.js ，那么你已经知道如何使用 Day.js 。大有赶超day.js的趋势。

Github Star: 44.5k
更加轻量，性能更好，包体积更小
Vue版本：vue-moment
React版本：react-dayjs

函数库

Underscorejs

是一个一致性、模块化、高性能的JavaScript 实用工具库。通俗来说，就是类似于Java中的Hutool、common-lang等一样对Javascript的相关函数做进一步封装，降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单.

Github Star: 27.1k
功能相对较少，适用于小型项目或对功能需求不高的场景

Lodash（推荐）

作为underscore的后继者，对 Underscore 现有 API 功能使用上进行扩充外，在性能上也更为出彩，已成为日常项目开发的标配

Github Star: 57.8k
适用于需要更广泛的功能和性能优化的场景

Ramda

一个只针对函数式范式的库，强调纯函数风格，不变性和无副作用是它的设计核心，这能让你通过简单的优雅的代码来完成工作。如果你喜欢函数式编程风格，你会更喜欢它。

Github Star: 23.3k
适用于强调函数式编程和不可变性的场景，但是理解比较麻烦，有一定学习成本

风格示例

import { compose, head, sort, descend, prop } from "ramda";
 
const teams = [
  {name: 'A', score: 5},
  {name: 'B', score: 4},
  {name: 'C', score: 6},
  {name: 'D', score: 2},
 ];
 
const sortByScoreDesc = sort(descend(prop("score")));

模版引擎

pug

一个用JavaScript 实现的高性能的模板引擎，支持Node.js 和浏览器运行环境

Github Star: 21.4k
通常用于服务器端渲染 (SSR) 和 Node.js 环境中

风格示例

doctype html
html(lang="en")
head
  title= pageTitle
  script(type='text/javascript').
    if (foo) bar(1 + 5);
body
  h1 Pug - node template engine
  #container.col
    if youAreUsingPug
      p You are amazing
    else
      p Get on it!

handlebars.js

JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译，这样可以保证模板加载和运行的速度。

Github Star: 17.4k
可以在浏览器端和服务器端都使用，因此适用于各种场景，包括单页面应用和多页面应用

风格示例：使用双花括号 {{}} 作为占位符

var source = "<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " +
           "{{kids.length}} kids:</p>" +
           "<ul>{{#kids}}<li>{{name}} is {{age}}</li>{{/kids}}</ul>";
var template = Handlebars.compile(source);