大家好!在这篇文章中,我们将介绍一些最常见的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个代码片段。
感谢大家的阅读