最全的JavaScript库大合集

开课吧开课吧锤锤2021-06-17 14:01

    与之前相比,现代前端开发有了很大的进步,过去为兼容IE、Firefox等浏览器环境而焦头烂额,尽可能地减少代码加速文件的负载,尽可能地编写原生JavaScript,可以不需要使用插件(插件在通用性问题上,会增加许多兼容代码)。

web

    所有这些改变首先应该让谷歌浏览器拥有开放源码的核心,让360浏览器能够为中国用户提供更好的高级浏览器,让网络加速政策成为现实。

    伴随着5G技术的发展,前端将会承担起更多的应用场景。

    你可以ctrl+f在列表中搜索,搜索任何你需要的库或包类型。我将尽力在说明中为每个库包括某种通用类别。

    1、Chalk

    Chalk是一个终端样式库。它可以用来风格化你在终端中所做的所有事情,例如,记录和显示错误。Chalk函数可以被链接,Chalk还支持带标签的模板文字语法。

    示例如下:

log(chalk.blue('Hello') + ' World' + chalk.red('!'));

console.log(chalk`
    There are {bold 5280 feet} in a mile.
    In {bold ${miles} miles}, there are {green.bold ${calculateFeet(miles)} feet}.
`);

    2、Micro

    Micro是Vercel构建的小型微服务框架,提供创建微服务所需的所有基本功能。它具有异步HTTP微服务所需的一切,并支持异步/等待。

module.exports = (req, res) => {
  res.end('Hello, World!')
}

    3、NanoID

    创建不仅仅是自动递增的ID可能会很麻烦。ShortID可以帮助你。但由于已弃用,因此,我们将使用NanoID。它创建一个小于UUID且仍然安全的字母数字ID。该库本身可以最小化并压缩为仅108个字节(!)。那真是太小了。

import { nanoid } from 'nanoid'

model.id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"

    4、jQuery

    OG实用程序库之一。当不使用React之类的库时,jQuery是一个易于使用的DOM操作的著名且广泛使用的库。它仍然可以使用,并且在NPM中可用。

let elem = $( "#banner" );
$( "#button button" ).on( "click", function( e ) {
  elem.show();
});

    5、Nodemon

    在开发Node应用程序时,Nodemon不会错过。Nodemon使开发Node网站更加容易。当它检测到文件中的更改时,它将自动重新启动服务器。这省去了必须重新启动服务器的麻烦。

    6、Pug

    Pug,以前称为Jade,是一种可与Express等框架一起使用的模板语言。它是从YAML语法派生的,并具有诸如mixins和条件语句之类的功能。

div.container
  div.header
    button#home.btn-primary Click me!
    p This is a sample from Pug

    7、Dotenv

    使用任何类型的API时,环境变量都非常重要。Dotenv使你可以轻松安全地存储可在代码中使用的环境变量。

DB_HOST=localhost
DB_USER=root
DB_PASS=passw0rd

    8、Mongoose

    Mongoose是用于MongoDB数据库的对象建模库。如果你正在查找有关MongoDB和JavaScript的教程,则很可能会以一种或另一种方式偶然进入该库。

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/db-url', {useNewUrlParser: true, useUnifiedTopology: true});

const Cat = mongoose.model('Cat', { name: String });

const kitty = new Cat({ name: 'Taco' });

kitty.save().then(() => console.log('Cat added'));

    9、Express

    Express是一个Node服务器框架,提供创建良好服务器所需的功能。由于其是极简主义的性质,它有一个庞大的社区,可以为你可以使用的各种任务创建库,并且可以从此列表中列出很多。

onst express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello, World!')
})

app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}`)
})

    10、Bootstrap

    每个人都知道Bootstrap。Bootstrap是一个前端UI样式框架,用于创建具有简单样式和良好外观的自适应网站优势。许多网站都使用Bootstrap,一些网站将其与另一个主题一起使用,而另一些网站则将其用于一些组件。它还具有一些JavaScript组件,可以轻松创建一个不错的站点。

<form>
  <div class="form-group">
    <label for="exampleInputEmail">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck">
    <label class="form-check-label" for="exampleCheck">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

    11、GraphQL

    GraphQL是HTTP请求的查询语言。它希望添加RESTAPI的基本功能,但要增加查询语言可能添加的灵活性。它由Facebook开发,默认情况下随GatsbyJS一起提供,用于检索数据。

graphql`{
  person {
    name
  }
}`

// Returns:
{
  "person": {
    "name": "John Doe"
  }
}

    12、Morgan

    Morgan以我们在电视上最喜欢的“杀手”而得名,是一种常用在Express或类似Node服务器上的日志记录中间件。它可以记录你想要的任何内容。这在调试生产服务器时可能很有用。

let morgan = require('morgan')

// setup the logger
app.use(morgan('combined', { stream: accessLogStream }))

    13、Sequelize

    Sequelize是用于关系数据库(例如PostgreSQL,SQLite和MariaDB)的基于承诺的ORM。它是众所周知的,因此,许多教程都使用此库。

// Create a new user
const jane = await User.create({ firstName: "Jane", lastName: "Doe" });

// Find all users
const users = await User.findAll();
console.log(users.every(user => user instanceof User)); // true

    14、Passport

    Passport是使用最广泛的身份验证库之一。它是一种身份验证中间件,已在Node应用程序中广泛使用。它支持各种身份验证,例如OAuth和社交登录。

app.post('/ login',passport.authenticate('local',{ 
  successRedirect:“ /”,
  failureRedirect:'/ login' 
}));

    15、Preact

    Preact是最小的React克隆,可提供较小的文件大小和更快的速度。它的语法非常相似,如果你知道React,就会知道Preact。Preact的大小只有3kb,因此对于大小很重要的地方非常有用。和React一样,它是一个前端和DOM操作库。

function Counter() {
  const [value, setValue] = useState(0);

  return (
    <>
      <div>Counter: {value}</div>
      <button onClick={() => setValue(value + 1)}>Increment</button>
      <button onClick={() => setValue(value - 1)}>Decrement</button>
    </>
  )
}

    16、Lodash

    Lodash是一个非常流行的实用程序库。它提供了用于数组,字符串和数字操作的功能,因此,你不必自己编写它们。该库在几乎所有项目中都可能有用。

_.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });
// → { 'a': 1, 'b': 2 }

_.partition([1, 2, 3, 4], n => n % 2);
// → [[1, 3], [2, 4]]

    17、TailwindCSS

    我一直以来最喜欢的一个库。TailwindCSS是用于前端开发的样式库。它提供了大量的实用程序类,你可以使用它们来代替CSS。它提供的功能可以在开发过程中利用所有类的灵活性来最小化用于生产的文件大小。

<ul class="space-y-4">
  <li>
    <div class="w-64 p-4 bg-green-500">Some Text</div>
  </li>
</ul>

    18、Axios

    Axios是一个著名的基于异步承诺的HTTP请求库。它易于学习,易于使用,可以设置任何你不想发送的内容。我目前还没有发现比这个库更好使用的库。

axios.get('/profile?id=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })

    19、Adonis

    像Express一样,Adonis是Node服务器框架。不过,它更侧重于微服务方面。它具有你需要的一切,并且具有包含文档和示例的强大站点。

const Helpers = use('Helpers')

Route.get('download/:fileId', async ({ params, response }) => {
  const file = await Files.findorFail(params.fileId)
  response.download(Helpers.tmpPath('uploads/${file.path}'))
})

    20、Realm

    创建数据库并与ORM连接可能很烦人。Realm与数据库工具Mongoose相似,但是它也提供数据库。它是基于对象的数据库或NoSQL数据库。我在手机上将它与ReactNative结合使用,效果很好。

const studentSchema = {
  name: "Student",
  properties: {
    name: "string",
    grades: "int[]"
  }
}

    21、GatsbyJS

    GatsbyJS是遵循JamStack的框架。它是静态站点生成器,对于创建营销和博客页面非常有用。编译后,它提供了超快的速度。它是基于React的,并且具有GraphQL以便从开箱即用的文件中检索数据。

import React from "react"
export default function Home() {
  return (
    <div style={{ color: `purple` }}>
      <h1>Hello Gatsby!</h1>
      <p>What a world.</p>
    </div>
  );
}

    22、Luxon

    日期和时间是一些最讨厌的对象。这就是为什么你应该使用Moment或Luxon的原因。

dt.toISOWeekDate();
dt.toMillis();
dt.toLocaleString({ month: 'long', day: 'numeric' });

    23、Faker

    无论何时创建原型,都需要伪造的数据。Faker提供了虚假数据。从名字和姓氏到伪造的比特币地址和电子邮件地址。它易于学习且易于使用。

let randomName = faker.name.findName(); // Caitlyn Kerluke
let randomEmail = faker.internet.email(); // Rusty@arne.info

    24、ESLint

    编写漂亮的代码很难。我们都使用制表符或空格,两个或四个,有些在括号和方括号之间添加空格,有些则没有。为了使代码更加统一,可以使用ESLint。

    25、Marked

    我们所有人可能都知道Markdown很棒。无需使用鼠标即可快速创建富文本格式。已标记可帮助我们解析此文本并输出实际呈现它所需的HTML。

    26、Pluralize

    如果你曾经使用动态数据,则可能需要正确地进行多元化处理。具有相同名称的库提供了该功能。他们甚至允许自定义复数规则。

pluralize('test') //=> "tests"
pluralize('test', 0) //=> "tests"
pluralize('test', 1) //=> "test"
pluralize('test', 5) //=> "tests"

pluralize.plural('regex') //=> "regexes"
pluralize.addPluralRule(/gex$/i, 'gexii')
pluralize.plural('regex') //=> "regexii"

    27、Concurrently

    允许并发运行任务,实际上可以同时运行任务,具体取决于你的系统。具体来说,它允许你同时运行多个NPM任务,例如捆绑或编译CSS文件。

    28、Svelte

    在React,Vue和其他模板框架中,还有Svelte。Svelte允许开发人员创建组件并在你的网页中使用它们。

<script>
  import Nested from './Nested.svelte';
</script>

<style>
  p {
    color: purple;
    font-family: 'Comic Sans MS', cursive;
    font-size: 2em;
  }
</style>

<p>These styles...</p>
<Nested/>

    29、Mustache

    Mustache是一种无逻辑的模板语言,适用于需要最少动态内容的Express应用程序。

Hello {{name}}
You have just won {{value}} dollars!

{{#in_ca}}
  Well, {{taxed_value}} dollars, after taxes.
{{/in_ca}}

    30、UUID

    如果你对NanoID不满意,或者需要实际的UUID或GUID,则UUID适合你。它使用最少的代码创建有效的UUID。这些可以在某些数据库中使用,并且比自动增量ID更安全。

import { v4 as uuidv4 } from 'uuid';

uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

    31、HTML缩小器

    最终的库是一个缩小器。HTML-minifier使网页需要加载的代码量最小化,并且可以大大提高加载速度,从而带来更好的用户体验。你可以为某些最小化的样式或规则添加选项,以便该库可以适合每个项目。

    以上就是小编为大家整理的“最全的JavaScript库大合集”一文,更多Web教程尽在开课吧广场Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享