写点什么

提升 JS 编程效率:19 个实用 JS 代码示例

作者:南城FE
  • 2023-11-22
    广东
  • 本文字数:2854 字

    阅读完需:约 9 分钟

本文翻译自 19 Practical ES6 Snippets to Solve Common JS Problems,作者: Madza, 略有删改。


在实际工作中,开发者常面临一些需巧妙编程解决的挑战。有时几行代码就能迎刃而解。本文整理了一系列实用代码片段,助您轻松处理 URL、DOM 操作、事件处理、日期处理以及用户偏好设置等常见问题。


这些精选代码片段均源自“30 seconds of code”——一个卓越的编程资源库。我强烈推荐您查阅其完整代码,以获得更多灵感。


选择这些代码片段的首要准则是它们的实用性。希望您能在这里发现宝贵的资源,并将其应用于未来的项目中,以提升编程效率和质量。

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'); // trueisAbsoluteURL('ftp://www.myserver.net'); // trueisAbsoluteURL('/foo/bar'); // false
复制代码

3.如何获取 URL 参数作为对象?

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'));// trueelementContains(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 fooBarsmoothScroll('.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 modefullscreen(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'); // trueisDateValid('1995-12-17T03:24:00'); // trueisDateValid('1995-12-17 T03:24:00'); // falseisDateValid('Duck'); // falseisDateValid(1995, 11, 17); // trueisDateValid(1995, 11, 17, 'Duck'); // falseisDateValid({}); // 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
复制代码


在这篇文章中,我们列举了一些精心挑选的代码片段来解决开发过程中的常见挑战。这些代码片段涵盖了处理 URL、DOM 操作、事件处理、日期处理和用户偏好设置等多个方面,旨在提供简洁而高效的解决方案。希望你能在日常工作中找到并应用这些有价值的代码片段,从而提升编程效率和质量。




看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~


专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

发布于: 刚刚阅读数: 4
用户头像

南城FE

关注

公众号@南城大前端 2019-02-12 加入

专注前端开发,分享前端知识

评论

发布
暂无评论
提升JS编程效率:19个实用JS代码示例_JavaScript_南城FE_InfoQ写作社区