18 個高級工程師必須會的強大JavaScript 技巧
作者：佚名
今天我們一起來聊一聊18 個高級工程師必須會的強大JavaScript 技巧都有哪些吧。
瀏覽器
01、實現全屏當您需要將當前屏幕顯示為全屏時
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()02、退出全屏
當您需要退出全屏時
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()03、頁面打印
當您需要打印當前頁面時
window.print()04、打印內容風格變更
當需要打印出當前頁面，但需要修改當前布局時
<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>05、阻止關閉事件
當需要阻止用戶刷新或關閉瀏覽器時，可以選擇觸發beforeunload事件，有些瀏覽器無法自定義文本內容
window.onbeforeunload = function(){
return 'Are you sure you want to leave the haorooms blog？';
};06、屏幕錄制
當您需要錄制當前屏幕并上傳或下載屏幕錄制時
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);
}
})07、判斷橫屏和豎屏
當您需要判斷手機橫屏或豎屏狀態時
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);
}
})08、改變橫豎屏樣式
當你需要為橫豎屏設置不同的樣式時
<style>
@media all and (orientation : landscape) {
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait) {
body {
background-color: #00ff00;
}
}
</style>09、標簽頁隱藏
當需要監聽tab顯示和隱藏事件時
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
);圖片
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'])JavaScript
12、字符串腳本
當需要將一串字符串轉換為JavaScript腳本時，該方法存在xss漏洞，請謹慎使用
const obj = eval('({ name: "jack" })')
// obj will be converted to object{ name: "jack" }
const v = eval('obj')
// v will become the variable obj13、遞歸函數名解耦
當需要編寫遞歸函數時，聲明了函數名，但是每次修改函數名時，總是忘記修改內部函數名。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 元素
14、隱性判斷
當需要判斷某個dom元素當前是否出現在頁面視圖中時，可以嘗試使用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>15、元素可編輯
當你需要編輯一個dom元素時，讓它像文本區域一樣點擊。
<div contenteditable="true">here can be edited</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("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>17、打印 dom 元素
當開發過程中需要打印dom元素時，使用console.log往往只能打印出整個dom元素，而無法查看dom元素的內部屬性。你可以嘗試使用 console.dir
console.dir(document.body)其他
18、激活應用程序
當你在移動端開發時，你需要打開其他應用程序。還可以通過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>總結
以上就是我今天想與你分享的全部內容，希望對你有所幫助，最后，感謝你的閱讀，祝編程愉快!
責任編輯：華軒
來源：
web前端開發
