producto de transferencia es ligeramente neta: http://www.pinlue.com/article/2020/03/0609/599987093418.html
Este documento describe 24 es6 métodos, estos métodos son bastante útiles, recuerde los buenos libros, de vez en cuando volvió a ver.
1. Cómo ocultar todos los elementos especificados
Ocultar const = (el) => Array.from (el) .forEach (e => (e.style.display = 'none')); // caso: Ocultar todos los `<img>` ocultar elementos en la página (? document.querySelectorAll ( 'img')) 2. copia el código de cómo comprobar si el elemento tiene la clase especificada?
página DOM donde cada nodo tiene un ClassList objetos, que los programadores pueden utilizar métodos para agregar, eliminar, clase CSS en el nodo modificado. Uso classList, los programadores también se puede utilizar para determinar si un nodo se le ha dado una clase CSS.
const hasClass = (EL, className) => el.classList.contains (className) // caso hasClass (document.querySelector ( 'p.special'), 'especial') // copia fiel del código 3. ¿Cómo un elemento de conmutación clase?
const toggleClass = (EL, className) => el.classList.toggle (className) casos // eliminar p de las clases `special` clase especial toggleClass (document.querySelector ( 'p.special'), 'especial') Copiar 4. cómo obtener la página de códigos de la posición de desplazamiento actual?
const getScrollPosition = (EL = ventana) => ({x: el.pageXOffset == indefinido el.pageXOffset: el.scrollLeft, y: el.pageYOffset == indefinido el.pageYOffset:!?!? el.scrollTop}); // caso getScrollPosition (); // {x: 0, y: 200}, copiar el código 5. la suavidad de desplazamiento para la parte superior de la página
const scrollToTop = () => {const c = document.documentElement.scrollTop || document.body.scrollTop; si (c> 0) {window.requestAnimationFrame (scrollToTop); window.scrollTo (0, c - c / 8); }} // 事例 scrollToTop () 复制 代码
window.requestAnimationFrame () indica al navegador - que quiere hacer una película, y requiere que el navegador llama a la función de devolución de llamada especificado actualiza la animación antes de la próxima redibujado. El método de ejecución necesidad de pasar una llamada de retorno como un argumento antes de la función de devolución de volver a dibujar una vez en el navegador.
requestAnimationFrame: Ventajas: el momento de la implementación de la función de devolución de llamada es determinada por el sistema. frecuencia de actualización de 60 Hz, por lo que cada vez que se actualizan intervalos llevará a cabo una función de devolución de llamada, no causarán pérdida de fotogramas, no Caton.
6. ¿Cómo comprobar si el elemento primario contiene elementos secundarios?
const elementContains = (padre, niño) => padres == niño && parent.contains (niño) ;! // elementContains de casos (document.querySelector ( 'cabeza'), document.querySelector ( 'titulo')); // trueelementContains (document.querySelector ( 'cuerpo'), document.querySelector ( 'cuerpo')); // falsa copia el código 7. cómo comprobar el elemento especificado es visible en la vista?
const elementIsVisibleInViewport = (EL, partiallyVisible = false) => {const {superior, izquierda, inferior, derecho} = el.getBoundingClientRect (); const {innerHeight, innerWidth} = ventana ;? retorno partiallyVisible ((top> 0 && top < innerHeight) || (abajo> 0 && inferior <innerHeight)) && ((izquierdo> 0 && izquierda <innerWidth) || (derecha> 0 && derecha <innerWidth)): Inicio> = 0 && izquierdo> = 0 && inferior < = innerHeight && derecha <= innerWidth;}; // caso elementIsVisibleInViewport (el); // necesaria para todas pantalla completa (arriba y abajo) se puede ver cómo obtener la 8 copias de los elementos de código; // visible toma sobre elementIsVisibleInViewport (el, true) imagen?
const getImages = (EL, includeDuplicates = falso) => {imágenes const = [... el.getElementsByTagName ( 'img')] mapa (img => img.getAttribute ( 'src')); includeDuplicates retorno imágenes.?: [... Establecer nuevas (imágenes)];}; // ejemplos: includeDuplicates verdadero medio para eliminar elementos duplicados getImages necesarios (documentos, true); // [ 'imagen1.jpg', 'image2.png', 'imagen1. png '' ... '] getImages (documento, false); // [' imagen1.jpg '' image2.png '' ... '] 9. copiar el código para determinar cómo el dispositivo es un dispositivo móvil o de escritorio / portátil?
const detectDeviceType = () => / Android | webOS | iPhone | iPad | iPod | BlackBerry | IEMobile | Opera Mini / i.test (navigator.userAgent)? 'Móvil': 'Escritorio'; // 事例 detectDeviceType (); // "móvil" o "Escritorio" 复制 代码 10.How Obtenga la dirección actual?
const CURRENTURL = () => window.location.href // caso CURRENTURL () // 'https://google.com' Copia el código 11. Cómo crear un objeto que contiene los parámetros de URL actuales?
const getURLParameters = url => (url.match (/ ([^? = &] +) (= ([^ &] *)) / g) || []). reducir ((a, v) => ( (una [v.slice (0, v.indexOf ( '='))] = v.slice (v.indexOf ( '=') + 1)), a), {}); // getURLParameters de caso ( ' http://url.com/page?n=Adam&s=Smith '); // {n:' Adam 'es:' Smith '} getURLParameters (' google.com '); // {} copiar el código 12. cómo un grupo de elementos de formulario en un objeto?
const = formToObject forma => Array.from (nueva FormData (forma)) reducir ((ACC, [clave, valor]) => ({... ACC, [clave]: valor}), {}) ;. / / caso formToObject (document.querySelector ( '# forma')); // {correo electrónico: '[email protected]', nombre: 'nombre de la técnica'} dado instrucciones para copiar el código de selección 13. cómo recuperar objetos de una las propiedades del grupo?
const = get (de, ... selectores) => [... selectores] .map (s => s .replace (/ \ [([^ \ [\]] *) \] / g,'. $ 1 . ') .split ('. '!) .Filter (t => t ==' ') .reduce ((ant, act) => prev prev && [act], a partir de)); const obj = {selectora: {a: {val: 'val para seleccionar'}}, objetivo: [1, 2, {a: 'test'}]}; // Exampleget (obj, 'selector.to.val', 'objetivo [0] '' objetivo [2] .a '); // [' val para seleccionar '1,' test '] copiar el código 14. cómo llamar funciones proporcionadas después del tiempo especificado?
retraso const = (fn, espera, ... args) => setTimeout (fn, espera, ... args); retardo (función (texto) {console.log (texto);}, 1000, 'más tarde'); // después de 1 seg Imprimir 'más tarde' copiar el código 15. Cómo activar un evento específico en un elemento dado y puede elegir para pasar datos personalizados?
const triggerEvent = (EL, eventType, detalle) => el.dispatchEvent (nueva CustomEvent (eventType, {detail})); // 事例 triggerEvent (document.getElementById ( 'myId'), 'clic'); triggerEvent (documento. getElemenById ( 'myId'), 'click', {nombre de usuario: 'bob'}); 复制 代码
la función personalizada de eventos tiene Evento, CustomEvent y dispatchEvent
// para distribuir un evento de cambio de tamaño de ventana construida window.dispatchEvent (nuevo evento ( 'redimensionamiento')) // eventos personalizados directamente, usando el constructor de evento: var = nuevo evento ( 'build'); var elem = document.querySelector ( '#id') // detector de eventos elem.addEventListener ( 'construir', la función (e) {...}, false); // evento de disparo .elem.dispatchEvent (evento); código duplicado
CustomEvent puede crear un evento personalizado más altamente integrado, junto con se utilizan algunos de los datos de la siguiente manera:
var = new MyEvent CustomEvent (nombre_evento, opciones); donde las opciones pueden ser: {detalle: {...}, burbujas: true, // si burbujeante cancelable: false // si desea cancelar el evento predeterminado} Y
Que detallan algunos datos de inicialización se puede almacenar, puede llamar cuando se activa. Otros atributos que definen si el evento ha burbujeante y más.
Built-in evento se produce sobre la base de ciertas acciones por parte del navegador, eventos personalizados tendrán que activar manualmente. dispatchEvent función se utiliza para activar un evento:
element.dispatchEvent (customEvent); código duplicado
El código anterior indica que, en caso de que el elemento desencadenantes customEvent anteriormente.
// añadir una listenerobj.addEventListener apropiada evento ( "gato", la función (e) {proceso (e.detail)}); // crear y distribuir el evento eventvar = new CustomEvent ( "gato", { "detalle": { "hazcheeseburger": true}}); obj.dispatchEvent (evento); eventos utilización personalizados a los problemas de compatibilidad nota durante el uso de jQuery es mucho más simple: // enlazar eventos personalizados $ (elemento) .en ( 'myCustomEvent 'function () {}); // evento de disparo $ (elemento) .trigger (' myCustomEvent '); // Además, usted puede pasar más información de parámetros cuando el evento desencadenado personalizada: $ ( "p") .en ( "myCustomEvent", function (event, myName) {$ (este) .text (myName +", ¡Hola! ");}); $ ( "botón") .click (function () {$ (" p ") .trigger (" myCustomEvent "[" John "]);}); 16. Cómo copiar el código para eliminar el detector de eventos desde el elemento?
const apagado = (EL, evt, fn, opta = falso) => el.removeEventListener (EVT, fn, opta); const fn = () => console.log ( ''); document.body.addEventListener ( ' click 'fn); apagado (document.body,' clic', fn); código duplicado 17. cómo obtener un número determinado de milisegundos formato legible?
EM => ms {si (ms <0) const FormatDuration = = -ms; tiempo const = {día: Math.floor (ms / 86400000), hora: Math.floor (ms / 3600000)% 24, minutos: Math. piso (ms / 60000)% 60, segundo: Math.floor (ms / 1000)% 60, milisegundo: Math.floor (ms)% 1,000}; retorno Object.entries (tiempo) .Filter (val => val [1 !] == 0) .map (([clave, val]) => `$ {val} $ {key} $ {! val == 1 's' :? ''} ') .join ( '' );}; // caso FormatDuration (1001); // '1 segundo, 1 millisecond'formatDuration (34325055574); //' 397 días, 6 horas, 44 minutos, 15 segundos, 574 milisegundos copiar el código 18. cómo llegar la diferencia entre las dos fechas (en días)?
const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24); // Caso getDaysDiffBetweenDates (new Date ( '13/12/2017'), new Date ( '12/22/2017 ')); // copiar el código 9 19. Cómo presentar una petición GET pasa una URL?
const HTTPGet = (url, callback, err = console.error) => {petición const = new XMLHttpRequest (); request.open ( 'GET', url, true); request.onload = () => devolución de llamada (request.responseText); request.onerror = () => err (petición); request.send ();}; HTTPGet ( 'https://jsonplaceholder.typicode.com/posts/1', console.log); // { "ID de usuario": 1, "id": 1, "title": "título de ejemplo", "cuerpo": "mi texto"} 复制 代码 20. 如何 对 传递 的 URL 发出 POSTAL 请求?
const HttpPost = (url, datos, devolución de llamada, err = console.error) => {petición const = new XMLHttpRequest (); request.open ( 'post', url, true); request.setRequestHeader ( 'Content-type', 'application / json; charset = utf-8'); request.onload = () => devolución de llamada (request.responseText); request.onerror = () => err (petición); request.send (datos);}; const newPost = {userId: 1, ID: 1337, título: 'Foo', el cuerpo: 'bar bar bar'}; datos const = JSON.stringify (newPost); HttpPost ( 'https://jsonplaceholder.typicode.com/ mensajes, datos, console.log); // { "id de usuario": 1, "Identificación" 1337, "title": "Foo", "cuerpo": "bar bar bar"} 21. copia el código para especificar cómo crear un selector con la gama, el tamaño de paso especificado y la duración del contador?
contador const = (selector, inicio, fin, paso = 1, la duración = 2,000) => {permiten = corriente de arranque, _step = (final - inicial) * paso <0 -paso: paso, timer = setInterval (() =? > {actual + = _step; document.querySelector (selector) .innerHTML = corriente; si (actual> = fin) document.querySelector (selector) .innerHTML = fin, si (actual> = fin) clearInterval (temporizador);}, Math.abs ((Math.floor duración / (final - inicial)))); temporizador de retorno;}; // contador de instancias ( '# mi-id', 1, 1000, 5, 2000); // marca Identificación del ` = "mi-id" `elementos para crear un temporizador de 2 segundos 22. cómo copiar el código al portapapeles para copiar la cadena?
const el = document.createElement ( 'textarea'); el.value = str; el.setAttribute ( 'sólo lectura', ''); el.style.position = 'absoluta'; el.style.left = '-9999px' ; document.body.appendChild (el); const selecciona = document.getSelection () rangeCount> 0 document.getSelection () getRangeAt (0):.?. false; el.select (); Document.ExecCommand ( 'copia') ; document.body.removeChild (el); si (seleccionado) {document.getSelection () removeAllRanges () ;. document.getSelection () AddRange (seleccionado) ;.}}; // caso CopyToClipboard ( 'Lorem ipsum'); // 'Lorem Ipsum' copiado al portapapeles para copiar el código 23. cómo determinar pestaña del navegador de una página está en el foco?
! Const isBrowserTabFocused = () => document.hidden; // ejemplo isBrowserTabFocused (); // copia fiel del código 24. Cómo crear un directorio (si no está presente)?
fs = const requieren (fs ''); const createDirIfNotExists = dir => (fs.existsSync (dir) fs.mkdirSync (dir):? indefinido); // 事例 createDirIfNotExists ( 'test'); 复制 代码
Hay todo tipo de una gran métodos prácticos, el proceso de desarrollo puede resolver muchos problemas, vamos a tomar ventaja de ella ahora.
Después de que el código se implementa pueden existir errores no puedan saber en tiempo real, y después con el fin de resolver estos ERROR, pasado mucho tiempo de depuración de registro, aquí para todo el mundo para recomendar un ERROR manera fácil de usar herramientas de monitoreo Fundebug.
