提升JS編程效率的19個實用技巧分享
更新時間：2023年11月27日 09:59:15 作者：南城FE
在實際工作中,開發(fā)者常面臨一些需巧妙編程解決的挑戰(zhàn),有時幾行代碼就能迎刃而解,本文整理了一系列實用代碼片段,助您輕松處理URL、DOM操作、事件處理等常見問題,希望對大家有所幫助
在實際工作中，開發(fā)者常面臨一些需巧妙編程解決的挑戰(zhàn)。有時幾行代碼就能迎刃而解。本文整理了一系列實用代碼片段，助您輕松處理URL、DOM操作、事件處理、日期處理以及用戶偏好設置等常見問題。
這些精選代碼片段均源自“30 seconds of code”——一個卓越的編程資源庫。我強烈推薦您查閱其完整代碼，以獲得更多靈感。
選擇這些代碼片段的首要準則是它們的實用性。希望您能在這里發(fā)現(xiàn)寶貴的資源，并將其應用于未來的項目中，以提升編程效率和質量。
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.如何將文本復制到剪貼板
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.如何查看當前用戶的首選語言
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.如何檢查設備是否支持觸摸事件
const supportsTouchEvents = () => window && 'ontouchstart' in window; supportsTouchEvents(); // true
在這篇文章中，我們列舉了一些精心挑選的代碼片段來解決開發(fā)過程中的常見挑戰(zhàn)。這些代碼片段涵蓋了處理URL、DOM操作、事件處理、日期處理和用戶偏好設置等多個方面，旨在提供簡潔而高效的解決方案。希望你能在日常工作中找到并應用這些有價值的代碼片段，從而提升編程效率和質量。
到此這篇關于提升JS編程效率的19個實用技巧分享的文章就介紹到這了,更多相關JS技巧內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了微信小程序如何使用云開發(fā)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要給大家介紹了關于Javascript中將變量轉換為字符串的三種方法，這三種方法分別是：value.toString()、"" + value和String(value)，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧。2017-09-09
BootStrap下拉菜單和滾動監(jiān)聽插件實現(xiàn)代碼
這篇文章主要介紹了BootStrap下拉菜單和滾動監(jiān)聽插件實現(xiàn)代碼的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細介紹了js+html+css實現(xiàn)手動輪播和自動輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要給大家介紹了關于TypeScript中方法重載的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用TypeScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
這篇文章主要介紹了JavaScript截取字符串的2個函數(shù)介紹,它們分別是substring和substr函數(shù),本文用實例講解了它們的用法,需要的朋友可以參考下2014-08-08
javascript 自動轉到命名錨記,方面業(yè)內控制導航等信息2009-01-01
javascript 構建一個xmlhttp對象池合理創(chuàng)建和使用xmlhttp對象
在我的這篇舊文里曾經(jīng)發(fā)布了一個簡單的ajax操作類。我們發(fā)現(xiàn)，在舊文里創(chuàng)建xmlhttp對象的時候，每次都要new一個對象。而我們都知道new一個對象的開銷是很大的。2010-01-01
本篇文章主要介紹了webpack進階——緩存與獨立打包的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
JavaScript實現(xiàn)定時隱藏與顯示圖片的方法
這篇文章主要介紹了JavaScript實現(xiàn)定時隱藏與顯示圖片的方法,可實現(xiàn)javascript定時關閉圖片的功能,涉及javascript針對頁面元素屬性定時操作的相關技巧,需要的朋友可以參考下2015-08-08