2012-09-12 11 views
5

Ich habe einige prozedurale JavaScript-Code, den ich für eine Open-Source-Anwendung geschrieben habe und ich möchte es in OOP umgestalten und da ich sehr wenig Erfahrung mit Javascript-Frameworks habe ich Probleme zu finden ein für meine Bedürfnisse geeignetes, obwohl ich noch nichts ausprobiert habe, habe ich gerade über AngularJS, Backbone.js und Knockout gelesen.Framework zum Strukturieren bestehender JS-Code

Ich möchte den Code strukturieren, weil im Moment ein Durcheinander, globale Variablen und Funktionen verstreut sind.

Ich muss erwähnen, dass die gesamte Geschäftslogik auf Serverebene behandelt wird, so dass der clientseitige Code nur die Benutzeroberfläche verarbeitet, die die Daten verwendet, die er empfängt oder vom Server anfordert.

Der Code kann hier gefunden werden: https://github.com/paullik/webchat/blob/asp.net/webchat/Static/Js/chat.js

Haben Sie irgendwelche Vorschläge?

+0

Erstens würde ich sehr empfehlen, dass Sie die Grundlagen von Javascript begreifen, bevor Sie sich entscheiden, ein Framework zu verwenden; Es ist nicht schwer, objektorientiertes JavaScript zu erstellen ([das ist ein Muss] (http://shop.oreilly.com/product/9780596517748.do)). Es gibt zahlreiche Frameworks (Knoten, Wirbelsäule, Rückgrat usw.), die ihre eigenen Möglichkeiten zum Definieren und Erweitern von Objekten bereitstellen, aber ich weiß nicht genug über sie, um einen anständigen Vergleich zu geben. – RobMasters

+0

@RobMasters JS ist nicht mein Problem, vielleicht weiß ich nicht jeden Trick in JS, aber ich kann JS ohne Probleme schreiben. Wie auch immer, danke für den Vorschlag, ich werde sicher den Link, auf den Sie verwiesen haben, mit einem Lesezeichen versehen. – Paul

Antwort

5

Objektorientierte JavaScript ist nicht unbedingt die Antwort auf alle Ihre Probleme.

Mein Rat ist, vorsichtig zu sein, die Wahl, die Sie zu diesem Thema treffen.

In der Praxis kann OO-JS Ihrem Code mehr Komplexität hinzufügen, um mehr traditionellen objektorientierten Sprachen ähneln zu können. Wie Sie wahrscheinlich wissen, ist JS einzigartig.

Es ist wichtig zu wissen, dass es Design Patterns gibt, die Ihren Code strukturieren und die Implementierung leicht und flexibel halten.

Es ist Design Patterns, die ich sehe Strukturierung erweiterte JS Implementierungen, nicht OO. Axel Rauchmeyer zu paraphrasieren - "Objekt Orientierte Methodik passt nicht in grundlegende JavaScript-Syntax, es ist eine verdrehte und verzerrte Implementierung, und JS ist weit ausdrucksvoller ohne es."

Die Wurzel dieser Analyse läuft darauf hinaus, dass JS keine Klasse hat. Da alles ein Objekt ist, haben Sie bereits objektorientierte Variablen und Funktionen. Somit unterscheidet sich das Problem geringfügig von dem in kompilierten Sprachen (C/Java).

Welche Entwurfsmuster gibt es für JavaScript?

Eine ausgezeichnete Ressource zu überprüfen ist Addy O 'Somani und Essential Design Patterns. He wrote this book on Design Patterns in JavaScript.

Aber es gibt mehr ... viel mehr.

A. require.js - Es gibt eine Möglichkeit, Module von JS-Code auf sehr beeindruckende Weise zu laden. Diese Module werden allgemein als Modulladeprogramme bezeichnet und gelten weithin als die Zukunft beim Laden von js-Dateien, da sie die Leistung zur Laufzeit optimieren. Yepnope und andere existieren. Beachten Sie dies, wenn Sie mehr als ein paar js-Dateien laden. (auf Anfrage nach oben verschoben).

B. MVC - Es gibt Dutzende von Model View Controller-Frameworks, die Ihnen helfen, Code zu strukturieren. Es ist ein Muster, aber kann für Ihre Zwecke unangemessen sein.Du hast Backbone, Knockout und eckig erwähnt ... Ja. Diese können den Trick für Sie tun, aber ich wäre besorgt, dass sie 1) hohe Lernkurve und 2) Overkill für Ihre Umgebung sein könnten.

C. Namensraum oder Modulmuster. Sind wahrscheinlich die wichtigsten für Ihre Bedürfnisse. Um globale Variablen zu lösen, wickle sie einfach in einen Namespace und verweise darauf. Dies sind sehr gute Muster, die zu Modulladern führen.

D. Schließung - Sie erwähnten OO JS. Ein Stück davon ist die Vorstellung von Schließungen, um sich mit ... privaten Mitgliedern zu versorgen. Das ist zunächst eine kryptische Idee, aber nachdem Sie das Muster erkannt haben, ist es eine triviale Übung.

E. Benutzerdefinierte Ereignisse - Es wird sehr wichtig, keine harten Referenzen zwischen Objekten zu verwenden. Beispiel: AnotherObject.member; Dies liegt daran, dass es die beiden Objekte eng aneinander koppelt und beide unflexibel werden lässt. Um dies zu lösen, triggern und hören Sie Ereignisse. In traditionellen Design Patterns ist dies der Observer. In JS heißt es PubSub.

F. Der Rückruf - Die Callback-Muster ist, was AJAX aktiviert und es revolutioniert die Entwicklung in Bezug auf die Fenster 8, Firefox OS und Node.js - wegen etwas non-blocking-io bezeichnet. Sehr wichtig.

Haben Sie keine Angst. Dies ist die Richtung für langfristige und erweiterte JavaScript-Implementierungen.

Sobald Sie die Muster erkennen, ist es von dort aus Hügel.

Hoffe, das hilft.

+1

Ich würde das RequireJS oben setzen. Es bietet Modularität, bewältigt Modulabhängigkeiten und ermöglicht intelligentes Bauen/Verkleinern. Unabhängig davon, was darunter verwendet wird, bringt require.js einer größeren Codebasis viel Verstand. Es gibt auch Alternativen, aber der allgemeine Ansatz von AMD (Asynchronous Module Definition) ist ein Muss zu erobern. Wie auch immer, ich könnte Ihre Antwort umformulieren, und jemand möchte vielleicht meine neu formulieren, aber die allgemeine Herangehensweise und die Liste der Dinge zu wissen wird im Wesentlichen die gleiche sein. –

+0

In der Tat, guter Vorschlag, Änderung gemacht. +1 –

+1

Danke, also entschied ich mich, kein Framework zu verwenden (außer require.js vielleicht), sondern stattdessen meinen Code mit einigen der hier aufgelisteten Konzepte zu refaktorieren (von denen ich einige bereits kenne und in ihnen verwende) häufig codieren). Auch eine Namespace-Struktur mit mehreren Dateien kann Ordnung in meinen JS-Code bringen. – Paul

Verwandte Themen