24个解决实际问题的ES6代码片段(小结)


Posted in Javascript onFebruary 02, 2020

这是从30 seconds of code中挑出来的非常有用的一些代码片段,这是一个非常棒的项目,大家可以去github上去搜索一下,给个star。

在本文中,我试图根据它们的实际用途对它们进行分类,回答您在项目中可能遇到的常见问题:

1.如何隐藏指定的所有元素?

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));

// Example
hide(document.querySelectorAll('img')); // Hides all <img> elements on the page

2.如何检查元素是否具有指定的类?

const hasClass = (el, className) => el.classList.contains(className);

// Example
hasClass(document.querySelector('p.special'), 'special'); // true

3.如何为元素切换类?

const toggleClass = (el, className) => el.classList.toggle(className);

// Example
toggleClass(document.querySelector('p.special'), 'special'); 
// The paragraph will not have the 'special' class anymore

这里使用了classList.toggle()方法

toggle( String [, force] )

当只有一个参数时:切换类值;也就是说,即如果类值存在,则删除它并返回 false,如果不存在,则添加它并返回 true。
当存在第二个参数时:若第二个参数的执行结果为 true,则添加指定的类值,若执行结果为 false,则删除它。

4.如何获取当前页面的滚动位置?

const getScrollPosition = (el = window) => ({
 x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
 y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});

// Example
getScrollPosition(); // {x: 0, y: 200}

5.如何平滑滚动到页面顶部?

const scrollToTop = () => {
 const c = document.documentElement.scrollTop || document.body.scrollTop;
 if (c > 0) {
 window.requestAnimationFrame(scrollToTop);
 window.scrollTo(0, c - c / 8);
 }
};

// Example
scrollToTop();

递归的方法不断调用使用scrollToTop(),requestAnimationFrame方法告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。它的回调函数执行次数通常与浏览器屏幕刷新次数相匹配,所以效果会比较平滑。

获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop

获取当前页面滚动条横坐标的位置:document.body.scrollLeft与document.documentElement.scrollLeft

6.如何检查父元素是否包含子元素?

const elementContains = (parent, child) => parent !== child && parent.contains(child);

// Examples
elementContains(document.querySelector('head'), document.querySelector('title')); 
// true
elementContains(document.querySelector('body'), document.querySelector('body')); // false

7.如何检查指定的元素在视口中是否可见?

const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
 const { top, left, bottom, right } = el.getBoundingClientRect();
 const { innerHeight, innerWidth } = window;
 return partiallyVisible
 ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
  ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
 : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};

// Examples
elementIsVisibleInViewport(el); // (not fully visible)
elementIsVisibleInViewport(el, true); // (partially visible)

传入partiallyVisible参数,区分判断是是部分可见还是全部可见。

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

8.如何获取元素中的所有图像?

const getImages = (el, includeDuplicates = false) => {
 const images = [...el.getElementsByTagName('img')].map(img => img.getAttribute('src'));
 return includeDuplicates ? images : [...new Set(images)];
};

// Examples
getImages(document, true); // ['image1.jpg', 'image2.png', 'image1.png', '...']
getImages(document, false); // ['image1.jpg', 'image2.png', '...']

9.如何确定设备是移动设备还是台式机/笔记本电脑?

const detectDeviceType = () =>
 /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
 ? 'Mobile'
 : 'Desktop';

// Example
detectDeviceType(); // "Mobile" or "Desktop"

10.如何获取当前URL

const currentURL = () => window.location.href;

// Example
currentURL(); // 'https://google.com'

11.如何创建包含当前URL参数的对象?

const getURLParameters = url =>
 (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
 (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
 {}
 );

// Examples
getURLParameters('http://url.com/page?n=Adam&s=Smith'); // {n: 'Adam', s: 'Smith'}
getURLParameters('google.com'); // {}

12.如何将一组表单元素编码为对象?

const formToObject = form =>
 Array.from(new FormData(form)).reduce(
 (acc, [key, value]) => ({
  ...acc,
  [key]: value
 }),
 {}
 );

// Example
formToObject(document.querySelector('#form')); // { email: 'test@email.com', name: 'Test Name' }

Array.from方法用于将两类对象转为真正的数组。类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
reducer 函数接收4个参数:

  • Accumulator (acc) (累计器)
  • Current Value (cur) (当前值)
  • Current Index (idx) (当前索引)
  • Source Array (src) (源数组)

13.如何从对象中检索出给定的一组属性?

const get = (from, ...selectors) =>
 [...selectors].map(s =>
 s
  .replace(/\[([^\[\]]*)\]/g, '.$1.')
  .split('.')
  .filter(t => t !== '')
  .reduce((prev, cur) => prev && prev[cur], from)
 );
const obj = { selector: { to: { val: 'val to select' } }, target: [1, 2, { a: 'test' }] };

// Example
get(obj, 'selector.to.val', 'target[0]', 'target[2].a'); // ['val to select', 1, 'test']

14.延迟调用提供的函数(以毫秒为单位)

const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args);
delay(
 function(text) {
 console.log(text);
 },
 1000,
 'later'
); 

// Logs 'later' after one second.

15.如何在给定元素上触发特定事件,并可选地传递自定义数据?

const triggerEvent = (el, eventType, detail) =>
 el.dispatchEvent(new CustomEvent(eventType, { detail }));

// Examples
triggerEvent(document.getElementById('myId'), 'click');
triggerEvent(document.getElementById('myId'), 'click', { username: 'bob' });

构造方法 CustomerEvent() 创建一个新的 CustomEvent 对象。
CustomEvent 事件是由程序创建的,可以有任意自定义功能的事件。

16.如何从元素中移除事件侦听器?

const off = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts);

const fn = () => console.log('!');
document.body.addEventListener('click', fn);
off(document.body, 'click', fn); // no longer logs '!' upon clicking on the page

17.将给定的毫秒数转换为可读格式

const formatDuration = ms => {
 if (ms < 0) ms = -ms;
 const time = {
 day: Math.floor(ms / 86400000),
 hour: Math.floor(ms / 3600000) % 24,
 minute: Math.floor(ms / 60000) % 60,
 second: Math.floor(ms / 1000) % 60,
 millisecond: Math.floor(ms) % 1000
 };
 return Object.entries(time)
 .filter(val => val[1] !== 0)
 .map(([key, val]) => `${val} ${key}${val !== 1 ? 's' : ''}`)
 .join(', ');
};

// Examples
formatDuration(1001); // '1 second, 1 millisecond'
formatDuration(34325055574); // '397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds'

18.如何得到两个日期之间的差异(以天为单位)

const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
 (dateFinal - dateInitial) / (1000 * 3600 * 24);

// Example
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9

19.如何对传递的URL发出GET请求

const httpGet = (url, callback, err = console.error) => {
 const request = new XMLHttpRequest();
 request.open('GET', url, true);
 request.onload = () => callback(request.responseText);
 request.onerror = () => err(request);
 request.send();
};

httpGet(
 'https://jsonplaceholder.typicode.com/posts/1',
 console.log
); 

// Logs: {"userId": 1, "id": 1, "title": "sample title", "body": "my text"}

20.如何对传递的URL发出POST请求?

const httpPost = (url, data, callback, err = console.error) => {
 const request = new XMLHttpRequest();
 request.open('POST', url, true);
 request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
 request.onload = () => callback(request.responseText);
 request.onerror = () => err(request);
 request.send(data);
};

const newPost = {
 userId: 1,
 id: 1337,
 title: 'Foo',
 body: 'bar bar bar'
};
const data = JSON.stringify(newPost);
httpPost(
 'https://jsonplaceholder.typicode.com/posts',
 data,
 console.log
); 

// Logs: {"userId": 1, "id": 1337, "title": "Foo", "body": "bar bar bar"}

21. 如何为指定的选择器创建具有指定范围、步骤和持续时间的计数器?

const counter = (selector, start, end, step = 1, duration = 2000) => {
 let current = start,
 _step = (end - start) * step < 0 ? -step : step,
 timer = setInterval(() => {
  current += _step;
  document.querySelector(selector).innerHTML = current;
  if (current >= end) document.querySelector(selector).innerHTML = end;
  if (current >= end) clearInterval(timer);
 }, Math.abs(Math.floor(duration / (end - start))));
 return timer;
};

// Example
counter('#my-id', 1, 1000, 5, 2000); // Creates a 2-second timer for the element with id="my-id"

22.如何将字符串复制到剪贴板

const copyToClipboard = str => {
 const el = document.createElement('textarea');
 el.value = str;
 el.setAttribute('readonly', '');
 el.style.position = 'absolute';
 el.style.left = '-9999px';
 document.body.appendChild(el);
 const selected =
 document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
 el.select();
 document.execCommand('copy');
 document.body.removeChild(el);
 if (selected) {
 document.getSelection().removeAllRanges();
 document.getSelection().addRange(selected);
 }
};

// Example
copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.

document.getSelection()返回一个  Selection 对象,表示用户选择的文本范围或光标的当前位置。

23.判断页面的浏览器选项卡是否聚焦

const isBrowserTabFocused = () => !document.hidden;

// Example
isBrowserTabFocused(); // true

24.如果不存在目录,则如何创建

const fs = require('fs');
const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);

// Example
createDirIfNotExists('test'); // creates the directory

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用js获取QueryString的方法小结
Feb 28 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
js实现微信分享代码
Oct 11 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
js和jquery中获取非行间样式
May 05 jQuery
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
浅谈vuex为什么不建议在action中修改state
Feb 02 #Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 #Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 #Javascript
node 版本切换的实现
Feb 02 #Javascript
vue路由缓存的几种实现方式小结
Feb 02 #Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 #Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 #Javascript
You might like
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
PHP7 新增常量
2021/03/09 PHP
Avengerls vs KG BO3 第二场2.18
2021/03/10 DOTA
常用简易JavaScript函数
2009/04/09 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
图书馆标语
2014/06/19 职场文书
超市创意活动方案
2014/08/15 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers