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 时间显示效果代码
Aug 23 Javascript
使用js正则控制input标签只允许输入的值
Jul 29 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
js尾调用优化的实现
May 23 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 Javascript
JavaScript实现简单拖拽效果
Sep 15 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
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
详谈javascript异步编程
2016/02/21 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
某公司.Net方向面试题
2014/04/24 面试题
《桃花心木》教学反思
2014/02/17 职场文书
老公保证书范文
2014/04/29 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
中学推普周活动总结
2015/05/07 职场文书
创业计划书之美甲店
2019/09/20 职场文书
HTML基本元素标签介绍
2022/02/28 HTML / CSS
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android
nginx rewrite功能使用场景分析
2022/05/30 Servers