18个实用的JavaScript开发方法，提升你的开发效率
在实际开发项目中，我们会遇到很多重复的需求。为了提升工作效率，我们常常会整理很多属于自己的常用工具和功能模块代码，必要的时候，我们还会对其进行迭代更新。
今天这篇文章，我们要跟大家分享的就是一些关于 JavaScript 的常用方法整理，希望这些方法能够帮助到你。
1. 实现全屏
function fullScreen() {
const el = document.documentElement;
const rfs =
el.requestFullScreen ||
el.webkitRequestFullScreen ||
el.mozRequestFullScreen ||
el.msRequestFullscreen;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
}
}
fullScreen();2. 退出全屏
function exitScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
exitScreen();3. 页面打印
window.print();4. 打印内容样式更改
<style>
/* 使用@media print可以调整你需要的打印样式 */
@media print {
.noprint {
display: none;
}
}
</style>
<div class="print">print</div>
<div class="noprint">noprint</div>5. 阻止关闭事件
当你需要防止用户刷新或者关闭浏览器时，可以选择触发 beforeunload 事件。部分浏览器不能自定义文本内容。
window.onbeforeunload = function() {
return '您确定要离开haorooms博客吗？';
};6. 屏幕录制
当你需要录制当前屏幕，并将录屏上传或下载时：
const streamPromise = navigator.mediaDevices.getDisplayMedia();
streamPromise.then(stream => {
var recordedChunks = []; // 录制的视频数据
var options = { mimeType: "video/webm; codecs=vp9" }; // 设置编码格式
var mediaRecorder = new MediaRecorder(stream, options); // 初始化MediaRecorder实例
mediaRecorder.ondataavailable = handleDataAvailable; // 设置数据可用（录屏结束）时的回调
mediaRecorder.start();
// 视频碎片合并
function handleDataAvailable(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data); // 添加数据，event.data是一个BLOB对象
download(); // 封装成BLOB对象并下载
}
}
// 文件下载
function download() {
var blob = new Blob(recordedChunks, {
type: "video/webm"
});
// 此处可将视频上传到后端
var url = URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = "test.webm";
a.click();
window.URL.revokeObjectURL(url);
}
});7. 判断横竖屏
function hengshuping() {
if (window.orientation == 180 || window.orientation == 0) {
alert("竖屏状态！");
}
if (window.orientation == 90 || window.orientation == -90) {
alert("横屏状态！");
}
}
window.addEventListener(
"onorientationchange" in window ? "orientationchange" : "resize",
hengshuping,
false
);8. 横竖屏样式变更
<style>
@media all and (orientation : landscape) {
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait) {
body {
background-color: #00ff00;
}
}
</style>9. 标签页显隐
当你需要对标签页显示隐藏进行事件监听时：
const { hidden, visibilityChange } = (() => {
let hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
// Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
return {
hidden,
visibilityChange
};
})();
const handleVisibilityChange = () => {
console.log("当前被隐藏", document[hidden]);
};
document.addEventListener(
visibilityChange,
handleVisibilityChange,
false
);10. 本地图片预览
当你从客户端获取到一张图片但不能立刻上传到服务器，却需要预览的时候：
<div class="test">
<input type="file" name="" id="">
<img src="" alt="">
</div>
<script>
const getObjectURL = (file) => {
let url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // webkit or chrome
url = window.URL.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
}
return url;
}
document.querySelector('input').addEventListener('change', (event) => {
document.querySelector('img').src = getObjectURL(event.target.files[0]);
});
</script>11. 图片预加载
当你有大量图片的时候，你需要将图片进行预加载以免出现白屏的情况：
const images = [];
function preloader(args) {
for (let i = 0, len = args.length; i < len; i++) {
images[i] = new Image();
images[i].src = args[i];
}
}
preloader(['1.png', '2.jpg']);12. 字符串脚本化
当你需要将一串字符串转换成一个 JS 脚本时（该方法有 XSS 漏洞，慎用）：
const obj = eval('({ name: "jack" })');
// obj会被转换为对象{ name: "jack" }
const v = eval('obj');
// v会变成obj这个变量13. 递归函数名解耦
当你需要写一个递归函数时，声明了一个函数名，但每次修改函数名时总会忘记修改内部的函数名。arguments.callee 代表函数名：
// 这是一个最基础的斐波那契数列
function fibonacci(n) {
const fn = arguments.callee;
if (n <= 1) return 1;
return fn(n - 1) + fn(n - 2);
}14. 隐显判断
当你需要对一个 dom 元素判断当前是否出现在页面视图内时，可以用 IntersectionObserver：
<style>
.item {
height: 350px;
}
</style>
<div class="container">
<div class="item" >="1">不可见</div>
<div class="item" >="2">不可见</div>
<div class="item" >="3">不可见</div>
</div>
<script>
if (window?.IntersectionObserver) {
let items = [...document.getElementsByClassName("item")]; // 解析为真数组，也可用 Array.prototype.slice.call()
let io = new IntersectionObserver(
(entries) => {
entries.forEach((item) => {
item.target.innerhtml =
item.intersectionRatio === 1 // 元素显示比例，为1时完全可见，为0时完全不可见
? `元素完全可见`
: `元素部分不可见`;
});
},
{
root: null,
rootMargin: "0px 0px",
threshold: 1, // 阀值设为1，当只有比例达到1时才触发回调函数
}
);
items.forEach((item) => io.observe(item));
}
</script>15. 元素可编辑
当你需要在某个 DOM 元素进行编辑，让它点击的时候就像一个 textarea：
<div contenteditable="true">这里是可编辑的内容</div>16. 元素属性监听
<div id="test">test</div>
<button onclick="handleClick()">OK</button>
<script>
const el = document.getElementById("test");
let n = 1;
const observe = new MutationObserver((mutations) => {
console.log("属性发生变化了", mutations);
});
observe.observe(el, {
attributes: true
});
function handleClick() {
el.setAttribute("style", "color: red");
el.setAttribute(">, n++);
}
setTimeout(() => {
observe.disconnect(); // 停止监听
}, 5000);
</script>17. 打印 DOM 元素
当你需要在开发过程中打印 DOM 元素时，使用 console.log 往往只会打印出整个 DOM 元素，而无法查看该 DOM 元素的内部属性。可以尝试使用 console.dir：
console.dir(document.body);18. 激活应用
当你在移动端开发时，需要打开其他应用。以下方法也可以通过 location.href 赋值操作：
<a href="tel:12345678910">电话</a>
<!-- Android短信 -->
<a href="sms:12345678910,12345678911?body=你好">android短信</a>
<!-- iOS短信 -->
<a href="sms:/open?addresses=12345678910,12345678911&body=你好">ios短信</a>
<a href="wx://">微信</a>以上就是我们在开发中经常会使用的 18 个开发方法，希望这些方法能够帮助到你。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
