• Technique
PHP Tour 2017 à Nantes, deuxième jour de conférence !

  • Technique
PHP Tour 2017 à Nantes, retour sur le premier jour de la conférence...

#PHPTour, retour sur le premier jour de la conférence.

  • Technique
"php-crashers" : exemples de scripts qui déclenche une segmentation fault en PHP

Erreur de segmentation, qu'est-ce que c'est et dans quels cas sont elles déclenchées en PHP ? Un dépôt Github présente quelques exemples détaillés...

  • Développement
  • Technique
PHP Coding Standard Fixer ou comment nettoyer les namespaces inutiles en PHP ?

Aujourd'hui il existe des outils pour aider à produire un code propre et respectant une mise en forme normée, pourquoi ne pas essayer !

  • Technique
Désactivation de certaines fonctionnalités des navigateurs sur les sites non "sécurisés"

  • Serveur
  • Technique
Let’s Encrypt : une nouvelle autorité de certification libre, automatisée et ouverte

  • Développement
  • Technique
Comment cloner un objet en JavaScript

Toute assignation créé une référence et pas une copie. Ce comportement est standard dans la programmation mais en JavaScript on se perd facilement...

  • Serveur
  • Technique
Comment en finir avec l'édition du fichier hosts ?

Comment configurer un serveur DNS simple dans un environnement de développement ? En utilisant dnsmasq, un outil efficace qui permet de s'affranchir de l'édition du fichier hosts.

  • Développement
  • Technique
PHP 7: Installation sur une distribution Ubuntu Server

Plus d'excuse maintenant pour ne pas installer et utiliser PHP 7 sur votre serveur Ubuntu. Grâce à ce guide, vous pouvez suivre une procédure fiable et officielle sans passer par une compilation personnalisée.

  • Développement
  • Technique
Symfony, Composer et la configuration `platform`

Une erreur du type `overriden by "config.platform.php"` en installant vos dépendances composer ? Venez comprendre la configuration qui en est la cause et comment la dompter !

  • Développement
  • Technique
  • Tests unitaires
Atoum: Comment automatiser l'utilisation du fichier de `bootstrap` ?

J'ai utilisé atoum sur un projet récemment. Il m'a permis de découvrir une autre approche des tests unitaires, plus simple et efficace

  • Technique
On a testé Firefox Developer Edition !

Mozilla vient de présenter sa dernière nouveauté, Firefox Developer Edition. C'est un outil puissant qui intègre les dernières innovations pour aider les développeurs web au quotidien.

  • Technique
Contrôler l'installation des mises à jour de Wordpress

Il est intéressant de pouvoir limiter l'installation des mises à jour à certains utilisateurs pour contrôler les problèmes techniques qui peuvent en découler.

  • Technique
L'Ipad et les problèmes de redimensionnement des images hors viewport

L'Ipad et safari sur iOS n'autorisent pas par défaut l'application d'une image de fond qui dépasse du viewport, voici quelques astuces pour contourner ce problème.

  • Design
Prendre les bonnes décisions pour une interface plus efficace

Vous vous demandez pourquoi certaines interfaces web plaisent aux internautes et d’autres pas ?

  • Stratégie
Comment rédiger un brief efficace pour obtenir ce que vous voulez !

Vous souhaitez que votre projet aboutisse à la réalisation que vous imaginez ?

Mots Clés

  • Développement
  • Technique

17 juin 2016 par Stéphane Hulard

Comment cloner un objet en JavaScript

Le JavaScript est un des langages les plus utilisés sur le web aujourd’hui. Sortie officiellement en décembre 1995, c’est grâce à ce langage que sont créées toutes les interactions dynamiques (ou presque) sur les pages web aujourd’hui. Depuis la sortie de Node.JS, son utilisation est même possible directement sur le serveur.

Je ne vais pas m’étendre sur le fonctionnement précis du langage et son paradigme de développement (prototypage, typage faible…).

Une chose importante à savoir est que toute assignation créé une référence à la variable et pas une copie. Ce comportement d’assignation est plutôt standard dans la programmation mais en JavaScript il est assez facile de se perdre dans le contexte (closure, callback, promises…) et il faut donc faire encore plus attention.
Chaque variable créé a une portée correspondant à son bloc d’instruction mais les références peuvent influer sur le contexte de niveau supérieur ce qui peut être dangereux pour le fonctionnement de l’application.

Un exemple concret

J’ai récemment créé un petit script pour visualiser le contenu de la base localStorage attachée à une page web pour aider un client à détecter ses problèmes de connexion.
C’est un conteneur de donnée persistent attaché au site sur lequel l’utilisateur navigue (chaque domaine à son propre conteneur). Il est attaché à l’objet window dans window.localStorage et son usage est très simple car il fonctionne comme un tableau :

window.localStorage['key'] = value;
var key = window.localStorage['key'];
window.localStorage.clear(); //Pour vider les données locales

Cette spécification est maintenant bien supportée sur les navigateurs du marché ce qui en fait un outil intéressant dans le développement d’applications riches.

Pour visualiser le contenu de cette petite base de donnée, j’ai écris le code suivant :

function display() {
    var storage = window.localStorage;
    for (var i in storage) {
        if (typeof storage[i] === 'string') {
            storage[i] = JSON.parse(storage[i]);
        }
    }
    //Transformation en JSON visualisable
    return JSON.stringify(storage, null, '\t');
}

Le problème avec cette approche est que l’assignation storage[i] met à jour directement le contenu de window.localStorage. La création de la variable storage créé une référence à la petite base de donnée et pas une copie des données.

Pour « casser » la référence et obtenir une copie propre manipulable sans impact, il y a plusieurs méthodes :

Voici la version finale de ma fonction pour visualiser le contenu de window.localStorage :

function clone(object) {
    function F() {}
    F.prototype = object;
    return new F();
}

function display() {
    //Ou var storage = Object.create(window.localStorage);
    var storage = clone(window.localStorage);
    for (var i in storage) {
        if (typeof storage[i] === 'string') {
            storage[i] = JSON.parse(storage[i]);
        }
    }
    return JSON.stringify(storage, null, '\t');
}

Partager cet article


Soumettre un commentaire

Vous avez décidé de laiser un commentaire. C'est fantastique !
Votre adresse e-mail ne sera pas publiée, merci d'être passé !

(*) Champs obligatoires Envoyer

Votre commentaire a été soumis à validation