日常 JavaScript 开发中 9 个实用代码片段 || 第一部分

大家好！

欢迎阅读这篇 JavaScript 代码片段文章，在这篇文章中，我们将介绍一些最常见的 JavaScript 代码片段，它们将帮助您进行日常 JavaScript 开发。

您可以随时使用第三方实用程序库，但了解这些原始 JavaScript 代码片段总是有益的。

这些代码片段非常简单和小巧，因此您应该始终选择它们而不是第三方实用程序库。

本系列分为两部分，这篇文章是第一部分。

第二篇文章的链接：本文的第二部分

现在，让我们开始吧。

1. HTTPS重定向

将HTTP协议重定向到HTTPS协议。

const httpsRedirect = () => {
  if (location.protocol !== 'https:')
    location.replace('https://' + location.href.split('//')[1]);
};

httpsRedirect();
// Redirect from http://mydomain.com to https://mydomain.com

首先我们找出协议window.location.protocol。
然后，如果协议是HTTP，我们将 URL 替换为HTTPS协议。
然后重新加载页面。

注意：通过浏览器的后退按钮返回不会转到 http，因为它在历史记录中被替换了。

2. 输入数字值

您是否曾经想过输入值是数字而不是字符串？默认情况下，我们总是从 JS 获取字符串形式的输入值。然后我们将其转换为数字。

数字类型的用途是，移动浏览器使用它来显示正确的键盘，某些浏览器使用它来进行验证。例如，电子邮件类型将显示带有 @ 和“.”的键盘，而数字类型将显示数字键盘。

但是，有更好的方法可以将输入值作为数字获取。

const numInput = document.getElementById('num-input');

let num;
// Bad: parseFloat() converts the string to a number
num = parseFloat(numInput.value);

// Good: returns a numeric value
num = numInput.valueAsNumber;

HTMLInputElement.valueAsNumber从输入值中返回一个数值或 NaN。

3. 处理外部点击

如果您想在用户点击指定元素之外时执行某些操作，那么此代码片段将会节省您的时间。

const onClickOutside = (elementId, callback) => {
  const element = document.getElementById(elementId);

  document.addEventListener("click", (e) => {
    if (!element.contains(e.target)) callback();
  });
};

onClickOutside("red-box", () => console.log("Clicked outside red box"));

document.addEventListener("DOMContentLoaded", onClickOutside);
// Will log 'Hello' whenever the user clicks outside of #my-element

addEventListener用于监听click事件。
Node.contains()检查点击的元素是否位于指定元素之外。
DOMContentLoaded事件监听器确保仅在 HTML 挂载到 DOM 上后才调用 onClickOutside 函数。

4. 处理滚动停止也许，你想在用户停止滚动时做一些事情。这里有一个代码片段可以帮助你实现这一点。

const onScrollStop = callback => {
  let isScrolling;
  window.addEventListener(
    'scroll',
    e => {
      clearTimeout(isScrolling);
      isScrolling = setTimeout(() => {
        callback();
      }, 150);
    },
    false
  );
};

onScrollStop(() => {
  console.log('The user has stopped scrolling');
});

addEventListener用于监听scroll事件。
使用setTimeout等待 150 毫秒后再调用回调。
如果在 150 毫秒内触发新的滚动事件，则使用clearTimeout来清除超时。

5. 检测 CapsLock 是否打开

检查用户的 CapsLock 是否打开或关闭。

// Assume, el is an input element, and msg is a p tag to show message.

el.addEventListener('keyup', e => {
  msg.style = e.getModifierState('CapsLock')
    ? 'display: block'
    : 'display: none';
});

KeyboardEvent.getModifierState()用于确定用户键盘上 CapsLock 键的状态。

好了，这篇文章就到这里。如果你喜欢这篇文章，记得点赞支持哦。

我将在本文的下一部分中为您带来 4 个更有用的日常 JavaScript 开发代码片段。

我还运营着一份每周新闻通讯，因此您也可以通过那里加入我：https://swastikyadav.com

谢谢你！

文章来源：https://dev.to/swastikyadav/9-useful-code-snippets-for-everyday-javascript-development-part-1-478a

日常 JavaScript 开发中 9 个实用代码片段 || 第一部分

日常 JavaScript 开发中 9 个实用代码片段 || 第一部分

1. HTTPS重定向

2. 输入数字值

3. 处理外部点击

4. 处理滚动停止 也许，你想在用户停止滚动时做一些事情。这里有一个代码片段可以帮助你实现这一点。

5. 检测 CapsLock 是否打开

4. 处理滚动停止也许，你想在用户停止滚动时做一些事情。这里有一个代码片段可以帮助你实现这一点。