Interessantes UglifyJS

Dieses Mal bringe ich Ihnen interessantes UglifyJS. Was sind die Vorsichtsmaßnahmen für die Verwendung von UglifyJS? Hier sind praktische Fälle, schauen wir uns das an.

Es ist nicht so, dass ich nichts zu tun hätte, um mir den Komprimierungscode anzusehen, aber ich fand ihn heute interessant, als ich meinen eigenen Code debuggte. Da ich es selbst geschrieben habe, ist es trotz der Komprimierung nach der Formatierung immer noch gut lesbar. Das erste Kriterium als Mindestmaßnahme ist natürlich nicht die Lesbarkeit, sondern die Einfachheit. Dann wird der Code so weit wie möglich gekürzt, so weit wie möglich in einer Zeile gehalten und der Leerraum minimiert. Die von uns üblicherweise verwendeten Semikolons werden durch Kommas ersetzt und kurze Sätze werden zu langen und zusammenhängenden Sätzen.

1. Führen Sie sofort die Funktion aus

Ich habe sie ursprünglich auf die zweite Art geschrieben, aber uglify hat sie durch die erste Art ersetzt (Kürzer natürlich). Tatsächlich besteht die Funktion von Klammern und !-Symbolen darin, den Funktionsteil in einen -Ausdruck umzuwandeln, anstatt in eine Deklaration. Auf diese Weise kann es sofort ausgeführt werden, und ~ + kann auf ähnliche Weise ausgeführt werden.

2.VariablennameErsetzen

Dies ist natürlich alle durch einzelne Buchstaben ersetzt. Sogar Code in der Form „_“

3. Function on top

function foo (){} wird oben im Modul platziert. Natürlich ist dies eine Norm, aber später stellte ich fest, dass es auch eine andere Funktion hat, nämlich die spätere Code-Zusammenführung zu erleichtern. Wenn wir es beispielsweise so definieren:

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

wird ersetzt durch:

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

Beachten Sie, dass die letzten s nicht übersehen werden dürfen und die Rückgabe auf dem basiert Ergebnis des letzten Ausdrucks.

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

Führen Sie xx() aus und erhalten Sie 2. Wenn es eine Funktion gibt, die nach rt(2) keinen Wert zurückgibt, wird xx() undefiniert.

4. Bool-Wert-Ersetzung

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

5.if

Die if-Anweisung ist die am stärksten komprimierte Stelle.

1) Rückgabepräfix:

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

Zum Beispiel sieht meine ursprüngliche Funktion so aus. Nach der Komprimierung sieht es so aus:

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

Der Rücklauf ist vorgezogen und am Ende gibt es eine zusätzliche Lücke. Warum ist das so? Ohne die geschweiften Klammern werden die vier Abschnitte des if-Codes zu einem Satz. Die Funktion von void besteht hier darin, den Rückgabewert der Funktion zu löschen. Weil das Original keinen Rückgabewert hat. Wenn die Protokollmethode zu diesem Zeitpunkt einen Rückgabewert hat. Wenn Sie dann „load“ aufrufen, erhalten Sie den Rückgabewert. Dies führt zu Störungen und macht den Zweck der ursprünglichen Funktion zunichte. Also habe ich es mit Leere gelöscht.

2) Kurzschluss

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

Nach der Komprimierung:

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

Das ist ziemlich gut. Ähnlich:

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

Die ursprünglichen vier Zeilen werden zu einer Codezeile.

3). Um eine Zeile zusammenzuführen, funktioniert dies auch:

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

so zusammengeführt:

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

Es ist möglicherweise nicht sehr freundlich zu schreiben so, aber der Punkt ist, dass in der if-Anweisung der letzte Satz der Urteilssatz ist. Kombiniert mit der vorherigen Rückgabe. Sie müssen über ein tiefes Verständnis von Komma-Anweisungen verfügen.

4) Throw wird auch nicht ignoriert

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

Nach der Komprimierung:

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

Nach dem Ändern der Reihenfolge der Anweisungen wird klar, ob Sie throw als betrachten zurückkehren.

5) wenn sonst

Dies wird durch den ternären Ausdruck a?b:c ersetzt.

6. Zahlenverarbeitung

Hunderter und Tausender werden in die wissenschaftliche Notation 1000 verarbeitet -->1e3.

7. while

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

wird wie folgt ersetzt:

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

ist wirklich gut und spart eine Zeile Code.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man JS automatisch mit Proto-Js abgleichen lässt

H5 ermöglicht die Webaufzeichnungsfunktion

Das obige ist der detaillierte Inhalt vonInteressantes UglifyJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!