以下是一些有用的JavaScript代碼片段，任何前端/web開發人員都可以將其添加到其應用程序中並在日常開發中使用。
許多片段都是單線的，易於理解，可以添加到任何web開發前端項目中。
隨着JavaScript的不斷變化，創建可重複使用的方法是很重要的，所以如果有任何變化，你只需要在一個地方改變它。希望下面的列表中至少有一個可以幫助您創建一些自己的可重用方法!
1. 獲取作爲數字的輸入值
const checkMyValueType = (event) = > {
console.log(typeof event.target.value) // string
console.log(typeof event.target. * * valueAsNumber * * ) // number
}
2. 將輸入複製到剪貼板
function copyToClipboard(inputID) {
navigator.clipboard.writeText(document.querySelector(inputID).value);
}
3. 檢查瀏覽器的 tab 是否在視圖中
const isBrowserTabInView = () = > document.hidden;
isBrowserTabInView(); // returns true or false depending if tab is in view / focus
4. 將bool類型的值更改爲相反的值
let myBool = false;myBool = !myBool;
console.log(myBool); // true
myBool = !myBool;
console.log(myBool); // false
5. 檢查給定數字是否爲偶數
const isEven = num => num % 2 === 0;
console.log(isEven(2)) // true
console.log(isEven(3)) // false
6. 檢查日期是否爲工作日
const isWeekday = d => d.getDay() % 6 !== 0;
console.log(isWeekday(new Date(2021, 0, 11))); // true (Monday)
console.log(isWeekday(new Date(2021, 0, 10))); // false (Sunday)
7. 向日期添加天數
const addDaysToDate = (date, n) => {
date.setDate(date.getDate() + n);
return date.toISOString().split('T')[0];
};
addDaysToDate('2021-0-10', 10); // "2021-01-20"
addDaysToDate('2021-0-10', -10); // '2020-12-31'
8. 從日期中獲取時間
const timeFromDate = date => date.toTimeString().slice(0, 8);
console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); // "17:30:00"
console.log(timeFromDate(new Date(2021, 0, 10, 5, 56, 44))); // "05:56:44"
9. 計算兩個日期之間的工作日數
const countWeekDaysBetween = (startDate, endDate) = > Array.from({
length: (endDate - startDate) / (1000 * 3600 * 24)
}).reduce(count = > {
if (startDate.getDay() % 6 !== 0) {
count++;
}
startDate = new Date(startDate.setDate(startDate.getDate() + 1));
return count;
}, 0);
countWeekDaysBetween(new Date(2021, 0, 10), new Date(2021, 0, 20)); // 7
countWeekDaysBetween(new Date(2021, 1, 10), new Date(2021, 2, 18)); // 26
10. 檢查是否啓用了本地存儲
const isLocalStorageEnabled = () => {
try {
const key = `__storage__test`;
window.localStorage.setItem(key, null);
window.localStorage.removeItem(key);
return true;
} catch (e) {
return false;
}
};
isLocalStorageEnabled(); // true, 如果 localStorage 可使用
11. 檢查某件事花了多長時間
var startTime = performance.now();
anyMethodOrCode();
const endTime = performance.now();
console.log(endTime - startTime + " milliseconds."); // (Time in milliseconds)
12. 捕捉右點擊
window.oncontextmenu = () => {
console.log('right click');
}
13. 僅觸發事件偵聽器一次
const myButton = document.getElementById("myBtn");
const myClickFunction = () => {
console.log('this click will only get called once')
}
myButton.addEventListener('click', myClickHandler, {
once: true,
});
14. 滾動到頁面頂部
const scrollToTopOfDocument = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
};
scrollToTopOfDocument();
15. 檢查字符串是否爲大寫
const isUpperCase = str => str === str.toUpperCase();
console.log(isUpperCase("string")); // false
console.log(isUpperCase("STRING")); // true
console.log(isUpperCase("5TR1NG")); // true
16. 檢查給定元素是否處於焦點
const elementIsInFocus = el => (el === document.activeElement);
elementIsInFocus(anyElement)// 如果處於處於焦點 就是 true，否則 false
17. 查找數組之間的差異
const differenceInArrays = (array1, array2) => {
const set = new Set(array2);
return array1.filter(x => !set.has(x));
};
differenceInArrays(["apple", "orange", "banana"], ["apple", "orange", "mango"]); // ["banana"]
differenceInArrays([10, 12, 5], [66, 10, 6]); // [12, 5]
18. 從元素中刪除事件監聽器
const removeEventOffElement = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts);
const testFunction = () => console.log('My function has been called');
document.body.addEventListener('click', testFunction);
// 調用 remove 方法
removeEventOffElement(document.body, 'click', fn);
19. 用 Hex 格式產生隨機顏色
const generateRandomColour = () => "#" + Math.floor(Math.random()*16777215).toString(16);
//EXAMPLE
document.getElementsByTagName("body")[0].style.color = generateRandomColour();
20.查找非null的第一個定義參數
const getFirstValidValue = (...values) => values.find(v => ![undefined, null].includes(v));
console.log(getFirstValidValue(null, undefined, 'Hey', null); // 'Hey'
21. 監聽指定元素之外的點擊
const onClickOutsideElement = (element, callback) => {
document.addEventListener('click', e => {
if (!element.contains(e.target)) callback();
});
};
onClickOutside('#some-element', () => console.log('Hey you missed'));
結論
有時使用 JavaScript，開發人員會發現自己一遍又一遍地創建相同的東西，希望上面的一些片段可以在應用程序中重用。
及時瞭解新的 JavaScript 功能和瀏覽器api非常重要。許多開發人員有時會創建過於複雜的方法，因爲他們不知道您可以從瀏覽器 JavaScript 免費獲得什麼。
希望你喜歡閱讀!
翻譯自：Daniel Anderson
文末福利：
福利一：前端，Java，產品經理，微信小程序，Python 等資源合集大放送：
https://www.jianshu.com/u/0f0aea13fdf6
福利二：前後端編程實戰全套詳細視頻教程
原文作者：隨風
技術博客：https://www.jianshu.com/u/0f0aea13fdf6
90 後前端程序員，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。
文末福利：關注「求知編程技術」公衆號 ，在微信後臺回覆「領取資源」，獲取 IT 資源 200G 乾貨大全。公衆號回覆 “1”，拉你進程序員技術討論羣