web-dev-qa-db-fra.com

Puis-je ajouter des attributs à l'objet 'window' en javascript?

Puis-je ajouter n'importe quel attribut aléatoire à l'objet 'window' en javascript? Quelque chose comme:

window.my_own_attr = "my_value"

At-il des effets secondaires avec des bibliothèques? Et est-ce compatible avec plusieurs navigateurs?

javascriptcross-browser
28
akkishore

Puis-je ajouter n'importe quel attribut aléatoire à l'objet 'window' en javascript?

Oui, comme vous l'avez montré.

At-il des effets secondaires avec des bibliothèques?

Non, sauf si vous utilisez une bibliothèque qui définit une propriété que vous écrasez ensuite.

Et est-ce compatible avec plusieurs navigateurs?

Oui complètement.

Cela dit, cette pratique est généralement mal vue. Vous pourriez finir par écraser quelque chose que vous ne voulez pas.

45
James Allardice

Dans tous les navigateurs , window est l’espace de noms global javascript. Chaque propriété ou méthode "vit" dans cet espace de noms. Donc, si vous affectez une propriété à window, il s’agit d’une variable effective, d’une variable globale .

exemple:

window.myConstant = 5;

function multiply(val){
  return myConstant * (val || 1);
}
multiply(10); //=> 50
multiply(); //=> 5

Vous devez être prudent avec les frameworks javascript. Par exemple, si vous déclarez window.JQuery et utilisez le framework JQuery, l'espace de noms JQuery sera remplacé par votre affectation, le rendant inutile.

7
KooiInc

Oui, vous pouvez, mais en général vous ne devriez pas.

L'objet window est également l'objet "global" par défaut de JS, de sorte que toutes les variables globales y sont ajoutées.

Il est peu probable que vous cassiez quoi que ce soit à moins d'écraser une propriété déjà présente, mais il est considéré comme une mauvaise pratique de dumper des variables sur window ou de créer de nombreuses autres variables globales.

2
Alnitak

Je ne répéterai pas ce que d'autres ont dit à propos du piratage de cette pratique. Mais cela peut être incroyablement utile lorsque vous utilisez un framework rigide comme Angular mélangé avec du code Vanilla HTML/JS (ou jQuery). Ce qui est également désagréable et mal vu, mais il y a parfois de bonnes raisons, comme si vous avez beaucoup de code JS préexistant qu'il sera difficile d'intégrer dans le cadre.

La question la plus intéressante pour moi est comment utiliser la possibilité d'ajouter des propriétés à l'objet global window. Il y a un motif que j'utilise lorsque je veux exposer les méthodes d'un fournisseur (service) Angular à un code qui ne pourrait sinon pas injecter le service, probablement parce qu'il fonctionne en dehors du Angular cadre DI. Voici comment je le fais:

  1. Définissez votre service en tant que fournisseur dans votre module de niveau supérieur.
  2. Dans le constructeur ou onInit de app.component.js (ou quel que soit le composant de niveau supérieur qui importe le fournisseur), injectez le fournisseur normalement, effectuez toute initialisation unique dont il a besoin, puis appelez window['MyServiceName'] = this

En supposant que vous ayez conçu le fournisseur pour suivre un modèle Singleton, les méthodes de votre fournisseur peuvent désormais être appelées en toute sécurité depuis n'importe où. Un script non angulaire doit simplement appeler window['MyServiceName'].methodName()

1
Sam Rahimi

Comme d'autres l'ont souligné, oui, vous pouvez et oui, cela signifie l'ajout de "variables globales". 

Avoir des variables globales n'est pas la meilleure pratique mais c'est parfois la chose la plus simple à faire. Par exemple, si vous utilisez IFrames et souhaitez que la fenêtre enfant accède à une propriété de la fenêtre parent. Une telle propriété doit être "globale" pour qu'un enfant puisse y accéder. Mais cela montre aussi que ce n'est pas "vraiment global", c'est juste une propriété d'une fenêtre spécifique. Mais il peut entrer en conflit avec d'autres noms de propriétés, tels que les noms de fonctions définies dans la même fenêtre, par exemple par certaines bibliothèques que vous utilisez.

Nous savons donc que les variables globales sont mauvaises. Si nous décidons de les utiliser de toute façon, y a-t-il quelque chose que nous puissions faire pour minimiser leur méchanceté? 

Oui, il y en a une: définissez une variable globale SINGLE avec un nom plus ou moins unique et stockez-y un OBJECT. Stockez toutes les autres "variables" dont vous avez besoin en tant que champs de cet objet unique. 

De cette façon, vous n’aurez jamais besoin d’ajouter plus d’une variable globale (par fenêtre). Pas mal.

Nommez-le plus ou moins distinctement de sorte qu'il est peu probable qu'il entre en conflit avec le monde unique de quelqu'un d'autre. Par exemple, vous pouvez utiliser votre nom + 's' comme nom de variable: 

window.Panus  = {};

:-) 

0
Panu Logic

Cela fonctionnera correctement, aucun conflit avec aucune bibliothèque tant que le même nom de variable n’est pas utilisé, fonctionnera dans tous les navigateurs, mais cela n’est pas recommandé car cela créera une variable JS globale.

0
Dev