JavaScript,一种脚本语言,广泛用于网页动态效果、用户交互、移动app及桌面应用程序等领域。在使用JavaScript编写大型应用程序的时候,我们经常需要编写一些帮助类,简称工具类。
JavaScript工具类主要包括以下几个方面:
实用工具类: 实用工具类是常用的工具类,如日期处理,字符串处理等。下面是一个字符串处理类: class StringUtils { /** * 获取字符串的字节数 * @param str {string} 要计算字节数的字符串 * @return {number} 字节数 */ static getBytes(str) { let bytes = 0; for (let i = 0, len = str.length; i< len; i++) { let c = str.charCodeAt(i); bytes += c< 128 ? 1 : (c< 2048 ? 2 : 3); } return bytes; } } console.log(StringUtils.getBytes("我是一个字符串")); // 输出 26
其次是与Dom交互的工具类:这部分主要包含一些对Dom元素进行操作的工具类,如操作节点,属性等。比如我们有这样一个工具类:
class DomUtils { /** * 查找class中是否包含某个className * @param ele {HTMLElement} 目标元素 * @param className {string} 要查找的class名称 * @return {boolean} 是否包含 */ static hasClass(ele, className) { if (ele.className == "") return false; let classNames = ele.className.split(" "); return classNames.indexOf(className) != -1; } }
此外还有一些构造类的工具类:这部分工具类会根据一些特定的规则来构造特定的对象。例如,一个工具类可以返回一个随机字符串,如下:
class StringUtils { /** * 生成随机字符串 * @param length {number} 字符串长度 * @return {string} 随机字符串 */ static randomString(length) { let alphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; let result = ''; for (let i = 0; i< length; i++) { let index = Math.floor(Math.random() * alphabet.length); result += alphabet[index]; } return result; } } console.log(StringUtils.randomString(10)); // 输出一个10位的随机字符串
最后,还有一些辅助类:这部分工具类没有明确的功能,是一些通用方法的封装。例如,下面这个工具类可以用于判断浏览器兼容性:
class BrowserUtils { /** * 判断浏览器是否支持某个CSS属性 * @param prop {string} 属性名称 * @return {boolean} 是否支持 */ static isPropertySupported(prop) { return prop in document.body.style; } } console.log(BrowserUtils.isPropertySupported('background-color')); // 输出 true 或 false
以上是JavaScript的工具类的主要几个方面,当然工具类的种类还有很多。我们可以根据自己的需求定制工具类,并且可以通过npm、yarn等包工具将工具类分享给其他人使用。