提升JS編程效率的19個實(shí)用技巧分享
在實(shí)際工作中,開發(fā)者常面臨一些需巧妙編程解決的挑戰(zhàn)。有時幾行代碼就能迎刃而解。本文整理了一系列實(shí)用代碼片段,助您輕松處理URL、DOM操作、事件處理、日期處理以及用戶偏好設(shè)置等常見問題。
這些精選代碼片段均源自“30 seconds of code
”——一個卓越的編程資源庫。我強(qiáng)烈推薦您查閱其完整代碼,以獲得更多靈感。
選擇這些代碼片段的首要準(zhǔn)則是它們的實(shí)用性。希望您能在這里發(fā)現(xiàn)寶貴的資源,并將其應(yīng)用于未來的項(xiàng)目中,以提升編程效率和質(zhì)量。
1.如何獲取base URL
const getBaseURL = url => url.replace(/[?#].*$/, ''); getBaseURL('http://url.com/page?name=Adam&surname=Smith'); // 'http://url.com/page'
2.如何檢查URL是否是絕對的
const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str); isAbsoluteURL('https://google.com'); // true isAbsoluteURL('ftp://www.myserver.net'); // true isAbsoluteURL('/foo/bar'); // false
3.如何獲取URL參數(shù)作為對象
const getURLParameters = url => (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce( (a, v) => ( (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a ), {} ); getURLParameters('google.com'); // {} getURLParameters('http://url.com/page?name=Adam&surname=Smith'); // {name: 'Adam', surname: 'Smith'}
4.如何檢查一個元素是否包含另一個元素
const elementContains = (parent, child) => parent !== child && parent.contains(child); elementContains( document.querySelector('head'), document.querySelector('title') ); // true elementContains(document.querySelector('body'), document.querySelector('body')); // false
5.如何獲取元素的所有祖先
const getAncestors = el => { let ancestors = []; while (el) { ancestors.unshift(el); el = el.parentNode; } return ancestors; }; getAncestors(document.querySelector('nav')); // [document, html, body, header, nav]
6.如何將元素平滑滾動到視圖中
const smoothScroll = element => document.querySelector(element).scrollIntoView({ behavior: 'smooth' }); smoothScroll('#fooBar'); // scrolls smoothly to the element with the id fooBar smoothScroll('.fooBar'); // scrolls smoothly to the first element with a class of fooBar
7.如何處理元素外部的單擊
const onClickOutside = (element, callback) => { document.addEventListener('click', e => { if (!element.contains(e.target)) callback(); }); }; onClickOutside('#my-element', () => console.log('Hello')); // Will log 'Hello' whenever the user clicks outside of #my-element
8.如何生成UUID
const UUIDGeneratorBrowser = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => ( c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4))) ).toString(16) ); UUIDGeneratorBrowser(); // '7982fcfe-5721-4632-bede-6000885be57d'
9.如何獲取所選文本
const getSelectedText = () => window.getSelection().toString(); getSelectedText(); // 'Lorem ipsum'
10.如何將文本復(fù)制到剪貼板
const copyToClipboard = str => { if (navigator && navigator.clipboard && navigator.clipboard.writeText) return navigator.clipboard.writeText(str); return Promise.reject('The Clipboard API is not available.'); };
11.如何為HTML元素添加樣式
const addStyles = (el, styles) => Object.assign(el.style, styles); addStyles(document.getElementById('my-element'), { background: 'red', color: '#ffff00', fontSize: '3rem' });
12.如何切換全屏模式
const fullscreen = (mode = true, el = 'body') => mode ? document.querySelector(el).requestFullscreen() : document.exitFullscreen(); fullscreen(); // Opens `body` in fullscreen mode fullscreen(false); // Exits fullscreen mode
13.如何檢測Caps Lock是否打開
<form> <label for="username">Username:</label> <input id="username" name="username"> <label for="password">Password:</label> <input id="password" name="password" type="password"> <span id="password-message" style="display: none">Caps Lock is on</span> </form>
const el = document.getElementById('password'); const msg = document.getElementById('password-message'); el.addEventListener('keyup', e => { msg.style = e.getModifierState('CapsLock') ? 'display: block' : 'display: none'; });
14.如何檢查日期是否有效
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf()); isDateValid('December 17, 1995 03:24:00'); // true isDateValid('1995-12-17T03:24:00'); // true isDateValid('1995-12-17 T03:24:00'); // false isDateValid('Duck'); // false isDateValid(1995, 11, 17); // true isDateValid(1995, 11, 17, 'Duck'); // false isDateValid({}); // false
15.如何從日期中獲取時分秒信息
const getColonTimeFromDate = date => date.toTimeString().slice(0, 8); getColonTimeFromDate(new Date()); // '08:38:00'
16.如何從Date生成UNIX時間戳
const getTimestamp = (date = new Date()) => Math.floor(date.getTime() / 1000); getTimestamp(); // 1602162242
17.如何查看當(dāng)前用戶的首選語言
const detectLanguage = (defaultLang = 'en-US') => navigator.language || (Array.isArray(navigator.languages) && navigator.languages[0]) || defaultLang; detectLanguage(); // 'nl-NL'
18.如何查看用戶的首選配色方案
const prefersDarkColorScheme = () => window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; prefersDarkColorScheme(); // true
19.如何檢查設(shè)備是否支持觸摸事件
const supportsTouchEvents = () => window && 'ontouchstart' in window; supportsTouchEvents(); // true
在這篇文章中,我們列舉了一些精心挑選的代碼片段來解決開發(fā)過程中的常見挑戰(zhàn)。這些代碼片段涵蓋了處理URL、DOM操作、事件處理、日期處理和用戶偏好設(shè)置等多個方面,旨在提供簡潔而高效的解決方案。希望你能在日常工作中找到并應(yīng)用這些有價值的代碼片段,從而提升編程效率和質(zhì)量。
到此這篇關(guān)于提升JS編程效率的19個實(shí)用技巧分享的文章就介紹到這了,更多相關(guān)JS技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Javascript中將變量轉(zhuǎn)換為字符串的三種方法
這篇文章主要給大家介紹了關(guān)于Javascript中將變量轉(zhuǎn)換為字符串的三種方法,這三種方法分別是:value.toString()、"" + value和String(value),文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09BootStrap下拉菜單和滾動監(jiān)聽插件實(shí)現(xiàn)代碼
這篇文章主要介紹了BootStrap下拉菜單和滾動監(jiān)聽插件實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09js+html+css實(shí)現(xiàn)手動輪播和自動輪播
這篇文章主要為大家詳細(xì)介紹了js+html+css實(shí)現(xiàn)手動輪播和自動輪播效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-12-12javascript 構(gòu)建一個xmlhttp對象池合理創(chuàng)建和使用xmlhttp對象
在我的這篇舊文里曾經(jīng)發(fā)布了一個簡單的ajax操作類。我們發(fā)現(xiàn),在舊文里創(chuàng)建xmlhttp對象的時候,每次都要new一個對象。而我們都知道new一個對象的開銷是很大的。2010-01-01webpack進(jìn)階——緩存與獨(dú)立打包的用法
本篇文章主要介紹了webpack進(jìn)階——緩存與獨(dú)立打包的用法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08JavaScript實(shí)現(xiàn)定時隱藏與顯示圖片的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)定時隱藏與顯示圖片的方法,可實(shí)現(xiàn)javascript定時關(guān)閉圖片的功能,涉及javascript針對頁面元素屬性定時操作的相關(guān)技巧,需要的朋友可以參考下2015-08-08