Statusbox
Jetzt Online (1) |
Haupt-Admin Online
|
Admin Online
|
Moderator Online
|
Member Online
|
User Online
Haruhi Suzumiya
|
Gäste Online 23 |
-
- Translate
- Start
- Community
- Über uns
- Interaktiv
- Feedback
- Kontakt
- KIT Partnerseiten
|
| Artikel »
Tutorials - 1.6.5 »
Javascripte kürzen im PHPKIT
|
Javascripte kürzen im PHPKIT
20.02.2012 von DustFireSky
Auch diese Anleitung bezieht sich auf die reine Geschwindigkeit der eigenen Webseite. Javascripte wird wohl jede Webseite eingebunden haben und daher ist es wichtig es so kurz wie möglich zu schreiben.
Hier mal ein kleines Beispiel, was wirklich unvorteilhaft ist:
| PHP-Code Anfang: (110 Zeilen) | Code markieren | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | | <script type="text/javascript"> function oeffne(welches) { if(document.getElementById(welches).style.display == 'none') { document.getElementById(welches).style.display = ''; document.getElementById('img'+welches).src = 'images/minus.gif'; }else{ document.getElementById(welches).style.display = 'none'; document.getElementById('img'+welches).src = 'images/plus.gif'; } } </script> <script type="text/javascript"> function oeffne(welches) { if(document.getElementById(welches).style.display == 'none') { document.getElementById(welches).style.display = ''; document.getElementById('img'+welches).src = 'images/minus.gif'; }else{ document.getElementById(welches).style.display = 'none'; document.getElementById('img'+welches).src = 'images/plus.gif'; } } </script> <script type="text/javascript"> function SetzeSmilie(smiliecode) { if(document.le_form.usertext.value == "Text*") document.le_form.usertext.value = " "+smiliecode+" "; else document.le_form.usertext.value += " "+smiliecode+" "; document.le_form.usertext.focus(); } </script> <script type="text/javascript"> var idLaberFeld = 'usertext'; var rangeIE = null; function LaberText(before, after) { if(document.le_form.usertext.value == "Text*") document.le_form.usertext.value = ""; var labertextfeld = document.getElementById(idLaberFeld); labertextfeld.focus(); if(typeof document.selection != 'undefined') { insertIE(labertextfeld, before, after); } else if (typeof labertextfeld.selectionStart != 'undefined') { insertGecko(labertextfeld, before, after); } } function insertIE(labertextfeld, before, after) { if(!rangeIE) rangeIE = document.selection.createRange(); if(rangeIE.parentElement().id != idLaberFeld) { rangeIE = null; return; } var alterText = rangeIE.text; rangeIE.text = before + alterText + after; if (alterText.length == 0) rangeIE.move('character', -after.length); else rangeIE.moveStart('character', rangeIE.text.length); rangeIE.select(); rangeIE = null; } function insertGecko(labertextfeld, before, after) { from = labertextfeld.selectionStart; by = labertextfeld.selectionEnd; beginn = labertextfeld.value.slice(0, from); middle = labertextfeld.value.slice(from, by); end = labertextfeld.value.slice(by); labertextfeld.value = beginn + before + middle + after + end; if(by - from == 0) { labertextfeld.selectionStart = from + before.length; labertextfeld.selectionEnd = labertextfeld.selectionStart; } else { labertextfeld.selectionEnd = by + before.length + after.length; labertextfeld.selectionStart = labertextfeld.selectionEnd; } } </script> <script type="text/javascript"> function LeShowHide(id) { obj = document.getElementsByTagName("div"); if (obj[id].style.visibility == 'visible'){ obj[id].style.visibility = 'hidden'; } else { obj[id].style.visibility = 'visible'; } } </script> <script type="text/javascript"> function laber_klapp(Id) { var l_text = document.getElementById(Id); if (l_text.style.display == 'none') { l_text.style.display = 'block'; } else { l_text.style.display = 'none'; } } </script> <script type="text/javascript"> function counttext (text, countInput, remainingInput) { if(text == "Text*") return false; var max = Number(remainingInput.defaultValue); countInput.value = text.length; remainingInput.value = max - text.length; return true; } </script> | | | PHP-Code ENDE: (110 Zeilen) | Code markieren | |
Was läuft hier schief ?
- Ein und dieselbe Funktion existiert mehr wie einmal
- Unnötige Scriptöffnungen und Schließungen
Nach dem ersten durchgehen sähe das so aus:
| PHP-Code Anfang: (89 Zeilen) | Code markieren | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | | <script type="text/javascript"> function oeffne(welches) { if(document.getElementById(welches).style.display == 'none') { document.getElementById(welches).style.display = ''; document.getElementById('img'+welches).src = 'images/minus.gif'; }else{ document.getElementById(welches).style.display = 'none'; document.getElementById('img'+welches).src = 'images/plus.gif'; } } function SetzeSmilie(smiliecode) { if(document.le_form.usertext.value == "Text*") document.le_form.usertext.value = " "+smiliecode+" "; else document.le_form.usertext.value += " "+smiliecode+" "; document.le_form.usertext.focus(); } var idLaberFeld = 'usertext'; var rangeIE = null; function LaberText(before, after) { if(document.le_form.usertext.value == "Text*") document.le_form.usertext.value = ""; var labertextfeld = document.getElementById(idLaberFeld); labertextfeld.focus(); if(typeof document.selection != 'undefined') { insertIE(labertextfeld, before, after); } else if (typeof labertextfeld.selectionStart != 'undefined') { insertGecko(labertextfeld, before, after); } } function insertIE(labertextfeld, before, after) { if(!rangeIE) rangeIE = document.selection.createRange(); if(rangeIE.parentElement().id != idLaberFeld) { rangeIE = null; return; } var alterText = rangeIE.text; rangeIE.text = before + alterText + after; if (alterText.length == 0) rangeIE.move('character', -after.length); else rangeIE.moveStart('character', rangeIE.text.length); rangeIE.select(); rangeIE = null; } function insertGecko(labertextfeld, before, after) { from = labertextfeld.selectionStart; by = labertextfeld.selectionEnd; beginn = labertextfeld.value.slice(0, from); middle = labertextfeld.value.slice(from, by); end = labertextfeld.value.slice(by); labertextfeld.value = beginn + before + middle + after + end; if(by - from == 0) { labertextfeld.selectionStart = from + before.length; labertextfeld.selectionEnd = labertextfeld.selectionStart; } else { labertextfeld.selectionEnd = by + before.length + after.length; labertextfeld.selectionStart = labertextfeld.selectionEnd; } } function LeShowHide(id) { obj = document.getElementsByTagName("div"); if (obj[id].style.visibility == 'visible'){ obj[id].style.visibility = 'hidden'; } else { obj[id].style.visibility = 'visible'; } } function laber_klapp(Id) { var l_text = document.getElementById(Id); if (l_text.style.display == 'none') { l_text.style.display = 'block'; } else { l_text.style.display = 'none'; } } function counttext (text, countInput, remainingInput) { if(text == "Text*") return false; var max = Number(remainingInput.defaultValue); countInput.value = text.length; remainingInput.value = max - text.length; return true; } </script> | | | PHP-Code ENDE: (89 Zeilen) | Code markieren | |
So, das sieht schonmal besser aus, ABER es ist noch viel zu groß!
Also werden wir das ganze mal minimieren! Ich habe mir dazu diese Webseite zur Hilfe genommen. Das ganze markieren&kopieren wir in das Textfeld auf der Webseite und klicken auf "Compress Javascript".
Resultat wäre:
| PHP-Code Anfang: (1 Zeile) | Code markieren | | | <script type="text/javascript">function oeffne(welches){if(document.getElementById(welches).style.display=='none'){document.getElementById(welches).style.display='';document.getElementById('img'+welches).src='images/minus.gif'}else{document.getElementById(welches).style.display='none';document.getElementById('img'+welches).src='images/plus.gif'}}function SetzeSmilie(smiliecode){if(document.le_form.usertext.value=="Text*")document.le_form.usertext.value=" "+smiliecode+" ";else document.le_form.usertext.value+=" "+smiliecode+" ";document.le_form.usertext.focus()}var idLaberFeld='usertext';var rangeIE=null;function LaberText(before,after){if(document.le_form.usertext.value=="Text*")document.le_form.usertext.value="";var labertextfeld=document.getElementById(idLaberFeld);labertextfeld.focus();if(typeof document.selection!='undefined'){insertIE(labertextfeld,before,after)}else if(typeof labertextfeld.selectionStart!='undefined'){insertGecko(labertextfeld,before,after)}}function insertIE(labertextfeld,before,after){if(!rangeIE)rangeIE=document.selection.createRange();if(rangeIE.parentElement().id!=idLaberFeld){rangeIE=null;return}var alterText=rangeIE.text;rangeIE.text=before+alterText+after;if(alterText.length==0)rangeIE.move('character',-after.length);else rangeIE.moveStart('character',rangeIE.text.length);rangeIE.select();rangeIE=null}function insertGecko(labertextfeld,before,after){from=labertextfeld.selectionStart;by=labertextfeld.selectionEnd;beginn=labertextfeld.value.slice(0,from);middle=labertextfeld.value.slice(from,by);end=labertextfeld.value.slice(by);labertextfeld.value=beginn+before+middle+after+end;if(by-from==0){labertextfeld.selectionStart=from+before.length;labertextfeld.selectionEnd=labertextfeld.selectionStart}else{labertextfeld.selectionEnd=by+before.length+after.length;labertextfeld.selectionStart=labertextfeld.selectionEnd}}function LeShowHide(id){obj=document.getElementsByTagName("div");if(obj[id].style.visibility=='visible'){obj[id].style.visibility='hidden'}else{obj[id].style.visibility='visible'}}function laber_klapp(Id){var l_text=document.getElementById(Id);if(l_text.style.display=='none'){l_text.style.display='block'}else{l_text.style.display='none'}}function counttext(text,countInput,remainingInput){if(text=="Text*")return false;var max=Number(remainingInput.defaultValue);countInput.value=text.length;remainingInput.value=max-text.length;return true}</script> | | | PHP-Code ENDE: (1 Zeile) | Code markieren | |
Wir haben hier 22% eingespart!
Wesentlich kürzer und schohnender für die Webseite. Zurückkonvertieren könnt Ihr das mit der Webseite hier. Komprimierte Javascript Zeile in das Fenster kopieren und auf "Beautifier" klicken.
|
|
|
|
|
|
|