Teach you how to use 24 ES6 methods to solve the JS problem of actual development? Detailed explanation of this article

This article mainly introduces es6 method in 24, these methods are very practical. Please remember this book and turn it out from time to time.

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'))
Copy code

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 I am a senior front-end veteran who started in 2008. If you have any questions or exchange experience, you can enter my button down skirt 519293536. I will try my best to help you

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')
Copy code

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}
Copy code

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()
Copy code

window.requestAnimationFrame() tell the browser that you want to execute an animation and ask the browser to update the animation before calling the specified callback function before the 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
Copy code

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
Copy code

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

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

Copy code

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"

Copy code

10.How to get the current URL?

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

// example
currentURL() // 'https://google.com'
Copy code

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'); // {}
Copy code

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

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']
Copy code

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 in 1 second 'later'
Copy code

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' });
Copy code

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')
// Listening events
elem.addEventListener('build', function (e) { ... }, false);
// Trigger event
elem.dispatchEvent(event);
Copy code

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, / / bubble
  cancelable: false / / cancel the default event or not
}
Copy code

detail 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 events will be triggered by the browser according to certain operations, and the customized events need to be triggered manually. The dispatchEvent function is used to trigger an event:

element.dispatchEvent(customEvent);
Copy code

The above code indicates that the customEvent event 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" ] );
});
Copy code

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

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'
Copy code

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
Copy code

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"}
Copy code

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"}
Copy code

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

Copy code

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

Copy code

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

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

//Examples
isBrowserTabFocused(); // true
 Copy code

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

Most of the methods are practical and can solve many development process problems. Let's make good use of them.

The bugs that may exist after code deployment can't be known in real time. In order to solve these bugs afterwards, a lot of time has been spent on log debugging. Here is a good BUG monitoring tool recommended by the way Fundebug.

dev.to/madarsbiss/... I think I wrote well. Remember: I am a senior front-end veteran who started in 2008. If you have any questions or exchange experience, you can enter my button skirt 519293536. I will try my best to help you

The text and pictures of this article come from the Internet and my own ideas. They are only for learning and communication. They have no commercial use. The copyright belongs to the original author. If you have any questions, please contact us in time for handling

Tags: Javascript Mobile Google JSON Android

Posted on Fri, 12 Jun 2020 00:54:55 -0400 by d~l