Wie behälst du ein komplexes JavaScript-Projekt auf?

7

Ich verwende Firebug, um herauszufinden, was in meinem JavaScript-Code (+ JQuery) vor sich geht. Ich benutze es hauptsächlich, um Tonnen von console.log -Aussagen auszudrucken. Dies ist wahrscheinlich nicht der effizienteste Weg, um auf dem Projekt zu bleiben. Da es von ein paar Funktionen auf über hundert angewachsen ist, fange ich an, darüber verwirrt zu werden, wie alles zusammenpasst. Ich meine, es funktioniert irgendwie, aber wenn ich mir den Code anschaue, fühle ich mich fast wie jemand, der ihn geschrieben hat, weil er so verwirrend ist.

Jetzt habe ich eine verrückte Menge von console.log -Anweisungen in der Konsole, wenn ich meine App in Firebug starte und ich habe sie dort gelassen, weil ich sie immer wieder neu erstelle, wenn ich etwas davon herausnehme. Das macht die Dinge noch verwirrender, als wenn ich überhaupt kein Logging hätte. Ich habe mich nie wirklich mit dem Debuggen beschäftigt - Breakpoints, Watch-Variablen usw. - wäre das ein guter Weg, um die Kontrolle über dieses Projekt zurückzugewinnen, oder gibt es noch andere Tools, die helfen könnten?

Ich habe darüber nachgedacht, ein Diagramm meines gesamten CSS zu zeichnen und versuche, die Klassen und IDs den entsprechenden Funktionen in meinem JavaScript zuzuordnen. Dieses Projekt verwendet eine Vielzahl von Funktionen für die Interaktion und das Ein- / Ausblenden basierend auf einem komplexen Satz von Kombinationen von Anwendungszuständen, die näher an dem sind, was Sie vielleicht in einer Flash / Flex-Anwendung finden würden.

Irgendwelche Vorschläge für Tools oder Ansätze, die helfen könnten, die Kontrolle über dieses Projekt zurückzugewinnen, wären willkommen. Als ich mit diesem Projekt anfing, fühlte ich mich wirklich gut, weil es so gut aussah und die Leute mir Komplimente machten, wie cool es war, aber jetzt fühlt es sich einfach wie ein Mißerfolg an, denn ich glaube nicht, dass ich erklären könnte, wie es funktioniert Vorstellungsgespräch, wenn ich musste.

    
James H. 19.07.2009, 03:26
quelle

8 Antworten

11

Halten Sie Ihren Code organisiert. Verwenden Sie Namespaces, um sie in logische Module aufzuteilen. Es kann auch sinnvoll sein, nach gemeinsamen Interaktionsmustern zu suchen und generischen wiederverwendbaren Code zu entwickeln.

Ich versuche, jedes neue Feature als jQuery-Plugin zu schreiben. Das zwingt mich, wiederverwendbaren Code zu schreiben, der nicht so gut mit Stil und Markup gekoppelt ist.

    
Chetan Sastry 19.07.2009 03:38
quelle
8

Ich habe in einem Web2.0 mit vielen Java-Skripten und so weiter gearbeitet. Ich gebe ein paar Tipps, die mir geholfen haben:

Probieren Sie aptana aus, helfen Sie bei der Codeergänzung, Validierungen usw. (haben Sie ext-je, Jquery-Plugins)

Probieren Sie JSLint aus, damit ich Probleme lösen kann, insbesondere beim Umgang mit dem Internet Explorer.

>

Probieren Sie YSlow aus, um die Bewertungen Ihrer Website zu sehen.

Probieren Sie WATIR , ein Tool aus, mit dem Sie viele Testfälle erstellen können: Klicken Sie irgendwo, wo ein Text angezeigt wird einige, wo, schreiben Sie eine Zeichenfolge in ein Feld, generieren Sie Protokolle.

Denken Sie daran, IDs überall dort einzutragen, wo Sie könnten.

Definieren Sie eine Code-Konventionen könnten helfen. ( link1 - link2 )

[Aktualisierung] Ich habe in meinem Lesezeichen nachgesehen und ein sehr gutes Video über: Wartbares JavaScript schaut es euch an.

Ich hoffe, diese einfachen Tipps könnten Ihnen helfen!

Prost!

    
rafa.ferreira 19.07.2009 04:38
quelle
4

Vielleicht möchten Sie die Einführung von tatsächlichen Komponententests in Ihren Code untersuchen. Es gibt eine Vielzahl von javacscript-Unit-Testplattformen, z. B. fireunit . Wenn Sie bereits FireBug installiert haben, ist dies ein ziemlich kurzer Sprung in die glückliche Komfortzone!

Probieren Sie es aus, selbst kleine Mengen an Testeinheiten helfen Ihnen dabei, Ihre Gedanken zu beruhigen!

    
Thunder3 19.07.2009 03:34
quelle
3

Jedes Mal, wenn ein Programm von dir wegrutscht, musst du anhalten und genau überlegen, wie es in Stücke gebrochen werden kann. Denken Sie darüber nach, die JS in separate Dateien zu zerlegen, damit Sie das Ganze nicht sofort in Ihrem Kopf behalten müssen. Alles, was Sie als "fertig" behandeln können, kann zu einer Schnittstelle gemacht werden, an der Sie sich nicht mehr um den Mut kümmern.

Es geht darum, das Chaos zu verstecken. Ob es OO oder prozedural ist. Viele Leute haben das gleiche Problem mit PHP und C wie Sie mit JavaScript haben, so dass Sie nach "PHP Spaghetti" suchen und ein paar gute Tipps bekommen können.

    
Nosredna 19.07.2009 03:59
quelle
1

Verwenden Sie einen guten JavaScript-Debugger wie Firebug und die Debugger-Anweisung, um Haltepunkte zu Ihrem JavaScript hinzuzufügen. Sei nur vorsichtig, sie zu entfernen, nachdem du fertig bist.

    
Joe Chung 19.07.2009 04:18
quelle
1

Vielleicht möchten Sie darüber nachdenken, GWT zu verwenden.

  • Hervorragende Unterstützung.
  • Klassen
  • Fähigkeit zum Refactoring.
  • Keine Namensraumkonventionen - verwenden Sie Pakete.

Für eine umfassendere Liste von "Gründen" lesen Sie die vom GWT-Team gegebenen.

    
mP. 19.07.2009 05:07
quelle
1

Wenn es zu komplex wird, machst du zu viel, also behalte es einfach (dh brich es in überschaubare und wiederverwendbare Stücke, damit du anstelle einer Titanic viele kompakte Rettungsboote hast). Dies könnte der beste nicht-technische Ratschlag sein, den jeder Ihnen geben kann - und es ist gültig.

    
Fake Code Monkey Rashid 19.07.2009 03:32
quelle
1

Eine Sache, die mir geholfen hat, eine komplexe JavaScript-Code-Basis, die ich geerbt habe, zu verstehen, war die AOP-Paket im Dojo. . Dadurch können Sie einen schön formatierten Ausführungspfad Ihres Codes erhalten (ähnlich wie Firebugs Profil, aber in einer Liste in der Reihenfolge, in der die Methoden aufgerufen wurden).

Ich weiß nicht, ob jQuery etwas Ähnliches hat, aber es könnte sich lohnen, es zu untersuchen, weil es die Rotze aus der Sammlung Ihrer Code-Basis mit Log-Anweisungen übertrifft, die Sie entfernen können (oder nicht müssen).

Sobald Sie wissen, wie die Dinge funktionieren, können Sie sie mit einigen der ausgezeichneten Tipps neu organisieren.

    
seth 19.07.2009 08:11
quelle

Tags und Links