JavaScript 日常开发的 9 个实用代码片段 （part 1）

大家好！在这篇文章中，我们将介绍一些最常见的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获取的输入值总是字符串，然后按实际需要将其转换为数字。

数字类型的目的是用于移动浏览器显示正确的键盘，有些浏览器也用来进行验证。例如，email类型将显示带有@和.的键盘，以及数字将显示数字键盘。

不过，还有一种更好的方法，那就是将输入值设为Number。

const numInput = document.getElementById('num-input');
 
let num;
// 不建议: 用 parseFloat() 将字符串转换成数字
num = parseFloat(numInput.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用于监听点击事件。

• 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用于监听滚动事件。

• 通过setTimeout使得在调用回调之前等待150毫秒。

• clearTimeout用于清除超时，如果在150毫秒内触发了新的滚动事件的话。

5.检测大小写锁（CapsLock）是否开启

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

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

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

第一部分到此结束。下个部分将介绍用于日常JavaScript开发的剩下4个代码片段。

感谢大家的阅读