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

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

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

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

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

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.

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

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

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

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

const currentURL = () => window.location.href // example currentURL() // 'https://google.com' Copy code

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'); // getURLParameters('google.com'); // {} Copy code

const formToObject = form => Array.from(new FormData(form)).reduce( (acc, [key, value]) => ({ ...acc, [key]: value }), {} ); // example formToObject(document.querySelector('#form')); // { email: '[email protected]', name: 'Test Name' } Copy code

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

const delay = (fn, wait, ...args) => setTimeout(fn, wait, ...args); delay( function(text) { console.log(text); }, 1000, 'later' ); // Print in 1 second 'later' Copy code

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:

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:

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

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

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]) => `$ $$`) .join(', '); }; // example formatDuration(1001); // '1 second, 1 millisecond' formatDuration(34325055574); // '397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds' Copy code

const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24); // example getDaysDiffBetweenDates(new Date('2017-12-13'), new Date('2017-12-22')); // 9 Copy code

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

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

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

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

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

12 June 2020, 00:54 | Views: 5198