JavaScript is one of our most important tools when it comes to front-end development. It provides us with rich functionality and interactivity that allows us to create amazing web applications. However, sometimes we may encounter some common problems, such as dealing with dates, implementing drag and drop functions, managing shortcut keys, and so on. Fortunately, there are some excellent JavaScript libraries in the developer community that can help us solve these problems and bring great convenience and efficiency improvement to our development work. In this article, I will share seven noteworthy JavaScript libraries that play an important role in front-end development. Whether you are a beginner or an experienced developer, these libraries are worth checking out. Let's take a look at their characteristics and usage!
1. Fuse
This is one of the JavaScript libraries with over 15.5k stars on GitHub. It is a powerful, lightweight fuzzy search library that does not depend on any other library. If you're not already familiar with fuzzy search (more formally known as approximate string matching), it's a technique for matching by finding strings that are approximately equal (rather than exact) to a given pattern.
One of the nice things about this library is that it's very lightweight and doesn't have any external dependencies. This means you can easily add it to your project without having to deal with additional complexity.
Here is a simple example code starter showing how to perform a fuzzy search in the Fuse library:
// 引入Fuse库
const Fuse = require('fuse.js');
// 假设我们有一个包含字符串的数据数组
const data = [
{ name: 'Apple' },
{ name: 'Banana' },
{ name: 'Orange' },
{ name: 'Peach' },
{ name: 'Grapes' },
];
// 创建Fuse实例，并指定要搜索的数据和搜索选项
const options = {
keys: ['name'], // 指定要搜索的键名
};
const fuse = new Fuse(data, options);
// 执行模糊搜索
const pattern = 'app'; // 搜索模式
const result = fuse.search(pattern);
// 输出搜索结果
console.log(result);In the above example, we first imported the Fuse library. Then, we created a data array containing strings. Next, we create a Fuse instance and specify the data to search and the search options. In this example, we set the key name to 'name', so the search will be in the 'name' property of the data. Finally, we performed a fuzzy search, set the mode to 'app', and output the search results.
This is just a simple entry case, you can perform more complex operations and customizations according to your own needs and data structures. You can check the documentation and sample code of the Fuse library to learn more about its functions and usage.
https://github.com/krisk/Fuse
2. Zdog
If you want to create simple and lightweight 3D graphics, then this resource is a good choice for you. This is a 3D JavaScript engine for <canvas> and SVG. With this library, you can design and render simple 3D models on the web. It's a pseudo 3D engine, its geometry exists in 3D space but is presented as a flat shape. It has over 9.5k stars on GitHub.
The following is a simple example code starter showing how to create a simple 3D shape using the Zdog library:
// 引入Zdog库
import Zdog from 'zdog';
// 创建一个画布
const canvas = document.querySelector('canvas');
// 创建一个Zdog.Illustration实例，指定画布和一些配置选项
const illustration = new Zdog.Illustration({
element: canvas,
zoom: 1, // 缩放级别
});
// 创建一个Zdog.Box实例，指定位置、尺寸和颜色
const box = new Zdog.Box({
addTo: illustration, // 添加到Illustration实例中
width: 80, // 宽度
height: 100, // 高度
depth: 50, // 深度
color: '#FF0000', // 颜色
stroke: 20, // 描边宽度
});
// 更新和渲染画布
function animate() {
illustration.rotate.y += 0.01; // 旋转角度
illustration.updateRenderGraph();
requestAnimationFrame(animate);
}
// 启动动画
animate();In the above example, we first imported the Zdog library. Then, we create a <canvas> element as the canvas. Next, we create a Zdog.Illustration instance, specifying the canvas and some configuration options. Then, we create a Zdog.Box instance, specifying the position, size and color. Finally, we use the animation loop function to update and render the canvas to achieve the rotation effect.
This is just a simple entry case, you can create more complex 3D shapes and animation effects according to your own needs and creativity. You can check the documentation and sample code of the Zdog library to learn more about its functions and usage.
https://github.com/metafizzy/zdog
3. Tippy
This is a complete tooltip, popover, dropdown and menu solution for the web. It provides logic and optional styling for elements that "pop" out of the document flow and float next to the target element. It has many features like compatibility with mouse, keyboard, and touch input, fine-tunable functionality, and fully customizable styling via CSS, support for TypeScript, and more. It has over 11k stars on GitHub.
The following is a simple example code starter showing how to create a tooltip with Tippy.js:
<!-- 引入Tippy.js的CSS和JavaScript文件 -->
<link rel="stylesheet" href="tippy.css" />
<script src="tippy.js"></script>
<!-- 创建一个触发工具提示的元素 -->
<button id="myButton">Hover me</button>
<script>
// 创建一个Tippy实例
tippy('#myButton', {
content: 'This is a tooltip', // 工具提示的内容
});
</script>In the example above, we first imported the Tippy.js CSS and JavaScript files. Then, we created a button element and gave it a unique ID. Next, we use JavaScript code to create a Tippy instance and bind it to the button element. We specified the content of the tooltip as "This is a tooltip" through the content option.
With this code, when the mouse hovers over the button, a tooltip will be displayed with the content "This is a tooltip".
This is just a simple entry case. You can create more complex tooltips, pop-up windows, drop-down menus and other elements according to your needs and creativity, and use the rich functions provided by Tippy.js for customization and control. You can check out the documentation and sample code of the Tippy.js library to learn more about its features and usage.
https://github.com/atomiks/tippyjs
4. Network
This library provides a modular vision programming framework. It allows you to create node-based editors directly in the browser. You can define nodes and workers (workers), enabling users to create instructions for processing data in your editor without writing any code. It has over 8.5k stars on GitHub.
The following is a simple code entry example showing how to use Rete.js to create a node editor:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rete.js Example</title>
<style>
/* 编辑器容器的样式 */
#node-editor {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<!-- 编辑器容器 -->
<div id="node-editor"></div>
<!-- 引入Rete.js的JavaScript文件 -->
<script src="rete.js"></script>
<script>
// 创建一个编辑器实例
const container = document.getElementById('node-editor');
const editor = new Rete.NodeEditor('[email protected]');
// 注册一个节点
const numComponent = new Rete.Component('Number');
numComponent.data.component = {
template: '<input type="number" :value="data.value" @input="change($event)"/>',
props: ['data'],
methods: {
change(e) {
this.$emit('change', parseFloat(e.target.value));
}
}
};
numComponent.outputs = [['num', 'Number']];
// 将节点添加到编辑器
editor.register(numComponent);
// 渲染编辑器
editor.on('process nodecreated noderemoved connectioncreated connectionremoved', async () => {
await editor.trigger('process');
});
editor.view.resize();
editor.trigger('process');
</script>
</body>
</html>In the above example, we first introduced the JavaScript file of Rete.js and created an editor container. Then, we created an editor instance and registered a node called "Number" via Rete.Component. This node is used to input numeric values and output data of type "num". Next, we add the node to the editor and set up the editor's related rendering and processing logic.
Through this code, you can see a simple node editor in the browser, you can add and connect nodes, and implement custom data processing logic.
This is just a simple entry case, you can create more complex nodes and logic according to your own needs and ideas, and use the rich functions provided by Rete.js for customization and control. You can check out the documentation and sample code of the Rete.js library to learn more about its features and usage.
https://github.com/retejs/rete
5. Hotkeys
If you need to handle keyboard input, then this resource is a good choice for you. This is an input capture library with some very special features. It's easy to pick up and use, has a small footprint (~3kb, minified: 1.73kb), and doesn't have any dependencies. It does not interfere with the proper functioning of any JavaScript library or framework. It has over 5.5k stars on GitHub.
Hotkeys.js provides a simple and powerful way to capture and process keyboard input. It has some special features that help you define and register custom shortcut keys in your application. This enables the user to trigger a corresponding operation or function by pressing a specific key combination, thereby improving user experience and operating efficiency.
The following is a simple code entry case, showing how to use Hotkeys.js to register and handle shortcut keys:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hotkeys.js Example</title>
</head>
<body>
<script src="hotkeys.js"></script>
<script>
// 注册一个快捷键
hotkeys('ctrl+a', function(event, handler) {
alert('You pressed Ctrl+A!');
});
// 注册多个快捷键
hotkeys(['ctrl+b', 'meta+b'], function(event, handler) {
alert('You pressed Ctrl+B or Meta+B!');
});
</script>
</body>
</html>In the above example, we first imported the JavaScript file of Hotkeys.js. Then, we use the hotkeys function to register two shortcut keys, namely Ctrl+A and Ctrl+B (or Meta+B). When the user presses the corresponding key combination, a corresponding prompt box will pop up.
Through this code, you can define and respond to various shortcut keys in the application to provide a more convenient operation mode.
https://github.com/jaywcjlove/hotkeys-js
6. Split
If you want to create a resizable split layout then this is a great resource. It lets you easily create resizable panels and split views. It packs a lot of features like zero dependencies, only 2KB minified, no overhead or mounts on window event listeners, uses pure CSS for resizing, and more.
The following is a simple code example that shows how to use the Split library to create a resizable split layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Split.js Example</title>
<style>
/* 分割面板容器的样式 */
#split-container {
height: 300px;
}
/* 分割面板的样式 */
.split {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 分割面板容器 -->
<div id="split-container">
<div class="split" data-split="vertical">
<div>Panel 1</div>
<div>Panel 2</div>
</div>
</div>
<!-- 引入Split.js的JavaScript文件 -->
<script src="split.js"></script>
<script>
// 创建一个分割实例
const container = document.getElementById('split-container');
const split = Split(['#split-container .split'], {
sizes: [50, 50], // 设置初始面板大小百分比
minSize: 100, // 设置最小面板大小
});
</script>
</body>
</html>In the example above, we first imported the Split.js JavaScript file. We then created a split panel container and defined two panels inside it. We specify the orientation of the panels (horizontal or vertical) using the data-split attribute. Next, we created a split instance using the Split function, specifying the initial panel size percentage and minimum panel size.
With this code, you can see a resizable split layout in the browser, where the panels can be resized by dragging their borders.
This is just a simple starter example, you can create more complex split layouts according to your own needs and ideas, and use the rich functions provided by the Split library for customization and control. You can check out the documentation and sample code of the Split library to learn more about its features and usage.
https://github.com/nathancahill/split
7. Pikaday
This is a lightweight and customizable date picker library. It provides a user-friendly interface for selecting dates and supports multiple date formats and localizations. It has over 7.5k stars on GitHub.
The following is a simple code example that shows how to create a date picker using the Pikaday library:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pikaday Example</title>
<link rel="stylesheet" type="text/css" href="pikaday.css">
</head>
<body>
<!-- 日期选择器容器 -->
<input type="text" id="datepicker">
<!-- 引入Pikaday的JavaScript文件 -->
<script src="pikaday.js"></script>
<script>
// 创建一个Pikaday实例
var picker = new Pikaday({
field: document.getElementById('datepicker'), // 指定日期选择器的输入字段
format: 'YYYY-MM-DD', // 指定日期格式
onSelect: function(date) {
console.log('Selected date: ' + date);
}
});
</script>
</body>
</html>In the example above, we first imported Pikaday's CSS and JavaScript files. Then, we create a date picker container and associate the date picker by specifying the ID of the <input> field. Next, we use JavaScript code to create a Pikaday instance, and set the date format to 'YYYY-MM-DD' through configuration options, and specify a callback function that is triggered when a date is selected.
With this code, you can see a simple date picker in the browser, when a date is selected, it will print the selected date to the console.
Finish
When using these 7 JavaScript libraries, you can greatly improve your front-end development efficiency and functionality. From optimizing the user interface and adding interactivity to handling date selection, graphics rendering, and shortcut key entry, these libraries provide a wealth of functionality and flexibility.
These libraries are ideal whether you are a beginner or an experienced developer. They are easy to use, customizable, and supported and endorsed by a broad developer community.
By mastering the use of these libraries, you can build great web applications more efficiently and provide users with a great user experience. Continuously learning and exploring the features and usage of these libraries will help you make continuous progress on the road of front-end development.
I hope this post has provided you with useful information about these libraries and encourages readers to delve further and explore the potential of these tools. Wishing you more success in your front-end development journey!
Due to the limited space of the article, today’s content will be shared here. At the end of the article, I would like to remind you that the creation of articles is not easy. If you like my sharing, please don’t forget to like and forward it, so that more people in need See. At the same time, if you want to gain more knowledge of front-end technology, welcome to follow me, your support will be the biggest motivation for me to share. I will continue to output more content, so stay tuned.