Ceci est une ancienne révision du document !

JavaScript

Memo

Traitement des chaînes de caractères

Remplacement des caractères spéciaux

function removeAccents (text) {
    return text.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
}

Traitement des tableaux

Tri multicritères

myArray.sort((a, b) => a.firstname.localeCompare(b.firstname) || a.lastname.localeCompare(b.lastname) || a.age - b.age)

Variante

myArray.sort((a, b) => {
    const compFirstname = a.firstname.localeCompare(b.firstname)
    const compLastname = a.lastname.localeCompare(b.lastname)
    const compAge = a.age - b.age
    return compFirstname || compLastname || compAge
})

Traitement des objets

Tri des clés

Object.keys(myObject).sort().reduce(
    (obj, key) => {
        obj[key] = myObject[key]
        return obj
    }, {}
)

Traitement des dates

Formatage

En javascript pur :

function formatDate (date) {
  return `${date.getDate()}/${('0' + (date.getMonth() + 1)).slice(-2)}/${date.getFullYear()} ${date.getHours()}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`
}

Gestion des appels successifs

Debounce

Appeler qu'une seule fois une fonction au début ou à la fin d'une succession de déclenchements d'un événement.

function debounce (delay, callback) {
  var timeout = null
  return function () {
    if (timeout) {
      clearTimeout(timeout)
    }
    var args = arguments
    timeout = setTimeout(function () {
      callback.apply(null, args)
      timeout = null
    }, delay)
  }
}

window.onresize = debounce(250, function () {
  console.log('e')
})

throttle

Exécuter une fonction de manière périodique durant la séquence de déclenchements.

function throttle(delay, callback) {
  var previousCall = new Date().getTime()
  return function () {
    var time = new Date().getTime()
    if ((time - previousCall) >= delay) {
      previousCall = time
      callback.apply(null, arguments)
    }
  }
}

window.onresize = throttle(250, function () {
  console.log('e')
})

Manipulation du DOM

Attendre le chargement complet du DOM

window.readyHandlers = [];
window.ready = function ready(handler) {
  window.readyHandlers.push(handler);
  handleState();
};

window.handleState = function handleState () {
  if (['interactive', 'complete'].indexOf(document.readyState) > -1) {
    while(window.readyHandlers.length > 0) {
      (window.readyHandlers.shift())();
    }
  }
};

document.onreadystatechange = window.handleState;

ready(function () {
  // your code here
});

Attendre la présence d'un élément

function waitForElement (selector, callback) {
    const wait = setInterval(function () {
        const element = document.querySelector(selector);
        if (element !== null) {
            callback(element);
            clearInterval(wait);
        }
    }, 100);
}