代码图片生成工具:有码高清
一、滚动到页面顶部
我们可以使用 window.scrollTo() 平滑滚动到页面顶部。
源码:
const scrollToTop = () => {
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};
二、滚动到页面底部
当然,如果知道文档的高度,也可以平滑滚动到页面底部。
源码:
const scrollToBottom = () => {
window.scrollTo({
top: document.documentElement.offsetHeight,
left: 0,
behavior: "smooth",
});
};
三、将元素滚动到可见区域
有时候我们需要将元素滚动到可见区域,怎么办?使用 scrollIntoView 就足够了。
const smoothScroll = (element) => {
element.scrollIntoView({
behavior: "smooth",
});
};
四、以全屏模式显示元素
你一定遇到过这样的场景,需要全屏播放视频,在浏览器中全屏打开页面。
const goToFullScreen = (element) => {
element = element || document.body;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
}
};
五、退出浏览器全屏状态
是的,这个和第4点一起使用,你也会有退出浏览器全屏状态的场景。
const goExitFullscreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
};
六、获取数据类型
如何通过函数获取变量的数据类型?
const getType = (value) => {
const match = Object.prototype.toString.call(value).match(/ (\w+)]/)
return match[1].toLocaleLowerCase()
}
getType() // undefined
getType({}}) // object
getType([]) // array
getType(1) // number
getType('fatfish') // string
getType(true) // boolean
getType(/fatfish/) // regexp
七、停止冒泡事件
需要一种适用于所有平台的防止事件冒泡的方法。
const stopPropagation = (event) => {
event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
};
八、深拷贝一个对象
如何复制深度嵌套的对象?
const deepCopy = (obj, hash = new WeakMap()) => {
if (obj instanceof Date) {
return new Date(obj);
}
if (obj instanceof RegExp) {
return new RegExp(obj);
}
if (hash.has(obj)) {
return hash.get(obj);
}
let allDesc = Object.getOwnPropertyDescriptors(obj);
let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc);
hash.set(obj, cloneObj);
for (let key of Reflect.ownKeys(obj)) {
if (obj[key] && typeof obj[key] === "object") {
cloneObj[key] = deepCopy(obj[key], hash);
} else {
cloneObj[key] = obj[key];
}
}
return cloneObj;
};
九、确定设备类型
我们经常需要这样做,在手机上显示 A 逻辑,在 PC 上显示 B 逻辑。基本上,设备类型是通过识别浏览器的userAgent来确定的。
const isMobile = () => {
return !!navigator.userAgent.match(
/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i
);
};
十、判断设备是Android还是IOS
除了区分是手机端还是PC端,很多时候我们还需要区分当前设备是Android还是IOS。
const isAndroid = () => {
return /android/i.test(navigator.userAgent.toLowerCase());
};
const isIOS = () => {
let reg = /iPhone|iPad|iPod|iOS|Macintosh/i;
return reg.test(navigator.userAgent.toLowerCase());
};