W jaki sposób ten kod optymalizuje zminimalizowanie?

Question

Widziałem niektóre kodu here że miał te deklaracje zmiennych:

var equestAnimationFrame = 'equestAnimationFrame', 
    requestAnimationFrame = 'r' + equestAnimationFrame, 

    ancelAnimationFrame = 'ancelAnimationFrame', 
    cancelAnimationFrame = 'c' + ancelAnimationFrame 

Według komentarza na stronie, to jest poprawa minifikacji, ale nie mogłem dowiedzieć się, jak to zrobić. Czy ktoś może mi powiedzieć? Dzięki.

Answer 1

Nie poprawi to prawidłowej minifikacji - kod ten jest polyfillem requestAnimationFrame. Oznacza to, że wypróbuje prefiksy różnych dostawców. Tak więc czasami kod będzie "requestAnimationFrame" (małe litery r), a czasami z prefiksem dostawcy, takim jak msRequestAnimationFrame.

Z tego powodu jest budowany dynamicznie, "equestAnimationFrame" jest zawsze tam, ale może być poprzedzony prefiksem "r" lub "R".

„Zwiększanie minifikacji” części dlatego zamiast pisać:

var requestAnimationFrame = window.requestAnimationFrame || 
          window.msRequestAnimationFrame || 
          window.mozRequestAnimationFrame || 
          window.webkitRequestAnimationFrame || 
          window.oRequestAnimationFrame || 

Biegną dla pętli na ["ms","moz","o", "webkit"] i spróbuj prefiksów. Pozwala to zaoszczędzić co najwyżej kilka bajtów.

Oto kod wierzę jest wyraźniejszy i robi to samo:

var base = "equestAnimationFrame" // the base string 
var alternatives = window["r"+base] || // try the basic option first 
['moz', 'ms', 'o', 'webkit'].map(function(x){ 
    return x+"R" + base; // all the options 
}).filter(function(x){ // check if in window 
    return x in window; 
})[0];