本文探讨了前端开发中的几个关键点，包括使用ResizeObserver监听元素尺寸变化以优化布局，通过getImg函数处理图片懒加载，以及验证手机号和身份证号的正则表达式。此外，还介绍了获取URL参数的方法getUrl，并提出了一种手机端input输入与键盘弹出的缓冲解决方案inputBlur，以提升用户交互体验。
//监听页面元素的尺寸变化
const resizeObserver = new ResizeObserver(entries => {
console.log(entries)
});
resizeObserver.observe(document);
//等待加载图片
function getImg(data) {
let imgObj = new Image();
imgObj.src = data;
return new Promise((resolve, reject) => {
imgObj.onload = function () {
return resolve(this);
};
imgObj.onerror = function () {
return reject(this);
};
});
};
//验证简单的手机号
function confirmMobile(mobile) {
let re = /^1[23456789]\d{9}$/;
if (isNaN(mobile) || mobile.length !== 11 || !re.test(mobile)) {
return false;
}
return true;
};
//验证简单的身份证
function checkIdCard(idCard){
let re = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
if (idCard.length < 15 || !re.test(idCard)) {
return false;
}
return true;
};
//获取url信息
function getUrl() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
var strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
}
}
return theRequest;
};
//手机端input与键盘的功能缓冲
function inputBlur() {
setTimeout(function () {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
};
8610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
