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个代码片段。

感谢大家的阅读

  • 8
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

珍儿2022

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值