24 ES6 methods to solve the JS problem of actual development

1. How to hide all specified elements

const hide = (el) => Array.from(el).forEach(e => (e.style.display = 'none'));
// Example: hide all elements on the page?
hide(document.querySelectorAll('img'))

2. How to check whether the element has the specified class?
There is a classList object on each node in the page DOM. The programmer can add, delete and modify CSS classes on the node by using the methods in it. With classList, programmers can also use it to determine whether a node is given a CSS class.

const hasClass = (el, className) => el.classList.contains(className)
// Example
hasClass(document.querySelector('p.special'), 'special') // true

3. How to switch the class of an element?

const toggleClass = (el, className) => el.classList.toggle(className)
// Case removal p special class with class' special '
toggleClass(document.querySelector('p.special'), 'special')

4. How to get the scroll position of the current page?

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. How to smoothly scroll to the top of the page

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
}

// Example
scrollToTop()

window.requestAnimationFrame() tells the browser that you want to execute an animation and ask the browser to update the animation before calling the specified callback function before next redraw. This method needs to pass in a callback function as a parameter, which will execute before the browser's next redraw.
requestAnimationFrame: advantage: it's up to the system to decide when to execute the callback function. If the refresh frequency is 60Hz, then a callback function will be executed in the interval of each refresh, which will not cause frame loss or jam.
6. How to check whether the parent element contains child elements?

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

// Example
elementContains(document.querySelector('head'), document.querySelector('title')); 
// true
elementContains(document.querySelector('body'), document.querySelector('body')); 
// false

7. How to check whether the specified element is visible in the viewport?

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

// Example
elementIsVisibleInViewport(el); // Need to be visible left and right
elementIsVisibleInViewport(el, true); // Need full screen (up, down, left and right) to see

8. How to get all the images in the element?

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

// Case: if includeDuplicates is true, it means that duplicate elements need to be excluded
getImages(document, true); // ['image1.jpg', 'image2.png', 'image1.png', '...']
getImages(document, false); // ['image1.jpg', 'image2.png', '...']

9. How to determine whether the device is a mobile device or a desktop / laptop computer?

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    ? 'Mobile'
    : 'Desktop';

// Example
detectDeviceType(); // "Mobile" or "Desktop"

10.How to get the current URL?

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

// Example
currentURL() // 'https://google.com'

11. How to create an object containing the current URL parameter?

const getURLParameters = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
    {}
  );

// Example
getURLParameters('http://url.com/page?n=Adam&s=Smith'); // {n: 'Adam', s: 'Smith'}
getURLParameters('google.com'); // {}

12. How to convert a set of form elements into objects?

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' }

13. How to retrieve a set of properties indicated by a given selector from an object?

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. how do I call the supplied function after waiting for the specified time?

const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args);
delay(
  function(text) {
    console.log(text);
  },
  1000,
  'later'
); 

// Print 'later' in 1 second

15. How to trigger a specific event on a given element and optionally transfer custom data?

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

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

The functions of custom events are Event, CustomEvent and dispatchEvent

// Send a resize built-in event to window
window.dispatchEvent(new Event('resize'))
 

// To customize an Event directly, use the Event constructor:
var event = new Event('build');
var elem = document.querySelector('#id')
// Monitoring events
elem.addEventListener('build', function (e) { ... }, false);
// Trigger event
elem.dispatchEvent(event);

CustomEvent can create a higher level custom event, and it can also include some data. The specific usage is as follows:

var myEvent = new CustomEvent(eventname, options);
//Where options can be:
{
  detail: {
    ...
  },
  bubbles: true,    //Is it bubbling?
  cancelable: false //Cancel default event
}

Details can store some initialization information and can be called when triggering. Other properties are to define whether the event has bubbling and other functions.

The built-in event will be triggered by the browser according to some operations, and the customized event needs to be triggered manually. The dispatchEvent function is used to trigger an event:

element.dispatchEvent(customEvent);

The above code indicates that the customEvent event is triggered on the element.

// 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);
//When using custom events, you need to pay attention to compatibility issues, while using jQuery is much easier:

// Binding custom events
$(element).on('myCustomEvent', function(){});
 
// Trigger event
$(element).trigger('myCustomEvent');
// In addition, you can pass more parameter information when a custom event is triggered:
 
$( "p" ).on( "myCustomEvent", function( event, myName ) {
  $( this ).text( myName + ", hi there!" );
});
$( "button" ).click(function () {
  $( "p" ).trigger( "myCustomEvent", [ "John" ] );
});

16. How to remove an event listener from an element?

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. How to obtain a readable format for a given number of milliseconds?

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

// Example
formatDuration(1001); // '1 second, 1 millisecond'
formatDuration(34325055574); 
// '397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds'

18. How to get the difference between two dates (in days)?

const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / (1000 * 3600 * 24);

// Example
getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9

19. How to send a GET request to the passed URL?

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. How to POST the passed URL?

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. How to create a counter with the specified range, step and duration for the specified selector?

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); 
// Let the 'id = "my ID" element create a 2-second timer

22. How to copy a string to the clipboard?

  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

23. How to determine whether the browser tab of the page is focused?

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

// Example
isBrowserTabFocused(); // true

24. How to create a directory (if it does not exist)?

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

// Example
createDirIfNotExists('test'); 
Published 95 original articles, won praise 8, visited 1950
Private letter follow

Tags: Mobile Google JSON Android

Posted on Tue, 10 Mar 2020 06:48:29 -0400 by Robin M