Une brève discussion sur le débogage des connaissances javascript_basic

Je me plains beaucoup ces derniers temps. Comme nous le savons tous, le front-end web est devenu très lourd par rapport à il y a quelques années. Il existe différents frameworks js, divers objets, et quand il y a trop de projets, ils sont publics. les modules seront extraits.

L'affichage de l'interface utilisateur de ces modules est le même, la différence réside dans la logique d'arrière-plan. Par exemple, lorsque nous effectuons des voyages d'affaires, nous avons généralement un module public js pour le centre de coûts, que les clients remplissent lors de la réservation de billets d'avion. Ce centre de coûts est distribué sur des terminaux de réservation en ligne, hors ligne et via des applications, ce qui facilite également à l'avenir le règlement mensuel avec les entreprises clientes.

Nous savons également qu'à mesure que le projet devient plus grand et plus complexe, et devient SOA, de nombreux problèmes surviennent. Tout comme une théorie du Web, toutes les données frontales ne sont pas fiables, donc l'interface des données de l'autre équipe ne l'est pas. la même chose. Dans le passé, lorsque le projet était petit, je n'étais pas aussi confiant et j'enregistrais des journaux uniquement lorsqu'il y avait des erreurs logiques. Les processus métier normaux étaient rarement enregistrés. Après tout, les journaux d'informations n'étaient pas beaux, et ils. La consommation de bande passante du serveur réduirait également les performances Web.

Mais le projet prend de l'ampleur. Lorsqu'un jour vous rencontrez un bug étrange dans le projet, vous vous fiez aux logs incomplets et finalement tracez l'interface ligne par ligne à l'œil nu. Cependant, il y a trop de paramètres et vous. Impossible de restaurer avec précision les données des paramètres, mais vous êtes sûr à 100 % qu'il doit s'agir du problème de retour de l'interface, mais vous ne pouvez pas obtenir le message complet pour le moment, vous ne pouvez pas trouver le fournisseur d'interface. , vous étiez impuissant. Il vaut mieux y penser à chaque fois. Ce serait bien d'avoir des journaux pour chaque ligne.

Après avoir appris la leçon, la tendance à conserver des journaux de processus est devenue de plus en plus populaire, et a finalement conduit à un grand événement au début de l'année. Beaucoup de choses ont été dites de manière confuse si le backend Web. est comme ça, alors le front-end actuel doit être le même. Tenir un journal ? Nous savons que puisqu'il s'agit d'un module js public, ce module doit avoir encapsulé certaines méthodes. Il n'est absolument pas autorisé aux programmes tiers d'exploiter leurs propres nœuds de texte, comme les suivants :

Copier le code Le code est le suivant :

<!--troisième module -->
Entreprise :<input type="text" id="company" value="xxx Co., Ltd." />
Nom de l'employé :<input type="text" id="username" value="Zhang San" />
<!-- -->
<script type="text/javascript">
//Centre de coûts
var costCenter = (function () {
        var société = (document.getElementById("company") || "") && document.getElementById("company").value;
            var username = (document.getElementById("username") || "") && document.getElementById("username").value;
       var résultat = {
                 getInfo : function () {
                         return { entreprise : entreprise, nom d'utilisateur : nom d'utilisateur };
             },
Validation : fonction() {
Return Boolean(société && nom d'utilisateur);
            }
          };
         renvoyer le résultat ;
})();
</script>

Afin de simplifier l'opération, l'interface utilisateur tierce fournit des nœuds d'interface utilisateur pour les noms d'entreprise et les noms d'employés, et encapsule une classe costcenter pour fournir des méthodes de lecture. Comme vous pouvez le voir, mon programme de réservation n'a besoin que de lire costCenter.getInfo. . , et joue également un rôle d’encapsulation.

Mais le problème se pose ici : dans la mise en œuvre réelle du projet, la valeur ne peut pas être obtenue dans le centre de coûts pour diverses raisons. Bien sûr, il peut également s'agir d'un bug dans l'interface utilisateur commune.

Mais à ce moment-là vous n'étiez pas très sûr si la valeur avait réellement été obtenue, mais logiquement même si la valeur n'était pas obtenue, en principe vous ne pouviez pas empêcher la soumission de la commande, donc afin de suivre en profondeur le bug, J'ai écrit une classe singleton logCenter pour enregistrer les journaux. Cette méthode est généralement utilisée pour enregistrer des journaux à l'aide de js.

<1>

Cette méthode est facile à imaginer, mais si vous utilisez la requête XMLhttp native, vous devez également prendre en compte la compatibilité du navigateur. Mais si vous n'utilisez pas la requête native, vous devez vous appuyer sur un framework tiers, tel que. comme jquery, mais après tout, de nombreuses entreprises ne l'utilisent pas, donc cela doit être utilisé en fonction des besoins réels.

Copier le code Le code est le suivant :

//Centre de journaux
var logCenter = (fonction () {
var résultat = {
                info : fonction (titre, message) {
//opération ajax
                     $.get("http://xxx.com", { "title": titre, "message": message }, function () {
                 }, "post");
            }
          };
         renvoyer le résultat ;
})();

<2>image

Il existe un objet appelé image dans notre dom, nous pouvons donc atteindre l'objectif de demander l'URL d'arrière-plan en attribuant dynamiquement une valeur à son src. En même temps, nous devons transmettre les informations de titre et de message dans l'URL. . Cela ajoute dynamiquement de la valeur à l'image. La méthode .src n'a pas besoin de prendre en compte les problèmes de compatibilité du navigateur, ce qui est très bien.

Copier le code Le code est le suivant :

//Centre de journaux
var logCenter = (fonction () {
var résultat = {
                info : fonction (titre, message) {
//opération ajax
                     $.get("http://xxx.com", { "title": titre, "message": message }, function () {
                 }, "post");
             },
                 info_image : fonction (titre, message) {
                               //image
              var img = new Image();
img.src = "http://www.baidu.com?title=" titre "&message=" message "&temp=" (Math.random() * 100000);
            }
          };
         renvoyer le résultat ;
})();

Ce qui précède constitue le contenu principal de cet article, nous continuerons à en discuter en profondeur à l'avenir