世界上最伟大的投资就是投资自己的教育

首页JavaScript
随风 · 练气

对每个前端程序员都适用的 21 个 JavaScript 代码片段

随风发布于449 次阅读

以下是一些有用的 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

原文:https://medium.com/javascript-in-plain-english/21-useful-javascript-snippets-for-everyday-development-9e66e33bfb86

文末福利:

福利一:前端,Java,产品经理,微信小程序,Python 等资源合集大放送:
https://www.jianshu.com/u/0f0aea13fdf6

福利二:前后端编程实战全套详细视频教程

原文作者:随风
技术博客:https://www.jianshu.com/u/0f0aea13fdf6

90 后前端程序员,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

文末福利:关注「求知编程技术」公众号 ,在微信后台回复「领取资源」,获取 IT 资源 200G 干货大全。公众号回复 “1”,拉你进程序员技术讨论群

本站文章均为原创内容,如需转载请注明出处,谢谢。

0 条回复
暂无回复~~
喜欢
我的微信官网服务号精品文章订阅号微信视频号
程序员随风
统计信息
    学员: 22263
    视频数量: 1467
    文章数量: 461

© 汕尾市求知科技有限公司 | 专业版网站 | 关于我们 | 在线学员:1150

粤公网安备 44152102000088号粤公网安备 44152102000088号 | 粤ICP备19038915号

Top