1. 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.documentElement    const rfs =     el.requestFullScreen ||     el.webkitRequestFullScreen ||     el.mozRequestFullScreen ||     el.msRequestFullscreen    if(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 here const streamPromise = navigator.mediaDevices.getDisplayMedia()streamPromise.then(stream => {    var recordedChunks = [];// recorded video datavar 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.判斷橫豎屏

        當(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 Hidden 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)你從客戶端獲取圖片但無(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) { // 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'])

        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.callee    if (n <= 1) return 1    return 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)



        瀏覽 99
        點(diǎn)贊
        評(píng)論
        收藏
        分享

        手機(jī)掃一掃分享

        分享
        舉報(bào)
        評(píng)論
        圖片
        表情
        推薦
        點(diǎn)贊
        評(píng)論
        收藏
        分享

        手機(jī)掃一掃分享

        分享
        舉報(bào)
          
          

            1. 5个黑人躁我一个爽 | 日韩小电影在线 | 欧美一区亚洲一区 | 原神18av黄漫网站钟离 | 一起操在线 |