web-dev-qa-db-fra.com

Fonctions globales en javascript

Je suis nouveau sur js et j'essaie de comprendre les fonctions globales et privées. Je comprends les variables globales et locales. Mais si j'ai un html nommé test.html et un fichier 2 js nommé test1.js et test2.js. Maintenant, j'inclus le test1.js et test2.js dans test.html et appelez les fonctions écrites en test2.js à l'intérieur test1.js et test.html.

Les fonctions que j'ai écrites dans test2.js sont sous cette forme

function abc(){...}

function pqr(){...} etc.

ces fonctions ci-dessus sont-elles globales? S'ils le sont, comment puis-je ne pas les rendre globaux et y accéder quand même dans test1.js et test.html?

Comme j'ai lu les fonctions globales ou les variables globales sont mauvaises non?

javascriptfunctionglobal
15
ugandajs

Tout dans JS est lié à contenir la portée. Par conséquent, si vous définissez un function directement dans un fichier, il sera lié à l'objet window, c'est-à-dire qu'il sera global.

Pour le rendre "privé", vous devez créer un objet, qui contiendra ces fonctions. Vous avez raison de dire que la portée globale de détritus est mauvaise, mais vous devez mettre quelque chose dans la portée globale pour pouvoir y accéder, les bibliothèques JS font de même et il n'y a pas d'autre solution. Mais pensez à ce que vous mettez dans la portée globale, un seul objet devrait être plus que suffisant pour votre "bibliothèque".

Exemple:

MyObject = {
    abc: function(...) {...},
    pqr: function(...) {...}
    // other functions...
}

Pour appeler abc quelque part, que ce soit le même fichier ou un autre fichier:

MyObject.abc(...);
18
Marko Grešak
var SomeName = function() {

    var function1 = function (number) {
        return number+1;
    }

    var anotherFunction = function (number) {
        return number+2;
    }

    return {
        function1: function (number) {
            return function1(number);
        },
        function2: function (number) {
            return anotherFunction(number);
        }
    }
}();

appelant

console.log (SomeName.function1 (1)); // journaux 2

console.log (SomeName.function2 (1)); // journaux 3

5
fellak

Tout ce qui est défini dans un fichier sans aucune sorte de wrapper sera lié à l'objet window. Tout ce qui est lié à l'objet window est global.

Exemple:

//these are global variables
foo = 123;
var ABC = 'school';

//these are "private" variables
test = function(){
  var foo = 123
}

(function(){
  var ABC = 'school';
}).call(this);

Étant donné que les variables globales de chaque fichier feront partie de l'objet window, vous pouvez y accéder entre les fichiers. Il est important lors de la création de variables "privées" que vous ajoutez var. Cela dit remplacer toutes les variables globales dans le "wrapper" actuel. Si j'ai une variable globale foo et que je la redéfinis dans une fonction avec var, elles seront séparées.

var foo = 123;
(function(){
  var foo = 987; //this foo is separate from the above foo
}).call(this);

Si vous avez un "wrapper" et que vous souhaitez définir une fonction globale, vous pouvez le faire comme ceci:

window.foo = 123;
(function(){
  window.foo = 123;
}).call(this);

Les deux fonctions feront la même chose.

Personnellement, je préfère tout mettre dans un wrapper et ne définir des variables globales que lorsque j'en ai besoin en utilisant window.

(function(){

  //all code goes here

  //define global variable
  window.foo = 123;

})call(this);
2
Christian Juth

Si vous ne comprenez pas pourquoi les variables globales sont mauvaises, alors pourquoi essayez-vous de les éviter?

Les fonctions globales ne sont pas nécessairement mauvaises. Ce qui est mauvais, c'est que n'importe qui et n'importe quoi change.

En général, puisque vous êtes nouveau dans Javascript, il est bon de commencer avec des fonctions globales réparties sur plusieurs fichiers javascript que vous incluez dans votre fichier html via des balises de script.

Lorsque vous passez du débutant à l'intermédiaire, vous devrez chercher une solution "module" (je recommande personnellement RequireJS ).

Pour l'instant cependant, vous pouvez vous contenter d'un modèle de module plus simple:

var T1 = function() {
   return < some module object >
})(); // notice the parenthesis

Google "Modèle de module Javascript".

Voir aussi cette réponse .

1
hasen