18 个强大的高级工程师必会JavaScript 技能

当你需要将当前屏幕显示为全屏时

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()

当你需要退出全屏时

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()
 } 
 if(typeof cfs != "undefined" && cfs) {
 cfs.call(el)
 }
}
exitScreen()

当您需要打印当前页面时

window.print()

当需要打印出当前页面，但又需要修改当前布局时

<style>
/* Use @media print to adjust the print style you need */
@media print {
 .noprint {
 display: none;
 }
}
</style>
<div class="print">print</div>
<div class="noprint">noprint</div>

当需要阻止用户刷新或关闭浏览器时，可以选择触发beforeunload事件，部分浏览器无法自定义文本内容。

window.onbeforeunload = function(){
 return 'Are you sure you want to leave the haorooms blog？';
};

当您需要录制当前屏幕并上传或下载屏幕录像时

const streamPromise = navigator.mediaDevices.getDisplayMedia()
streamPromise.then(stream => {
 var recordedChunks = [];// recorded video data
var options = { mimeType: "video/webm; codecs=vp9" };// Set the encoding format
 var mediaRecorder = new MediaRecorder(stream, options);// Initialize the MediaRecorder instance
 mediaRecorder.ondataavailable = handleDataAvailable;// Set the callback when data is available (end of screen recording)
 mediaRecorder.start();
 // Video Fragmentation
 function handleDataAvailable(event) {
 if (event.data.size > 0) {
 recordedChunks.push(event.data);// Add data, event.data is a BLOB object
 download();// Encapsulate into a BLOB object and download
 }
 }
// file download
 function download() {
 var blob = new Blob(recordedChunks, {
 type: "video/webm"
 });
 // Videos can be uploaded to the backend here
 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);
 }
})

当你需要判断手机横屏或竖屏状态时

function hengshuping(){
 if(window.orientation==180||window.orientation==0){
 alert("Portrait state！")
 }
 if(window.orientation==90||window.orientation==-90){
 alert("Landscape state！")
 }
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

当你需要为横竖屏设置不同的样式时

<style>
@media all and (orientation : landscape) {
 body {
 background-color: #ff0000;
 }
}
@media all and (orientation : portrait) {
 body {
 background-color: #00ff00;
 }
}
</style>

当你需要监听标签显示和隐藏的事件时

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("currently hidden", document[hidden]);
};
document.addEventListener(
 visibilityChange,
 handleVisibilityChange,
 false
);

当你从客户端获取图片但不能立即上传到服务器，需要预览时

<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>

当你有很多图片时，你需要预加载图片以避免白屏

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'])

当需要将一串字符串转成js脚本时，该方法存在xss漏洞，慎用

const obj = eval('({ name: "jack" })')
// obj will be converted to object{ name: "jack" }
const v = eval('obj')
// v will become the variable obj

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

// This is a basic Fibonacci sequence
function fibonacci (n) {
 const fn = arguments.callee
 if (n <= 1) return 1
 return fn(n - 1) + fn(n - 2)
}

当需要判断一个dom元素当前是否出现在page view中时，可以尝试使用IntersectionObserver来判断。

<style>
.item {
 height: 350px;
}
</style>


<div class="container">
 <div class="item" data-id="1">Invisible</div>
 <div class="item" data-id="2">Invisible</div>
 <div class="item" data-id="3">Invisible</div>
</div>
<script>
 if (window?.IntersectionObserver) {
 let items = [...document.getElementsByClassName("item")]; // parses as a true array, also available Array.prototype.slice.call()
let io = new IntersectionObserver(
 (entries) => {
 entries.forEach((item) => {
 item.target.innerHTML =
 item.intersectionRatio === 1 // The display ratio of the element, when it is 1, it is completely visible, and when it is 0, it is completely invisible
 ? `Element is fully visible`
 : `Element is partially invisible`;
 });
 },
 {
 root: null,
 rootMargin: "0px 0px",
 threshold: 1, // The threshold is set to 1, and the callback function is triggered only when the ratio reaches 1
 }
 );
 items.forEach((item) => io.observe(item));
 }
</script>

当你需要编辑一个dom元素时，让它像textarea一样点击

<div contenteditable="true">here can be edited</div>

<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("attribute is changede", mutations);
 })
 observe.observe(el, {
 attributes: true
 });
 function handleClick() {
 el.setAttribute("style", "color: red");
 el.setAttribute("data-name", n++);
 }
 setTimeout(() => {
 observe.disconnect(); // stop watch
 }, 5000);
</script>

在开发过程中需要打印dom元素时，使用console.log往往只能打印出整个dom元素，无法查看dom元素的内部属性。您可以尝试使用 console.dir

console.dir(document.body)

当你在移动端开发时，你需要打开其他应用程序。location.href赋值也可以操作以下方法。

<a href="tel:12345678910">phone</a>
<a href="sms:12345678910,12345678911?body=hello">android message</a> 
<a href="sms:/open?addresses=12345678910,12345678911&body=hello">ios message</a>
<a href="wx://">ios message</a>

以上就是今天与你分享的18个JavaScript技巧。