關于JavaScript的技巧,我們在之前的內容中也分享過很多,希望今天這期內容能夠給你帶來新的知識,從中學習到新內容,那么,我們現在開始吧。
我們可以使用 window.scrollTo() 平滑滾動到頁面頂部。
const scrollToTop = () => { window.scrollTo({ top: 0, left: 0, behavior: "smooth" });};
當然,如果知道文檔的高度,也可以平滑滾動到頁面底部。
const scrollToBottom = () => { window.scrollTo({ top: document.documentElement.offsetHeight, left: 0, behavior: "smooth", });};
有時我們需要將元素滾動到可見區域,該怎么辦? 使用scrollIntoView就足夠了。
const smoothScroll = (element) => { element.scrollIntoView({ behavior: "smooth", });};
你一定遇到過這樣的場景,你需要全屏播放視頻并在瀏覽器中全屏打開頁面。
const goToFullScreen = (element) => { element = element || document.body; if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullScreen(); }};
是的,這個和第四點一起使用,你也會出現退出瀏覽器全屏狀態的場景。
const goExitFullscreen = () => { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }};
如何通過函數獲取變量的數據類型?
const getType = (value) => { const match = Object.prototype.toString.call(value).match(/ (/w+)]/) return match[1].toLocaleLowerCase()}getType() // undefinedgetType({}}) // objectgetType([]) // arraygetType(1) // numbergetType('fatfish') // stringgetType(true) // booleangetType(/fatfish/) // regexp
需要一種適用于所有平臺的防止事件冒泡的方法。
const stopPropagation = (event) => { event = event || window.event; if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; }};
如何復制深度嵌套的對象?
const deepCopy = (obj, hash = new WeakMap()) => { if (obj instanceof Date) { return new Date(obj); } if (obj instanceof RegExp) { return new RegExp(obj); } if (hash.has(obj)) { return hash.get(obj); } let allDesc = Object.getOwnPropertyDescriptors(obj); let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc); hash.set(obj, cloneObj); for (let key of Reflect.ownKeys(obj)) { if (obj[key] && typeof obj[key] === "object") { cloneObj[key] = deepCopy(obj[key], hash); } else { cloneObj[key] = obj[key]; } } return cloneObj;};
我們經常需要這樣做,以便在手機上顯示 A 邏輯,在 PC 上顯示 B 邏輯。 基本上,設備類型是通過識別瀏覽器的 userAgent 來確定的。
const isMobile = () => { return !!navigator.userAgent.match( /(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i );};
除了區分是手機還是PC之外,很多時候我們還需要區分當前設備是Android還是IOS。
const isAndroid = () => { return /android/i.test(navigator.userAgent.toLowerCase());};const isIOS = () => { let reg = /iPhone|iPad|iPod|iOS|Macintosh/i; return reg.test(navigator.userAgent.toLowerCase());};
作為前端開發人員,你可能會遇到各種兼容性問題。 這時,你可能需要獲取瀏覽器的類型和版本。
const getExplorerInfo = () => { let t = navigator.userAgent.toLowerCase(); return 0 <= t.indexOf("msie") ? { //ie < 11 type: "IE", version: Number(t.match(/msie ([/d]+)/)[1]), } : !!t.match(/trident//.+?rv:(([/d.]+))/) ? { // ie 11 type: "IE", version: 11, } : 0 <= t.indexOf("edge") ? { type: "Edge", version: Number(t.match(/edge//([/d]+)/)[1]), } : 0 <= t.indexOf("firefox") ? { type: "Firefox", version: Number(t.match(/firefox//([/d]+)/)[1]), } : 0 <= t.indexOf("chrome") ? { type: "Chrome", version: Number(t.match(/chrome//([/d]+)/)[1]), } : 0 <= t.indexOf("opera") ? { type: "Opera", version: Number(t.match(/opera.([/d]+)/)[1]), } : 0 <= t.indexOf("Safari") ? { type: "Safari", version: Number(t.match(/version//([/d]+)/)[1]), } : { type: t, version: -1, };};
cookie可能是我見過的最糟糕的API,它太難用了,我們不得不重新封裝它以最大限度地提高我們的開發效率。
const setCookie = (key, value, expire) => { const d = new Date(); d.setDate(d.getDate() + expire); document.cookie = `${key}=${value};expires=${d.toUTCString()}`;};
除了對cookie進行寫入之外,我們還會涉及到它的讀取操作。
const getCookie = (key) => { const cookieStr = unescape(document.cookie); const arr = cookieStr.split("; "); let cookieValue = ""; for (let i = 0; i < arr.length; i++) { const temp = arr[i].split("="); if (temp[0] === key) { cookieValue = temp[1]; break; } } return cookieValue;};
刪除cookie的想法是什么? 其實只要將它的過期時間設置為此時,它就會立即過期。
const delCookie = (key) => { document.cookie = `${encodeURIComponent(key)}=;expires=${new Date()}`;};
不知道大家有沒有遇到過需要生成隨機字符串的場景。 我遇到過很多次了,每次都要重新google一遍,直到學會這個工具功能。
const randomString = (len) => { let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789"; let strLen = chars.length; let randomStr = ""; for (let i = 0; i < len; i++) { randomStr += chars.charAt(Math.floor(Math.random() * strLen)); } return randomStr;};randomString(10) // pfkMfjEJ6xrandomString(20) // ce6tEx1km4idRNMtym2S
const fistLetterUpper = (str) => { return str.charAt(0).toUpperCase() + str.slice(1);};fistLetterUpper('fatfish') // Fatfish
也許出于測試目的,我經常需要生成一定范圍內的隨機數。
const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;randomNum(1, 10) // 6randomNum(10, 20) // 11
如何打亂數組原來的順序?
const shuffleArray = (array) => { return array.sort(() => 0.5 - Math.random())}let arr = [ 1, -1, 10, 5 ]shuffleArray(arr) // [5, -1, 10, 1]shuffleArray(arr) // [1, 10, -1, 5]
之前做過一個抽獎項目,需要讓數組中的獎品隨機出現。
const getRandomValue = array => array[Math.floor(Math.random() * array.length)]; const prizes = [ '$100', '
本文鏈接:http://www.www897cc.com/showinfo-26-57936-0.html21個簡單而實用的 JavaScript 代碼片段
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 常用的幾種推薦算法介紹
下一篇: 五個用于前端的Python庫