DIY Minifizierung
Kein Minifier kann einen fehlerhaften Code richtig komprimieren.
In diesem Beispiel möchte ich nur zeigen, wie viel ein Minifier tut.
Was Sie tun sollten, bevor Sie minimieren
Und in Bezug auf jQuery ... ich benutze jQuery nicht. JQuery ist für alte Browser, es wurde aus Kompatibilitätsgründen erstellt. Überprüfen Sie caniuse.com, fast alles funktioniert auf jedem Browser (auch ie10 ist jetzt standardisiert), ich denke jetzt ist es Nur hier, um Ihre Webanwendung zu verlangsamen ... Wenn Sie die mögen $(), sollten Sie Ihre eigene einfache Funktion erstellen. Und warum sollten Sie sich die Mühe machen, Ihren Code zu komprimieren, wenn Ihre Clients jedes Mal das 100-KB-Abfrageskript herunterladen müssen? Wie groß ist Ihr unkomprimierter Code? 5-6kb ..? Ganz zu schweigen von den unzähligen Plugins, die Sie hinzufügen, um es einfacher zu machen.
Originalcode
Wenn Sie eine Funktion schreiben, haben Sie eine Idee, beginnen mit dem Schreiben von Dingen und manchmal erhalten Sie so etwas wie den folgenden Code. Der Code funktioniert. Jetzt hören die meisten Leute auf zu denken und fügen ihn einem Minifier hinzu und veröffentlichen ihn.
function myFunction(myNumber){
var myArray = new Array(myNumber);
var myObject = new Object();
var myArray2 = new Array();
for(var myCounter = 0 ; myCounter < myArray.length ; myCounter++){
myArray2.push(myCounter);
var myString = myCounter.toString()
myObject[ myString ] = ( myCounter + 1 ).toString();
}
var myContainer = new Array();
myContainer[0] = myArray2;
myContainer[1] = myObject;
return myContainer;
}
Hier wird der minimierte Code ausgegeben (ich habe die neuen Zeilen hinzugefügt)
Minimiert mit ( http://javascript-minifier.com/ )
function myFunction(r){
for(var n=new Array(r),t=new Object,e=new Array,a=0;a<n.length;a++){
e.push(a);
var o=a.toString();
t[o]=(a+1).toString()
}
var i=new Array;
return i[0]=e,i[1]=t,i
}
Aber sind all diese Variablen, Wenns, Schleifen und Definitionen notwendig?
Meistens NEIN !
- Entfernen Sie unnötige if, loop, var
- Bewahren Sie eine Kopie Ihres Originalcodes auf
- Verwenden Sie den Minifier
OPTIONAL (erhöht die Leistung und kürzeren Code)
- Verwenden Sie Kurzzeichenoperatoren
- benutze bitweise Operatoren (nicht benutzen
Math)
- Verwenden Sie a, b, c ... für Ihre temporären Variablen
- benutze die alte Syntax (
while, for... nicht forEach)
- Verwenden Sie die Funktionsargumente als Platzhalter (in einigen Fällen).
- unnötig entfernen
"{}","()",";",spaces,newlines
- Verwenden Sie den Minifier
Wenn ein Minifier den Code komprimieren kann, machen Sie es falsch.
Kein Minifier kann einen fehlerhaften Code richtig komprimieren.
DIY
function myFunction(a,b,c){
for(b=[],c={};a--;)b[a]=a,c[a]=a+1+'';
return[b,c]
}
Es macht genau das Gleiche wie die obigen Codes.
Performance
http://jsperf.com/diyminify
Sie müssen immer überlegen, was Sie brauchen:
Bevor Sie sagen "Niemand würde Code wie den folgenden schreiben", lesen Sie die ersten 10 Fragen hier ...
Hier sind einige Beispiele, die ich alle zehn Minuten sehe.
Willst du einen wiederverwendbaren Zustand
if(condition=='true'){
var isTrue=true;
}else{
var isTrue=false;
}
//same as
var isTrue=!!condition
Ja nur benachrichtigen, wenn es existiert
if(condition==true){
var isTrue=true;
}else{
var isTrue=false;
}
if(isTrue){
alert('yes');
}
//same as
!condition||alert('yes')
//if the condition is not true alert yes
Alarm ja oder nein
if(condition==true){
var isTrue=true;
}else{
var isTrue=false;
}
if(isTrue){
alert('yes');
}else{
alert('no');
}
//same as
alert(condition?'yes':'no')
//if the condition is true alert yes else no
Konvertieren Sie eine Zahl in eine Zeichenfolge oder umgekehrt
var a=10;
var b=a.toString();
var c=parseFloat(b)
//same as
var a=10,b,c;
b=a+'';
c=b*1
//shorter
var a=10;
a+='';//String
a*=1;//Number
Runde eine Zahl
var a=10.3899845
var b=Math.round(a);
//same as
var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit)
Etage eine Nummer
var a=10.3899845
var b=Math.floor(a);
//same as
var b=a|0;//numbers up to 10 decimal digits (32bit)
Schaltergehäuse
switch(n)
{
case 1:
alert('1');
break;
case 2:
alert('2');
break;
default:
alert('3');
}
//same as
var a=[1,2];
alert(a[n-1]||3);
//same as
var a={'1':1,'2':2};
alert(a[n]||3);
//shorter
alert([1,2][n-1]||3);
//or
alert([1,2][--n]||3);
versuche es zu fangen
if(a&&a[b]&&a[b][c]&&a[b][c][d]&&a[b][c][d][e]){
console.log(a[b][c][d][e]);
}
//this is probably the onle time you should use try catch
var x;
try{x=a.b.c.d.e}catch(e){}
!x||conole.log(x);
mehr wenn
if(a==1||a==3||a==5||a==8||a==9){
console.log('yes')
}else{
console.log('no');
}
console.log([1,3,5,8,9].indexOf(a)!=-1?'yes':'no');
aber indexOfist langsam lesen Sie diese https://stackoverflow.com/a/30335438/2450730
Zahlen
1000000000000
//same as
1e12
var oneDayInMS=1000*60*60*24;
//same as
var oneDayInMS=864e5;
var a=10;
a=1+a;
a=a*2;
//same as
a=++a*2;
Einige nette Artikel / Seiten, die ich über bitweise / Kurzschrift gefunden habe:
http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
http://www.140byt.es/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
Es gibt auch viele jsperf-Sites, die die Leistung von Shorthand & Bitwsie zeigen, wenn Sie mit Ihrer Lieblings-Suchmaschine suchen.
Ich könnte stundenlang eins machen ... aber ich denke, es ist genug für jetzt.
Wenn Sie Fragen haben, fragen Sie einfach.
Und merke dir
Kein Minifier kann einen fehlerhaften Code richtig komprimieren.