UglifyJS intéressant

Cette fois, je vous présente UglifyJS intéressant. Quelles sont les précautions d'utilisation d'UglifyJS Voici des cas pratiques, jetons un oeil.

Ce n'est pas comme si je n'avais rien à faire pour regarder le code de compression, mais j'ai trouvé cela intéressant en déboguant mon propre code aujourd'hui. Parce que je l'ai écrit moi-même, même s'il est compressé, il reste facile à lire après formatage. Bien entendu, le premier critère en tant que minimum n'est pas la lisibilité, mais la simplicité. Ensuite, il essaiera de raccourcir le code autant que possible, de le conserver autant que possible sur une seule ligne et de minimiser l'espace blanc. Les points-virgules que nous utilisons couramment seront remplacés par des virgules, et les phrases courtes deviendront des phrases longues et cohérentes.

1. Exécutez immédiatement la fonction

Je l'ai écrit à l'origine de la deuxième manière, mais uglify l'a remplacé par la première manière. (Plus court bien sûr). En fait, la fonction des crochets et des symboles ! est de convertir la partie fonction en une expression au lieu d'une déclaration. De cette façon, il peut être exécuté immédiatement, et de la même manière, ~ + peut être fait.

2.Nom de la variableRemplacer

C'est naturel. Les noms de fonctions, les noms de paramètres et les noms de variables sont tous remplacés par des lettres simples. Même le code sous la forme de '_'

3. Function on top

function foo (){} sera placé en haut du module. Bien sûr, c'est une norme, mais j'ai découvert plus tard qu'il avait également une autre fonction, qui est de faciliter la fusion ultérieure du code. Par exemple, si on le définit ainsi :

var self=this;function a(){}
self.a=a;function b(){}
self.b=b;return self;

sera remplacé par :

function a(){}function b(){}var s={}return  s.a={},s.b={},s

A noter que le dernier s ne peut pas être manqué, et le retour se fera en fonction du résultat de la dernière expression.

  function rt(n) {    return n;
   }  function xx() {      return rt(1), rt(2);
  }

Exécutez xx() et obtenez 2. S'il y a une fonction qui ne renvoie pas de valeur après rt(2), alors xx() ne sera pas défini.

4. Remplacement de la valeur booléenne

false-->!1  true-->!0

5.if

L'instruction if est l'endroit le plus compressé.

1) Préfixe de retour :

 function load() {            if (t) {
                x = false;
                log("error");                return;
            }
            console.log("22")
        }

Par exemple, ma fonction d'origine ressemble à ceci. Après compression, cela ressemble à ceci :

  if (t) return x =!1,void log("error")

Le retour est avancé, et il y a un vide supplémentaire à la fin. Pourquoi est-ce ? Sans les accolades, les quatre sections du code if deviennent une seule phrase. La fonction de void ici est d'effacer la valeur de retour de la fonction . Parce que l'original n'a aucune valeur de retour. Si la méthode log a une valeur de retour à ce moment. Ensuite, l’appel de load obtiendra la valeur de retour. Cela crée des interférences et va à l’encontre de l’objectif de la fonction originale. Je l'ai donc effacé avec du vide.

2) Court-circuit

     function foo() {            if (!x) {                return;
            }
            console.log("doA");
            console.log("doB");
  }

Après compression :

    function f() {
            x || console.log("doA"), console.log("doB");
      }

C'est plutôt bien. De même :

(x&&y){
 doa();
 dob(); 
}
 doc();  
 -->    x&&y&&(doa(),dob()),doc()

Les quatre lignes originales deviennent une seule ligne de code.

3). Afin de fusionner une ligne, cela fonctionne aussi :

    console.log("doA");
    console.log("doB");     if (x>0) {
         console.log("true");
      }

fusionné comme ceci :

 if (console.log("doA"), console.log("doB"), x > 0) console.log("true");

Ce n'est peut-être pas très convivial d'écrire comme ça, mais le fait est que dans l'instruction if, la dernière phrase est la phrase de jugement. Combiné avec le retour précédent. Vous devez avoir une compréhension approfondie des déclarations par virgules.

4) Le lancer n'est pas ignoré non plus

 if (errMsg) {
       util.triggerCallback(fail, "模型验证错误");       throw Error(errMsg);
  }

Après compression :

 if (a)  throw x.triggerCallback(o, "模型验证错误"), Error(a)

Après avoir changé l'ordre des déclarations, il sera clair si vous considérez le lancer comme retour.

5) if else

Ceci sera remplacé par l'expression ternaire a?b:c.

6. Traitement des nombres

Des centaines et des milliers seront traités en notation scientifique 1000 --> 1e3.

7. while

var offset = 0;            while (true) {                if (offset >= bufferLength) {                    break;
                }
}

sera remplacé comme ceci :

  for (var n = 0; ; ) {                if (n >= K)                    break
 }

c'est vraiment bien, sauvegarder une ligne de code.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment laisser JS correspondre automatiquement aux proto Js

H5 fait fonctionner la fonction d'enregistrement Web

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!