简介
essential.js 是一个前端常用工具库，其所包含的功能涉及到了前端开发的方方面面（如：DOM 操作、事件处理、Ajax、字符串处理、数据类型判断及转换等）。
使用 essential.js 可以极大地提高开发效率，同时也使得代码变得更加简洁易读。
安装
在使用 essential.js 之前，需要先进行安装。
安装方法有两种：
使用 npm 安装
npm install essential-js
直接引用
在 HTML 中直接引用相应的 JavaScript 文件即可。
<script src="path/to/essential.js"></script>
基础用法
essential.js 的 API 非常简单且易用，下面介绍一些常用的 API。
DOM 操作
选择器
$.id(id:str)：选择指定 ID 的元素，返回一个 HTML 元素对象。$.q(selector:str)：选择符合指定 CSS 选择器的第一个元素，返回一个 HTML 元素对象。$.all(selector:str)：选择符合指定 CSS 选择器的所有元素，返回一个数组。
类名
$.addClass(el:HTMLElement, className:str)：给元素添加指定类名。$.removeClass(el:HTMLElement, className:str)：从元素删除指定类名。$.toggleClass(el:HTMLElement, className:str)：如果元素有指定的类名，则移除该类名，否则添加该类名。
属性
$.attr(el:HTMLElement, name:str [, value:str])：获取或设置元素的属性。
事件处理
$.on(el:HTMLElement, type:str, handler:Function [, useCapture:bool])：给元素绑定事件。$.off(el:HTMLElement, type:str, handler:Function)：从元素删除事件绑定。
Ajax
$.ajax(url:str [, options: Object])：这是一个异步 HTTP（Ajax）请求的实现。
字符串处理
$.camelCase(str:str)：将短横线分隔的字符串转换为骆驼式字符串。$.capitalize(str:str)：将字符串的首字母大写。$.trim(text:str)：去掉字符串两端空格。
数据类型判断及转换
$.isType(val:*, type:str)：判断数据类型。$.isArray(val:*)：判断是否为数组。$.isObject(val:*)：判断是否为对象。$.isNumber(val:*)：判断是否为数字。$.isString(val:*)：判断是否为字符串。$.isBoolean(val:*)：判断是否为布尔值。$.isUndefined(val:*)：判断是否为 undefined。$.isNull(val:*)：判断是否为 null。$.isNumeric(str:str)：判断字符串是否为数字。$.toInt(str:str [, radix:int])：将字符串转换为整数。
示例代码
下面是一些常见使用场景的示例代码。
DOM 操作
添加类名
var el = document.querySelector('.my-element');
$.addClass(el, 'active');删除类名
var el = document.querySelector('.my-element');
$.removeClass(el, 'active');切换类名
var el = document.querySelector('.my-element');
$.toggleClass(el, 'active');获取元素属性
var el = document.querySelector('.my-element');
var src = $.attr(el, 'src');设置元素属性
var el = document.querySelector('.my-element');
$.attr(el, 'src', 'new-src.jpg');事件处理
绑定事件
var el = document.querySelector('.my-element');
$.on(el, 'click', function() {
console.log('Element clicked.');
});解绑事件
var el = document.querySelector('.my-element');
var handler = function() {
console.log('Element clicked.');
};
$.on(el, 'click', handler);
// ... 一些代码后删除绑定
$.off(el, 'click', handler);Ajax
-- -------------------- ---- -------
------------------------------------------ -
------- ------
-------- -------------- -
----------------- ------- --------------
--
------ ---------- -
----------------- ------- ----------
-
---##总结
通过本文，你已经了解了 essential.js 的基本用法，并学会了如何在自己的项目中使用它。
使用 essential.js 可以让你的代码变得更加简明扼要，同时也可以大幅提升你的开发效率。
在实际开发中，建议根据项目需要选择合适的 API 进行使用，以达到最佳的开发效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005515881e8991b448ce731