Maison > interface Web > js tutoriel > Que sont les espaces de noms JavaScript ? A quoi ça sert ?

Que sont les espaces de noms JavaScript ? A quoi ça sert ?

不言
Libérer: 2019-01-14 16:08:22
original
4616 Les gens l'ont consulté

L'espace de noms est appelé espace de noms en anglais. C'est l'un des concepts de la programmation. Le concept d'« espace de noms » peut éviter les conflits de noms. Dans cet article, nous examinerons le contenu et l'utilisation des espaces de noms en JavaScript.

Que sont les espaces de noms JavaScript ? A quoi ça sert ?

Quel est l'espace de noms ?

L'espace de noms fait référence à un mécanisme de tri afin qu'il n'y ait qu'un seul nom identique dans "l'espace".

L'espace est comme un conteneur.

Par exemple, le nom « Tom » peut faire référence à plusieurs personnes, mais en créant un espace de noms pour chaque nom de famille, nous pouvons distinguer quel « Tom » est lequel.

En fait, vous pouvez savoir que "Tom" dans l'espace de noms "Shangguan" et "Tom" dans "Ouyang" sont des personnes différentes.

Avantages de l'utilisation des espaces de noms

L'objectif principal des espaces de noms est d'éviter les conflits de noms.

Pour les programmes à petite échelle, les avantages de l'utilisation des espaces de noms ne sont peut-être pas trop importants.

Cependant, une sorte de programme à grande échelle peut être lié à d'autres programmes, serveurs, etc.

Dans ce cas, l'utilisation d'espaces de noms peut réduire la charge du programmeur.

Puisque les problèmes causés par les conflits de noms peuvent être évités, nous pouvons éliminer les traitements inutiles.

Comment utiliser les espaces de noms ?

Introduisons le concept d'espaces de noms dans les programmes JavaScript.

Tout d’abord, regardons un programme simple qui n’utilise pas d’espaces de noms.

<html>
  <body>
    <script>
 
        function addition(num1,num2) {
            return num1+num2;
        }
 
        function multiplication(num1,num2) {
            return num1*num2;
        }
 
        var operation = addition(5,10);
        console.log(operation)
 
    </script>
  </body>
</html>
Copier après la connexion

Résultat de l'exécution : 15

Dans le code ci-dessus, nous définissons d'abord une fonction d'addition et une fonction de multiplication.

Le résultat de l'ajout est ensuite stocké dans une variable globale et affiché dans la console JavaScript.

Les paramètres ajoutés passés à la fonction sont 5 et 10, donc 15 est affiché sur la console.

Dans le code ci-dessus, tout existe sous forme de variables globales.

Par conséquent, si des fonctions et des variables portant le même nom existent dans la portée globale, cela provoquera un conflit.

Ensuite, j'ai essayé d'améliorer le code ci-dessus en utilisant des espaces de noms.

<html>
  <body>
    <script>
 
        var MYFUNCTIONS = {
 
            addition: function(num1,num2){
                return num1+num2;
            },
 
            multiplication: function(num1,num2){
                return num1*num2;
            }
        } 
 
        var operation = MYFUNCTIONS.addition(5,10);
        console.log(operation)
 
    </script>
  </body>
</html>
Copier après la connexion

Résultat de l'exécution : 15

Dans le code ci-dessus, la seule variable globale définie est une variable MYFUNCTION majuscule.

Nous y définissons les fonctions d'addition et de multiplication.

En faisant cela, nous créons un espace appelé MYFUNCTION et contenons des fonctions arbitraires en son sein.

Pour appeler une fonction dans MYFUNCTION, utilisez la syntaxe : MYFUNCTION.function name.

Appelez la fonction d'addition en écrivant MYFUNCTION.addition(5,10).

Le résultat est le même que le code précédent.

Comment superposer des espaces de noms ?

Enfin, présentons comment « hiérarchiser » les espaces de noms.

C'est pratique car davantage de fonctions et de variables peuvent être gérées via des couches.

L'exemple de code est le suivant

<html>
  <body>
    <script>
 
        var MYAPPLICATION = {
 
            OPERATIONS: {
 
                addition: function(num1,num2){
                    return num1+num2;
                },
 
                multiplication: function(num1,num2){
                    return num1*num2;
                }
            },
 
            OTHER: {
 
                show: function(num1,num2){
                    console.log("Your numbers are " + num1 + " and " + num2);
                } 
            }
 
        } 
 
        MYAPPLICATION.OTHER.show(5,10);
 
    </script>
  </body>
</html>
Copier après la connexion

Résultat de l'exécution : Vos nombres sont 5 et 10

Dans le code ci-dessus, nous allons unique global La variable MONAPPLICATION est divisée en plusieurs espaces.

Ajout d'une fonction d'addition et d'une fonction de multiplication dans l'espace OPERATION, et inclusion d'une nouvelle fonction affichée dans un AUTRE espace.

La création d'espaces dans les espaces facilite la superposition et la production de code propre.

Par exemple, pour appeler la fonction show dans un AUTRE espace, vous pouvez utiliser une syntaxe telle que l'espace extérieur, l'espace intérieur et le nom de la fonction.

En fait, si vous écrivez MYAPPLICATION.OTHER.show(5,10), la fonction show spécifiée dans les paramètres 5 et 10 sera appelée.

La fonction show génère des phrases telles que "Vos numéros sont le paramètre 1 et le paramètre 2" sur la console JavaScript.

Par conséquent, le résultat indique Vos nombres sont 5 et 10.

Cet article se termine ici. Pour un contenu plus passionnant, vous pouvez prêter attention aux autres tutoriels de colonnes sur le site Web PHP chinois ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal