web-dev-qa-db-fra.com

Stocker une variable dans l'objet 'window' de JavaScript est un moyen approprié d'utiliser cet objet?

(Peut-être) Je viens de résoudre un problème ( Comment mettre à jour le contenu frontal après qu'un formulaire ait été soumis avec succès à partir d'une fenêtre de dialogue? ) en "stockant"/"enregistrant" une variable dans l'objet JavaScript window. Cependant, étant donné que je suis un débutant en JavaScript, j’ai des doutes sur le fait de stocker/enregistrer une variable dans l’objet JavaScript window est une façon "courante"/"correcte" d’utiliser cet objet. Est ce

Par exemple, en utilisant le code suivant

$('.trigger').click(function() {
  window.trigger_link = this;
});

est conseillé?

javascriptjquerydomwindow
29
Backo

En JavaScript, toute variable globale est en réalité une propriété de l'objet window. L'utilisation de l'une est équivalente à (et interchangeable avec) l'utilisation de l'autre. 

L'utilisation de variables globales est certainement "commune", donc la question est de savoir si c'est "approprié". En général, les variables globales sont déconseillées , car elles sont accessibles à partir de TOUTES les fonctions et vous risquez que plusieurs fonctions tentent de lire et d'écrire dans les mêmes variables. (Cela est vrai avec n'importe quel langage de programmation dans n'importe quel environnement, pas seulement JavaScript.) 

Résolvez ce problème en créant un espace de noms unique pour votre application . La méthode la plus simple consiste à créer un objet global avec un nom unique, avec vos variables comme propriétés de cet objet:

window.MyLib = {}; // global Object container; don't use var
MyLib.value = 1;
MyLib.increment = function() { MyLib.value++; }
MyLib.show = function() { alert(MyLib.value); }

MyLib.value=6;
MyLib.increment();
MyLib.show(); // alerts 7

Une autre approche consiste à utiliser .data() pour attacher des variables à un élément DOM pertinent. Ce n’est pas pratique dans tous les cas, mais c’est un bon moyen d’obtenir des variables qui peuvent être accessibles globalement sans les laisser dans l’espace de noms global.

65
Blazemonger

Un autre modèle pour créer un espace de nom unique dans votre application.

function myApp()
{
    var value = 5;
    function addToValue(x)
    {
         value += x;
    }
}()

Si vous souhaitez que les fonctions/valeurs soient ensuite accessibles, vous pouvez les stocker dans un objet comme celui-ci:

function myApp()
{
    this.value = 5;
    this.addToValue = function(x)
    {
         this.value += x;
    }
}
var myInstance = new myApp();
1
Samy Bencherif

Ce qui n’est en fait pas mentionné ici, et qui est probablement le plus important facteur de désagrément sur pourquoi ne pas utiliserwindowcomme support de portée globale, c’est que peut être gelé (non accessible en écriture) dans certains cas ( et je parle d’expérience basée sur la production).

Un bon modèle consiste en fait à créer une variable globale qui sera utilisée pour tous les éléments courants de votre application.

var Application = {};
Application.state = { name: 'Application' }
.
.

Ce que j’ai trouvé comme le meilleur modèle pour moi en javascript est d’avoir un état global avec Redux .

1
J.D.