18 個(gè)強(qiáng)大的高級(jí)工程師必會(huì)JavaScript 技能

作者：佚名 2023-05-29 16:09:22

今天一起來(lái)了解下強(qiáng)大的高級(jí)工程師必會(huì)JavaScript 技能都有哪些吧！

瀏覽器

1.實(shí)現(xiàn)全屏

當(dāng)你需要將當(dāng)前屏幕顯示為全屏?xí)r

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.退出全屏

當(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)
    }
}
exitScreen()

3.頁(yè)面打印

當(dāng)您需要打印當(dāng)前頁(yè)面時(shí)

window.print()

4.打印內(nèi)容樣式改變

當(dāng)需要打印出當(dāng)前頁(yè)面，但又需要修改當(dāng)前布局時(shí)

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

5.阻止關(guān)閉事件

當(dāng)需要阻止用戶(hù)刷新或關(guān)閉瀏覽器時(shí)，可以選擇觸發(fā)beforeunload事件，部分瀏覽器無(wú)法自定義文本內(nèi)容。

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

6.屏幕錄制

當(dāng)您需要錄制當(dāng)前屏幕并上傳或下載屏幕錄像時(shí)

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);
    }
})

7.判斷橫豎屏

當(dāng)你需要判斷手機(jī)橫屏或豎屏狀態(tài)時(shí)

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

8.改變橫豎屏的樣式

當(dāng)你需要為橫豎屏設(shè)置不同的樣式時(shí)

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

9.標(biāo)簽頁(yè)隱藏

當(dāng)你需要監(jiān)聽(tīng)標(biāo)簽顯示和隱藏的事件時(shí)

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.本地圖片預(yù)覽

當(dāng)你從客戶(hù)端獲取圖片但不能立即上傳到服務(wù)器，需要預(yù)覽時(shí)

<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.圖片預(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'])

JavaScript

12.字符串腳本

當(dāng)需要將一串字符串轉(zhuǎn)成js腳本時(shí)，該方法存在xss漏洞，慎用

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ě)一個(gè)遞歸函數(shù)時(shí)，你聲明了一個(gè)函數(shù)名，但是每次修改函數(shù)名時(shí)，你總是忘記修改內(nèi)部函數(shù)名。argument是函數(shù)的內(nèi)部對(duì)象，包括傳入函數(shù)的所有參數(shù)，arguments.callee代表函數(shù)名。

// 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.隱性判斷

當(dāng)需要判斷一個(gè)dom元素當(dāng)前是否出現(xiàn)在page view中時(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)你需要編輯一個(gè)dom元素時(shí)，讓它像textarea一樣點(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)用程序。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>