Espaces de noms en JavaScript

Les étudiants qui ont étudié PHP connaissent tous le concept d'espace de noms Dans un système complexe, il y aura de nombreuses fonctions et objets, fournis par le langage et prédéfinis par l'architecture. Les objets étant donné que les normes de programmation exigent des noms significatifs, il est inévitable que des appels incorrects portent le même nom. Mais avec les espaces de noms, le problème est résolu non seulement par la classification et l'organisation des fonctions et des objets. le problème des noms en double.

Utiliser JavaScript n'est pas si confortable. Javascript n'a que portée de fonction. Bon sang, tous les fichiers et fichiers Shenma sont parfois considérés comme un espace de noms. par des noms en double prêtent à confusion et sont difficiles à déboguer et à résoudre.

Un exemple simple

<input type="button" value="test" onclick="alert();"/>
        <script type="text/javascript">
            function alert(){
                //.......
                test2();
                //.......
            }
            function test2(){
                alert(&#39;test2&#39;)
            }
        </script>

Dans cet exemple, il existe différentes performances dans différents navigateurs, et IE signalera Stack over flow , Firefox va mourir. . . Quoi qu'il en soit, il signalera une erreur. C'est une erreur très simple. Une fonction d'alerte est personnalisée dans le code. La fonction test2 est appelée dans la fonction alert. , il est appelé en boucle. Peut-être direz-vous que c'est si évident après l'avoir lu. Qui ferait l'erreur, mais si la méthode personnalisée est appelée close (cela arrivera souvent), alors une fonction de fichier externe est appelée en interne. , et que la fonction appelle la méthode de fermeture de la fenêtre, l'erreur sera beaucoup masquée.

Espaces de noms simples

Étant donné que JavaScript n'a pas de portée de fichier, différentes fonctions sont dispersées dans différents fichiers, ou même par différentes personnes qui écrivent, le la probabilité de noms en double est considérablement augmentée. Est-ce suffisant d'être suffisamment prudent ? Pas nécessairement.Il y a aussi des situations inattendues.Par exemple, l'héritage est souvent utilisé, j'ai donc écrit un nom de fonction extend qui n'est jamais apparu auparavant, la fonction extend a été ajoutée à EcmaScript5 et la nécessité des espaces de noms a été reflétée.

JavaScript a une portée de fonction. Vous pouvez l'utiliser pour écrire des fonctions personnalisées dans un corps de fonction, de sorte que les variables, les objets et les fonctions de la fonction soient isolés de l'extérieur, tout comme ils le sont dans un espace de noms.

<input type="button" value="test" onclick="(new namespace()).alert();"/>
        
        <script type="text/javascript">
            function namespace(){
                this.alert=function(){
                    console.log(&#39;test&#39;);
                }
            }
        </script>

De cette façon, la méthode d'alerte personnalisée n'entrera pas en conflit avec l'alerte de la fenêtre.

Évolution simple

C'est possible, mais il y a des problèmes. Le plus gros problème est que la méthode d'appel est compliquée et moche ! L'objet doit être instancié à chaque fois qu'il est appelé, puis ses méthodes doivent être appelées. Il suffit de modifier le code pour obtenir une instanciation automatique.

<input type="button" value="test" onclick="NS.alert();"/>
        <script type="text/javascript">
            (function namespace(){
                this.alert=function(){
                    console.log(&#39;test&#39;);
                }
                window.NS=this;
            })();
        </script>

Pour comprendre le code ci-dessus, vous devez d'abord comprendre la technique de la « fonction d'exécution immédiate » (c'est ainsi que les gens du Jianghu l'appellent. La structure est similaire à celle-ci

(function xxx(){
       //function body 
 })();

Écrire la fonction xxx comme ceci Elle peut être exécutée automatiquement après la définition. Cela a l'air magique En fait, l'écriture ci-dessus peut se décomposer en ceci :

function xxx(){
       //function body 
 }
xxx();

signifie

définir une fonction <.>, puis appelez-le en utilisant la syntaxe entre crochets, et en dehors de la définition de la fonction. Une couche de parenthèses ne sert qu'à convertir la déclaration de fonction en une expression de définition de fonction, car seules les expressions peuvent être appelées en utilisant des parenthèses. Après avoir compris ces monstres, le code ci-dessus est simple. À la fin de la fonction d'espace de noms personnalisé, attribuez-le à l'attribut NS de la fenêtre et utilisez simplement NS.xx directement lors de l'appel. Ça a l'air beaucoup mieux.

Embellissez-leLa méthode d'écriture ci-dessus semble bonne, mais l'espace de noms du nom de la fonction semble redondant, il peut être embelli

est devenue une

(function (){
                this.alert=function(){
                    console.log('test');
                }
                window.NS=this;
            })();

fonction anonyme

immédiatement exécutée, ce qui est un peu embelli, mais ça a quand même l'air bizarre Oui, c'est évidemment une fonction instanciée, alors pourquoi n'est-elle pas incluse dans la méthode. définition ? Dans prototype, comment écrire un prototype pour une fonction anonyme. . . , vous devez utiliser votre cerveau

(function(){
                var _NS=function(){
                }
                _NS.prototype.alert=function(){
                    console.log('test');
                }
                window.NS=new _NS();
            })();

Écrivez quelques fonctions utilesquerySelector et querySelectorAll sont de nouvelles interfaces de requête fournies par le W3C , mais le nom est trop long, j'en ai donc écrit un simple moi-même. L'attribut innerHTML est également couramment utilisé. J'ai écrit une version simple imitant la méthode HTML de jQuery

. /noms de classe et autres Lorsque vous utilisez plusieurs frameworks ou bibliothèques de classes tiers, en cas de conflit, la seule chose que vous pouvez faire est d'en abandonner un.

(function () {
            var _NS = function () {
            }
            _NS.prototype.select = function (selector,context) {
                var context = context || document;
                return context.querySelectorAll(selector);
            }
            _NS.prototype.isArrayLike=function(obj){
                if(obj instanceof Array){
                    return true;
                }

                var length=obj.length;
                if ( obj.nodeType === 1 && length ) {
                    return true;
                }
                return false;
            }
            _NS.prototype.html = function (obj,value) {
                var isArray=this.isArrayLike(obj), i=0;
                if (typeof value == 'string') {
                    if (!isArray) {
                        obj.innerHTML = value;
                    } else {
                        var length = obj.length;
                        while (i < length) {
                            obj[i].innerHTML = value;
                            i += 1;
                        }
                    }
                } else {
                    if (!isArray) {
                        return obj.innerHTML;
                    } else {
                        return obj[0].innerHTML;
                    }
                }
            }
            window.NS = new _NS();
        })();

Il est inévitable d'entrer en contact avec JavaScript lorsque l'on s'engage dans le développement Web. La dernière version de JavaScript ne prend toujours pas en charge les espaces de noms, le problème des conflits de noms est donc sans aucun doute important. Imaginez que vous ayez référencé deux fichiers js, uniquement pour les trouver. que vous avez dû abandonner l'un d'entre eux et écrire beaucoup de code supplémentaire est sans aucun doute très frustrant. Avant que la nouvelle version de JavaScript n'introduise le concept d'espaces de noms, nous, les programmeurs, avons l'obligation fondamentale de perpétuer l'esprit d'autonomie et de créativité

Articles connexes :  ;

Utilisation détaillée de l'espace de noms PHP

exemple de code d'écriture d'espace de noms js

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!