24个ES6方法解决JS实际开发问题(小结)


Posted in Javascript onMay 31, 2020

本文主要介绍 24 中 es6 方法,这些方法都挺实用的,本本请记好,时不时翻出来看看。

1、如何隐藏所有指定的元素:

const hide = (el) => Array.from(el).forEach(e => (e.style.display = 'none'));

// 事例:隐藏页面上所有`<img>`元素?
hide(document.querySelectorAll('img'))

2、如何检查元素是否具有指定的类 ?
页面DOM里的每个节点上都有一个 classList 对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类;使用 classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类;

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

// 事例
hasClass(document.querySelector('p.special'), 'special') // true

3.如何切换一个元素的类 ?

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

// 事例 移除 p 具有类`special`的 special 类
toggleClass(document.querySelector('p.special'), 'special')

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

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

// 事例
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);
 }
}

// 事例
scrollToTop()

window.requestAnimationFrame()  告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行。

requestAnimationFrame:优势:由系统决定回调函数的执行时机。60Hz的刷新频率,那么每次刷新的间隔中会执行一次回调函数,不会引起丢帧,不会卡顿。

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

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

// 事例
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;
};

// 事例
elementIsVisibleInViewport(el); // 需要左右可见
elementIsVisibleInViewport(el, true); // 需要全屏(上下左右)可以见

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

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

// 事例:includeDuplicates 为 true 表示需要排除重复元素
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';

// 事例
detectDeviceType(); // "Mobile" or "Desktop"

10.How to get the current URL ?

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

// 事例
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),
  {}
 );

// 事例
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
  }),
  {}
 );

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

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'
); 

// 1秒后打印 'later'

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

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

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

自定义事件的函数有 Event、CustoEvent 和 dispatchEvent;

// 向 window 派发一个resize内置事件
window.dispatchEvent(new Event('resize'))


// 直接自定义事件,使用 Event 构造函数:
var event = new Event('build');
var elem = document.querySelector('#id')
// 监听事件
elem.addEventListener('build', function (e) { ... }, false);
// 触发事件.
elem.dispatchEvent(event);

CustomEvent 可以创建一个更高度自定义事件,还可以附带一些数据,具体用法如下:

var myEvent = new CustomEvent(eventname, options);
其中 options 可以是:
{
 detail: {
  ...
 },
 bubbles: true,  //是否冒泡
 cancelable: false //是否取消默认事件
}

其中 detail 可以存放一些初始化的信息,可以在触发的时候调用。其他属性就是定义该事件是否具有冒泡等等功能。

内置的事件会由浏览器根据某些操作进行触发,自定义的事件就需要人工触发。 dispatchEvent 函数就是用来触发某个事件:

element.dispatchEvent(customEvent);
上面代码表示,在 element 上面触发 customEvent 这个事件。
  // add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });
 
// create and dispatch the event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);

使用自定义事件需要注意兼容性问题,而使用 jQuery 就简单多了:

// 绑定自定义事件
$(element).on('myCustomEvent', function(){});
 
// 触发事件
$(element).trigger('myCustomEvent');
// 此外,你还可以在触发自定义事件时传递更多参数信息:
 
$( "p" ).on( "myCustomEvent", function( event, myName ) {
 $( this ).text( myName + ", hi there!" );
});
$( "button" ).click(function () {
 $( "p" ).trigger( "myCustomEvent", [ "John" ] );
});

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);

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(', ');
};

// 事例
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);

// 事例
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
); 

// {"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
); 

// {"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;
};

// 事例
counter('#my-id', 1, 1000, 5, 2000); 
// 让 `id=“my-id”`的元素创建一个2秒计时器

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

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);
 }
};

// 事例
copyToClipboard('Lorem ipsum'); 
// 'Lorem ipsum' copied to clipboard

23.如何确定页面的浏览器选项卡是否聚焦 ?

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

// 事例
isBrowserTabFocused(); // true

24. 如何创建目录 (如果不存在) ?

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

// 事例
createDirIfNotExists('test');

这里面的方法都挺实用的,可以解决很多开发过程问题,大家就好好利用起来吧 !

到此这篇关于24个ES6方法解决JS实际开发问题的文章就介绍到这了,更多相关ES6方法解决实际开发内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
vue keep-alive请求数据的方法示例
May 16 Javascript
公众号SVG动画交互实战代码
May 31 #Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 #Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 #Javascript
详解Typescript 内置的模块导入兼容方式
May 31 #Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 #Javascript
JQuery获得内容和属性方法解析
May 30 #jQuery
JavaScript Window浏览器对象模型原理解析
May 30 #Javascript
You might like
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
PHP的全局错误处理详解
2016/04/25 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Python发展简史 Python来历
2019/05/14 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
pytorch梯度剪裁方式
2020/02/04 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
大学生通用个人的自我评价
2014/02/10 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
安全温馨提示语大全
2015/07/14 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang