在前端开发过程中，我们经常需要在项目中使用到一些第三方库或工具包。而 npm（Node Package Manager）是当前前端项目最常用的包管理工具之一。在 npm 的仓库中，有很多优秀的开源包可供我们使用，这些包能够极大地提高我们的前端开发效率。本篇文章将介绍一个常用的 npm 包：univeil。
univeil 是什么？
univeil 是一个轻量级的 JavaScript 库，它提供了一些工具函数，能够帮助我们完成页面中一些常用的 DOM 操作。与其他相似的库相比，univeil 更加轻便、易用。它只有 1KB 左右的大小，不依赖于任何其他库，可以在现代浏览器和 IE8+ 中运行。
安装 univeil
我们可以通过 npm 来安装 univeil：
npm install univeil --save
然后，在项目中使用如下语句引入 univeil：
import univeil from 'univeil';
或者直接在 HTML 文件中使用 script 标签引入：
<script src="./node_modules/univeil/dist/univeil.min.js"></script>
使用 univeil
univeil 提供了很多常用的操作函数，下面我们就来介绍一些常见的使用场景。
获取 DOM 元素
通过 univeil 的 $() 函数可以轻松获取元素：
const elem = univeil.$('.class-name');添加/移除 CSS 类
可以使用 addClass 和 removeClass 方法来添加或移除元素的 CSS 类：
univeil.addClass(elem, 'new-class'); univeil.removeClass(elem, 'old-class');
获取/设置元素属性
通过 attr 函数可以获取或设置元素属性：
const value = univeil.attr(elem, 'name'); univeil.attr(elem, 'title', 'new title');
遍历 DOM
使用 each 函数可以遍历元素列表：
univeil.each('.class-name', function (elem, index) {
// ...
});操作事件
使用 on 函数可以注册事件和处理函数：
univeil.on(elem, 'click', function (event) {
// ...
});使用 off 函数可以取消事件：
univeil.off(elem, 'click');
操作样式
使用 css 函数可以获取或设置元素样式：
const value = univeil.css(elem, 'height');
univeil.css(elem, { height: '200px', width: '100px' });进阶应用
univeil 的使用非常简洁、直观，与 jQuery 等相比，它不同的地方在于，它并没有集成 AJAX 请求、动画、表单等其他功能。所以，我们可以将它与其他库一起使用，或根据自己的需要进行二次封装。
下面是一个通过 univeil 和 axios 结合实现 AJAX 请求的示例：
-- -------------------- ---- -------
------------------ -------- -------- ------- -
----------------------
-------------- ---------- -
---------------------------
--
--------------- ------- -
-------------------
---
---需要注意的是，axios 是一个需要引入的库，这里我们忽略了它的引入代码。
结语
通过本篇文章，我们了解了一下 npm 包 univeil 的使用方法以及进阶应用，希望对你们有所帮助。univeil 的设计简单而又实用，对初学者来说，是一个很好的学习工具，同时它也可以与其他库很好地协作。在实际的项目开发中，我们可以根据需要选择最适合自己的工具包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66664