18個(gè)面向?qū)I(yè)開(kāi)發(fā)人員的高級(jí) JavaScript 技術(shù)
共 9554字,需瀏覽 20分鐘
·
2024-07-14 21:51
瀏覽器
01.實(shí)現(xiàn)全屏
當(dāng)你需要將當(dāng)前屏幕顯示為全屏?xí)r。
function fullScreen() {const el = document.documentElementconst rfs =el.requestFullScreen ||el.webkitRequestFullScreen ||el.mozRequestFullScreen ||el.msRequestFullscreenif(typeof rfs != "undefined" && rfs) {rfs.call(el)}}// Click to go ?? full screen!fullScreen()
02.退出全屏
當(dāng)你需要退出全屏?xí)r。
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)}// Exiting full screen ????}exitScreen()
03.頁(yè)面打印
當(dāng)你需要打印當(dāng)前頁(yè)面時(shí)。
// Click to print the page ???window.print()
04.打印內(nèi)容樣式更改
當(dāng)你需要打印出當(dāng)前頁(yè)面,但需要修改當(dāng)前布局時(shí)。
<style>/* Adjusting print layout ?? */@media print {.noprint {display: none;}}</style><div class="print">print</div><div class="noprint">noprint</div>
05.阻止關(guān)閉事件
當(dāng)需要阻止用戶刷新或關(guān)閉瀏覽器時(shí),可以選擇觸發(fā) beforeunload 事件,部分瀏覽器無(wú)法自定義文本內(nèi)容。
window.onbeforeunload = function(){return 'Are you sure you want to leave the haorooms blog?????';};
06.屏幕錄制
當(dāng)你需要錄制當(dāng)前屏幕并上傳或下載屏幕錄制時(shí)。
// Record your screen hereconst streamPromise = navigator.mediaDevices.getDisplayMedia()streamPromise.then(stream => {var recordedChunks = [];// recorded video datavar options = { mimeType: "video/webm; codecs=vp9" };// Set the encoding formatvar mediaRecorder = new MediaRecorder(stream, options);// Initialize the MediaRecorder instancemediaRecorder.ondataavailable = handleDataAvailable;// Set the callback when data is available (end of screen recording)mediaRecorder.start();// Video Fragmentationfunction handleDataAvailable(event) {if (event.data.size > 0) {recordedChunks.push(event.data);// Add data, event.data is a BLOB objectdownload();// Encapsulate into a BLOB object and download}}// file downloadfunction download() {var blob = new Blob(recordedChunks, {type: "video/webm"});// Videos can be uploaded to the backend herevar 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.判斷橫豎屏
當(dāng)你需要判斷手機(jī)橫豎屏的狀態(tài)時(shí)。
function hengshuping() {if (window.orientation == 180 || window.orientation == 0) {alert("Portrait mode! ??");}if (window.orientation == 90 || window.orientation == -90) {alert("Landscape mode! ??");}}// Add listener for screen orientation changes ??window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
08.改變橫豎屏樣式
當(dāng)你需要為橫豎屏設(shè)置不同的樣式時(shí)。
<style>@media all and (orientation : landscape) {body {background-color: #ff0000;}}@media all and (orientation : portrait) {body {background-color: #00ff00;}}</style>
09.標(biāo)簽頁(yè)隱藏
當(dāng)你需要監(jiān)聽(tīng)標(biāo)簽頁(yè)顯示和隱藏事件時(shí)。
// Tab Page Hiddenconst {hidden, visibilityChange} = (() => {let hidden, visibilityChange;if (typeof document.hidden !== "undefined") {// Opera 12.10 and Firefox 18 and later supporthidden = "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.本地圖片預(yù)覽
當(dāng)你從客戶端獲取圖片但無(wú)法立即上傳到服務(wù)器,但需要預(yù)覽時(shí)。
<!-- Upload and preview images here ?? --><div class="test"><input type="file" name="" id=""><img src="" alt=""></div><script>const getObjectURL = (file) => {let url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // webkit or chromeurl = 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.圖片預(yù)加載
當(dāng)你有大量圖片時(shí),你需要預(yù)加載圖片以避免白屏
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
12.字符串腳本
當(dāng)需要將一串字符串轉(zhuǎn)換成js腳本時(shí),此方法存在xss漏洞,謹(jǐn)慎使用。
const obj = eval('({ name: "jack" })')// obj will be converted to object{ name: "jack" }const v = eval('obj')// v will become the variable obj
13.遞歸函數(shù)名解耦
當(dāng)需要編寫(xiě)遞歸函數(shù)時(shí),會(huì)聲明一個(gè)函數(shù)名,但每次修改函數(shù)名時(shí),總會(huì)忘記修改內(nèi)部的函數(shù)名。argument 是函數(shù)內(nèi)部對(duì)象,包括傳入函數(shù)的所有參數(shù),arguments.callee 代表函數(shù)名。
// This is a basic Fibonacci sequencefunction fibonacci (n) {const fn = arguments.calleeif (n <= 1) return 1return fn(n - 1) + fn(n - 2)}
DOM元素
14.隱式判斷
當(dāng)你需要判斷某個(gè)dom元素當(dāng)前是否出現(xiàn)在頁(yè)面視圖中時(shí),可以嘗試使用IntersectionObserver來(lái)判斷。
<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.元素可編輯
當(dāng)你需要編輯 dom 元素時(shí),讓它像文本區(qū)域一樣點(diǎn)擊。
<div contenteditable="true">here can be edited</div>
16.元素屬性監(jiān)控
<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元素
開(kāi)發(fā)過(guò)程中需要打印dom元素時(shí),使用console.log往往只能打印出整個(gè)dom元素,無(wú)法查看dom元素內(nèi)部的屬性,可以嘗試使用console.dir。
console.dir(document.body)
其他
18.激活應(yīng)用
當(dāng)你在移動(dòng)端開(kāi)發(fā)時(shí),需要打開(kāi)其他應(yīng)用,以下方法也可以通過(guò)location.href賦值來(lái)操作
<!-- Use the following links to activate phone features ?? --><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>
本文完
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
