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 相关文章推荐
基于jquery的tab切换 js原理
Apr 01 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
javascript getElementsByClassName实现代码
Oct 11 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
详解jQuery中基本的动画方法
Dec 14 Javascript
extjs简介_动力节点Java学院整理
Jul 17 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
浅谈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
请php正则走开
2008/03/15 PHP
php开发环境配置记录
2011/01/14 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
python基础知识小结之集合
2015/11/25 Python
Python 的内置字符串方法小结
2016/03/15 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python线程中同步锁详解
2018/04/27 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
django 自定义过滤器的实现
2019/02/26 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Python any()函数的使用方法
2019/10/28 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
经典C++面试题一
2016/11/06 面试题
办公室文员岗位职责范本
2014/06/12 职场文书
审美与表现自我评价
2015/03/09 职场文书
行政司机岗位职责
2015/04/10 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python