文章掌握JavaScript工具函数，提升你的代码库！

（值得收藏）JavaScript工具函数大全

今天，我们将深入探讨JavaScript中的一系列实用工具函数，这些函数可以帮助你简化开发工作流程并提高代码质量。让我们深入了解每个函数并学习如何使用它们。

1. 为元素添加on方法

HTMLElement.prototype.on = function(event, callback) {
  this.addEventListener(event, callback);
};

此函数允许你以简洁的方式为元素添加事件侦听器。只需调用 on() 方法并指定事件名称和回调函数。

2. 为元素添加trigger方法

HTMLElement.prototype.trigger = function(event) {
  var evt = document.createEvent('Event');
  evt.initEvent(event, true, true);
  this.dispatchEvent(evt);
};

此函数让你可以触发元素上的自定义事件。你可以指定事件名称并手动触发事件。

3. 转义HTML标签

function escapeHtml(html) {
  return html.replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&apos;');
}

此函数将HTML标签转换为其转义字符。这对于防止XSS攻击至关重要。

4. HTML标签转义

function unescapeHtml(html) {
  return html.replace(/&/g, '&')
            .replace(/&lt;/g, '<')
            .replace(/&gt;/g, '>')
            .replace(/&quot;/g, '"')
            .replace(/&apos;/g, "'");
}

此函数将转义的HTML字符转换为其原始形式。

5. 跨浏览器绑定事件

function addEvent(element, event, callback) {
  if (element.addEventListener) {
    element.addEventListener(event, callback, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + event, callback);
  }
}

此函数以跨浏览器的兼容方式为元素绑定事件。

6. 加入收藏夹

function addToFavorites(url, title) {
  if (window.sidebar) {
    window.sidebar.addPanel(title, url, "");
  } else if (window.external) {
    window.external.AddFavorite(url, title);
  }
}

此函数将指定的URL和标题添加到浏览器的收藏夹。

7. 提取页面代码中所有网址

function getAllUrls(html) {
  var urls = [];
  var matches = html.match(/href="([^"]+)"/g);
  if (matches) {
    for (var i = 0; i < matches.length; i++) {
      urls.push(matches[i].slice(6, -1));
    }
  }
  return urls;
}

此函数从给定的HTML代码中提取所有URL。

8. 动态加载脚本文件

function loadScript(url, callback) {
  var script = document.createElement('script');
  script.src = url;
  script.onload = callback;
  document.head.appendChild(script);
}

此函数异步加载外部脚本文件。

9. 返回顶部的通用方法

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

此函数以平滑动画的方式将页面滚动到顶部。

10. 实现base64解码

function base64Decode(str) {
  return atob(str);
}

此函数对给定的base64编码字符串进行解码。

11. 确认是否是键盘有效输入

function isKeyboardEvent(e) {
  return e.key !== undefined || e.keyIdentifier !== undefined;
}

此函数检查给定的事件是否为键盘输入事件。

结论

这些JavaScript工具函数是开发人员工具箱中必不可少的工具。通过利用这些函数，你可以简化代码，提高效率，并创建更健壮的应用程序。将这些函数添加到你的项目中，以提升你的开发体验。