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 相关文章推荐
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
React中的Context应用场景分析
Jun 11 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
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
PHP学习之数组值的操作
2011/04/17 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
firebug的一个有趣现象介绍
2011/11/30 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
vue快捷键与基础指令详解
2017/06/01 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
js自定义input文件上传样式
2018/10/26 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
Python实现获取命令行输出结果的方法
2017/06/10 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
python基于SMTP协议发送邮件
2019/05/31 Python
keras 读取多标签图像数据方式
2020/06/12 Python
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
北大青鸟学生求职信
2013/09/24 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
老员工辞职信范文
2015/05/12 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
Python实现滑雪小游戏
2021/09/25 Python