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 相关文章推荐
javascript中自定义对象的属性方法分享
Jul 12 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
微信小程序实现签到弹窗动画
Sep 21 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
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
JS实现判断移动端PC端功能
2020/02/21 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
JS轮播图的实现方法2
2020/08/25 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
跟老齐学Python之做一个小游戏
2014/09/28 Python
python实现的简单文本类游戏实例
2015/04/28 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python paramiko模块的使用示例
2018/04/11 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
python re的findall和finditer的区别详解
2020/11/15 Python
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
个人简历中的自我评价怎么写
2014/01/26 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
详解非极大值抑制算法之Python实现
2021/06/28 Python