Suche
Teilen
startseite » forum

JavaScript optimieren

  • einpraegsam.net einpraegs...
    MacGyver
    0 x
    9340 Beiträge
    80 Hilfreiche Beiträge
    09. 08. 2008, 09:33

    Hi,

    ich habe meine letzten Extension zum Anlass genommen etwas mehr in JavaScript zu machen.

    Wenn man sich vorhandene Extensions anschaut, die JS wie prototype oder mootools nutzen, merkt man, dass es immer wieder zu Problemen kommt ("Die beiden JS vertragen sich nicht").

    Wie kann man das verhindern? Woran liegt überhaupt der Fehler (eventl. gleiche Funktionsnamen?)

    Grüße, Alex

    in2code.de - Wir leben TYPO3
    - Möchtest du TYPO3 komplett verstehen? Eigene Erweiterungen erstellen? Bei uns gibt es auch Schulungen https://www.in2code.de/produkte/typo3-schulungen/
    - Die Arbeit mit TYPO3 macht dir Spaß? Du stehst auf Berge? Komm zu uns! https://www.in2code.de/agentur/karriere/

  • 1
  • SLAng SLAng
    Flash Gordon
    0 x
    2757 Beiträge
    0 Hilfreiche Beiträge
    09. 08. 2008, 16:50

    Das würde mich auch sehr interessieren... Wenn das ginge, könnte ich endlich RgTABS nutzen.

  • Ascarion Ascarion
    R2-D2
    0 x
    72 Beiträge
    0 Hilfreiche Beiträge
    14. 08. 2008, 19:39

    jQuery z. B. verwendet im globalen Namespace die Variable [i]jQuery[/i]. Um den Code abzukürzen wird allerdings [i]$[/i] als Alias für [i]jQuery[/i] genutzt.

    Also lässt sich z. B.

    1. jQuery('#xyz').show();

    abkürzen mit
    1. $('#xyz').show();

    Allerdings wird von anderen Frameworks auch [i]$[/i] verwendet. Deswegen „gewinnt“ quasi immer das zuletzt geladene.
    jQuery bietet allerdings die Möglichkeit, mit der noConflict-Funktion [i]$[/i] freizugeben, so dass es prinzipiell mit anderen Frameworks zusammen funktioniert. Trotzdem kann man dann [i]$[/i] im Zusammenhang mit jQuery benutzen:

    1. (function($){
    2. 	$('#xyz').html('Hier ist $ == jQuery');
    3. })(jQuery);

  • einpraegsam.net einpraegs...
    MacGyver
    0 x
    9340 Beiträge
    80 Hilfreiche Beiträge
    14. 08. 2008, 21:31

    ok, das war ein Beispiel. Macht es also Sinn eher auf Klassen anstatt auf nur Funktionen zu setzen? Oder noch etwas anderes?

    in2code.de - Wir leben TYPO3
    - Möchtest du TYPO3 komplett verstehen? Eigene Erweiterungen erstellen? Bei uns gibt es auch Schulungen https://www.in2code.de/produkte/typo3-schulungen/
    - Die Arbeit mit TYPO3 macht dir Spaß? Du stehst auf Berge? Komm zu uns! https://www.in2code.de/agentur/karriere/

  • cope cope
    Jedi-Ratsmitglied
    0 x
    582 Beiträge
    0 Hilfreiche Beiträge
    15. 08. 2008, 00:22

    Hallo wunsch... äh einpraegsam.net

    es macht mehr Sinn auf Klassen zu setzten als auf Funktionen. Ich schätze, dass sich auch JavaScript weiterentwickeln wird und auch den nächsten, sagen wir mal Hype "Aspektorientiert", mitnimmt.

    LG
    Cope

  • einpraegsam.net einpraegs...
    MacGyver
    0 x
    9340 Beiträge
    80 Hilfreiche Beiträge
    15. 08. 2008, 11:58

    Gibts irgendwo eine Anleitung like "How to create fine JS"?

    in2code.de - Wir leben TYPO3
    - Möchtest du TYPO3 komplett verstehen? Eigene Erweiterungen erstellen? Bei uns gibt es auch Schulungen https://www.in2code.de/produkte/typo3-schulungen/
    - Die Arbeit mit TYPO3 macht dir Spaß? Du stehst auf Berge? Komm zu uns! https://www.in2code.de/agentur/karriere/

  • cope cope
    Jedi-Ratsmitglied
    0 x
    582 Beiträge
    0 Hilfreiche Beiträge
    15. 08. 2008, 16:23

    sowas hier?
    [url]http://www.drweb.de/javascript/javascript_performance.shtml[/url]

  • einpraegsam.net einpraegs...
    MacGyver
    0 x
    9340 Beiträge
    80 Hilfreiche Beiträge
    15. 08. 2008, 19:40

    Hi,

    schon mal nicht schlecht - ein paar Performance Tipps.

    Aber ich weiß immer noch nicht nicht warum sich prototype und mootools nicht mögen, bzw. was ich bei meinem eigenen JS verbessern kann um so etwas zu vermeiden...

    in2code.de - Wir leben TYPO3
    - Möchtest du TYPO3 komplett verstehen? Eigene Erweiterungen erstellen? Bei uns gibt es auch Schulungen https://www.in2code.de/produkte/typo3-schulungen/
    - Die Arbeit mit TYPO3 macht dir Spaß? Du stehst auf Berge? Komm zu uns! https://www.in2code.de/agentur/karriere/

  • einpraegsam.net einpraegs...
    MacGyver
    0 x
    9340 Beiträge
    80 Hilfreiche Beiträge
    15. 08. 2008, 19:40

    Vielleicht sollte ich mal in einem JS Forum posten :)

    in2code.de - Wir leben TYPO3
    - Möchtest du TYPO3 komplett verstehen? Eigene Erweiterungen erstellen? Bei uns gibt es auch Schulungen https://www.in2code.de/produkte/typo3-schulungen/
    - Die Arbeit mit TYPO3 macht dir Spaß? Du stehst auf Berge? Komm zu uns! https://www.in2code.de/agentur/karriere/

  • _Andreas_ _Andreas_
    Padawan
    0 x
    40 Beiträge
    0 Hilfreiche Beiträge
    28. 08. 2008, 14:17

    Hallo,
    [quote="einpraegsam.net"]
    Aber ich weiß immer noch nicht nicht warum sich prototype und mootools nicht mögen, bzw. was ich bei meinem eigenen JS verbessern kann um so etwas zu vermeiden...
    [/quote]
    einen konkreten Lösungsvorschlag habe ich nicht, aber gerade heute hat mich genau dieses Problem beschfätigt:

    Ein Beispiel:
    Auf einer Seite gibt es ein (Powermail-)Formular mit Upload-Möglichkeit und JS-Validierung.

    Aufgrund des Upload-Felds, welches in jedem Browser anders breit angezeigt wird, lese ich mit Mootools die aktuelle Breite aus und setzte die anderen Input-Felder wie folgt: 

    1. window.addEvent('domready', function() {
    2.   var currentWidth = $('uid4').getSize().size.x-6;
    3.   $('uid1').setStyle('width', currentWidth);
    4.   $('uid3').setStyle('width', currentWidth);
    5. });

    Sobald die Validierung aktiviert ist, wird das Prototype-Framework geladen.

    In Prototype gibt es aber auch eine Funktion setStyle, die leider eine andere Syntax, als in Mootools hat. Deshalb funktioniert das setzen der Breite nun nicht mehr.
    Für Prototype müsste es wie folgt aussehen:

    1. window.addEvent('domready', function() {
    2.   var currentWidth = $('uid4').getSize().size.x-6;
    3.   $('uid1').setStyle({width: currentWidth});
    4.   $('uid13).setStyle({width: currentWidth});
    5. });

    Mootools erst nach Prototype zu laden löst zwar das Problem mit der Breite, dann werden aber die Validation-Advices nicht mehr angezeigt, weil deren setStyle nicht mit Mootools kompatibel ist.

    Mein erster Lösungsversuch war es, in prototype.js die Funktion "setStyle" in "PTsetStyle" umzubenennen und dann die Aufrufe in "effects.js", "dragdrop.js" usw. auch in PTsetStyle umzubenennen.
    Das hat zwar prinzipiell funktioniert, ist aber keine schöne Lösung, da beim nächsten Update wieder alles weg ist. Zudem gibt es, so wie es aussieht noch weitere Überschneidungen in den Funktionsnahmen, sodass derzeit bei dieser Seite immer mehr Probleme auftreten.

    Bei manchen Extensions kann man auswählen, ob man das Mootools oder Prototype-Framework verwenden will. Dann müsstest Du aber je nach Auswahl anderen JS-Files laden, die den jeweiligen Frameworks entsprechen. Oder Du programmierst eine Schnittstelle zu den Frameworks, also zB Wrapper-Funktionen für die benötigten Optionen. Dort rufst Du dann Deine Funktionen aus, die im Hintergrund je nach Framework die gewünschten Funktionsaufrufe machen. Das stelle ich mir aber wahnsinnig aufwändig vor. Bzw. müsste man nachschauen, wie das die andren Extension-Entwickler (die mehrere Frameworks anbieten) gehandhabt haben.

    Jedenfalls bedeutet es vor allem für Dich als Extension-Entwickler mehr Aufwand, für den Benutzer der Extension hat es den Vorteil, dass nicht zwei Frameworks geladen werden müssen.

    Viele Grüße
    Andreas

  • 1
Präsentiert von
Mittwald
Nützliche Links
TYPO3 Dokumentation
eStrategy
webworker Magazin