【前端分享】18个工作中常用的JavaScript方法整理汇总！

在实际开发项目中，我们会遇到很多重复的需求，为了提升工作效率，我们常常会整理很多属于自己的常用工具和功能模块代码，必要的时候，我们会将其进行迭代更新。

今天这篇文章，我们要跟大家分享的就是一些关于JavaScrpt的常用方法的整理，希望这些方法能够帮助到你。

1、实现全屏

functionfullScreen() {
const el = document.documentElement
const rfs = 
    el.requestFullScreen || 
    el.webkitRequestFullScreen || 
    el.mozRequestFullScreen || 
    el.msRequestFullscreen
if(typeof rfs != "undefined" && rfs) {
        rfs.call(el)
    }
}
fullScreen()

2、退出全屏

functionexitScreen() {
if (document.exitFullscreen) { 
document.exitFullscreen()
    } 
elseif (document.mozCancelFullScreen) { 
document.mozCancelFullScreen()
    } 
elseif (document.webkitCancelFullScreen) { 
document.webkitCancelFullScreen()
    } 
elseif (document.msExitFullscreen) { 
document.msExitFullscreen()
    } 
if(typeof cfs != "undefined" && cfs) {
        cfs.call(el)
    }
}
exitScreen()

3、页面打印

window.print()

4、打印内容样式更改

print

noprint

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 = newMediaRecorder(stream, options);// 初始化MediaRecorder实例

    mediaRecorder.ondataavailable = handleDataAvailable;// 设置数据可用（录屏结束）时的回调
    mediaRecorder.start();

// 视频碎片合并
functionhandleDataAvailable(event) {
if (event.data.size > 0) {
            recordedChunks.push(event.data);// 添加数据，event.data是一个BLOB对象
download();// 封装成BLOB对象并下载
        }
    }

// 文件下载
functiondownload() {
var blob = newBlob(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、判断横竖屏

functionhengshuping(){
if(window.orientation==180||window.orientation==0){
alert("竖屏状态！")
    }
if(window.orientation==90||window.orientation==-90){
alert("横屏状态！")
    }
}
window.addEventListener("onorientationchange"inwindow ? "orientationchange" : "resize", hengshuping, false);

8、横竖屏样式变更

9、标签页显隐

//当你需要对标签页显示隐藏进行事件监听时

const {hidden, visibilityChange} = (() => {
let hidden, visibilityChange;
if (typeofdocument.hidden !== "undefined") {
// Opera 12.10 and Firefox 18 and later support
      hidden = "hidden";
      visibilityChange = "visibilitychange";
    } elseif (typeofdocument.msHidden !== "undefined") {
      hidden = "msHidden";
      visibilityChange = "msvisibilitychange";
    } elseif (typeofdocument.webkitHidden !== "undefined") {
      hidden = "webkitHidden";
      visibilityChange = "webkitvisibilitychange";
    }
return {
      hidden,
      visibilityChange
    }
})();

consthandleVisibilityChange = () => {
console.log("当前被隐藏", document[hidden]);
};

document.addEventListener(
    visibilityChange,
    handleVisibilityChange,
false
);

10、本地图片预览

//当你从客户端获取到一张图片但不能立刻上传到服务器，却需要预览的时候

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、递归函数名解耦

//当你需要写一个递归函数的时候，你声明了一个函数名，但是每次修改函数名的时候总会忘记修改内部的函数名。argument 为函数内部对象，包含传入函数的所有参数，arguments.callee 代表函数名。

// 这是一个最基础的斐波那契数列
functionfibonacci (n) {
constfn = arguments.callee
if (n <= 1) return1
returnfn(n - 1) + fn(n - 2)
}

14、隐显判断

//当你需要对一个 dom 元素进行判断当前是否出现在页面视图内，你可以尝试用 IntersectionObserver 进行判断




不可见

不可见