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

这个系列分为两部分，这是第一部分。

现在，让我们开始吧。

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键的状态。

——————

版权声明：本文为CSDN博主「珍儿2022」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43044226/article/details/125826264

搜索

复制