2010-12-17 7 views
12

Ich habe etwas Erfahrung mit JavaScript - aber hauptsächlich mit einigen kleinen Sachen, habe ich nie etwas wirklich großes in Javascript zuvor.Tipps für die Arbeit an einem großen Javascript-Projekt

Im Moment mache ich ein ziemlich großes JavaScript-Projekt, ein jquery-basiertes Frontend, das mit dem serverseitigen Backend kommuniziert, indem ich JSON über Ajax senden/empfangen kann.

Ich frage mich, ob Sie einige nützliche Informationen zum Umgang mit großen Javascript-Projekten zur Verfügung stellen könnten - gibt es hilfreiche Tools/Bibliotheken/gute Praktiken?

Vielen Dank im Voraus.

+0

Stellen Sie sicher, Sie minimieren und gzip Ihr ​​Javascript für den Client. – Asaph

+0

@grigory es gibt keine Notwendigkeit für irgendwelche Werkzeuge, schreibe einige generische Hilfsfunktionen und gemeinsame Funktionen für wiederholten Code – kobe

+1

und Sie haben Stackoverflow mit Ihnen – kobe

Antwort

2

Grigory,

Auch zog ich von einem Back-End UI paar Monaten nur diesen Ansatz folgen

  1. alle Konzepte von jquery lesen entweder von Google oder durch einige Buch oder durch jquery Dokumentation.
  2. einige der jquery Best Practices folgen http://psdcollector.blogspot.com/2010/03/77-best-jquery-tips-i-have-ever-read.html
  3. Schreib utitlity Funktionen für alle wiederholten Code wie GetCookie, subsstrings etc etc
  4. halten Sie Ihren Code von erfahrenen Person überprüft zu werden, die Sie
  5. Post führen können, wenn Sie Stackoverflow irgendwo stecken bleiben.
  6. wie es großes Projekt ist, teilen Sie in multiple Dateien und benutzen Sie die korrekte Namensüberzeugung.

lassen Sie es mich wissen, wenn Sie etwas anderes

+0

+1, benutze Namenskonventionen, Namespaces, Objekte! Lassen Sie sich nicht von Old-School-Javascript oder seinem Tutorial verführen - das Internet ist voll von veralteten Ressourcen auf JS. – Konerak

+0

Danke! Will do :-) –

+0

@grigory, lassen Sie uns wissen, wenn Sie Hilfe brauchen, ich arbeite auch an großen jquery JSON-Projekt – kobe

2

jQuery and YUI 3: A Tale of Two JavaScript Libraries ist ein schöner Vergleich von ihnen im Kontext einer komplexen Anwendung, und gibt auch nützliche Hinweise für jQuery-Programmierer.

+0

Warum war das abgewählt? Für mich extrem relevant. Selbst wenn das Poster sich nicht von jQuery entfernen wird, sollte er wissen, womit er es zu tun hat. – mwilcox

+0

Wenn Sie Antworten auf solch eine breite Frage abstimmen wollen, fügen Sie zumindest hinzu, warum die Antwort falsch/gefährlich ist - auch wenn es nicht * die * richtige Antwort ist. – Konerak

4

Sie möchten auszuchecken Backbone.js

Backbone liefert Struktur JavaScript-lastige Anwendungen von Modelle mit der Bereitstellung von Schlüsselwert Bindung und benutzerdefinierte Ereignisse, Sammlungen mit einer reichhaltigen API von aufzählbar Funktionen, Ansichten mit deklarativen Ereignisbehandlung, und verbindet alles mit Ihre bestehende Anwendung über eine RESTful JSON-Schnittstelle.

1

Der beste Rat ist, Ihren Code in verschiedenen Dateien als "Klassen" zu segmentieren. Ich persönlich hasse es, in einer Datei zu arbeiten, die mehr als ein paar hundert Zeilen lang ist.

Dann montieren und Ihren Code mit einem der Werkzeuge auf dem Netz minify, wie Shrinksafe oder Google Closure Compiler

Beachten Sie, dass Dojo, YUI und Ext sind alle großen Ajax-Anwendungen zu behandeln entworfen. Sie werden ein wenig mit jQuery kämpfen. Aber ich denke, diese App ist nicht alles , dass groß und du solltest in Ordnung sein.

0

Haben Sie MooTools?

MooTools ist ein kompaktes, modulares Auschecken betrachten, Object-Oriented JavaScript framework auf erweiterte JavaScript-Entwickler für die Zwischen entworfen. Es ermöglicht Ihnen, leistungsstarken, flexiblen und browserübergreifenden Code mit seiner eleganten, gut dokumentierten und kohärenten API zu schreiben.

5

Meine einzige große Spitze würde

In JavaScript modularisieren, ist es sehr einfach für andere Variablen Variablen verprügeln. Um dies zu vermeiden, ist Modularisierung ein Muss. Es gibt mehrere Möglichkeiten, die JavaScripts-Bereichsregeln zu nutzen, um die Möglichkeit von Variablenkonflikten zu minimieren.

var myProject = {}; 

myProject.form = function(p_name, p_method, p_action) 
{ 
    var name = p_name, 
     method = p_method, 
     action = p_action; 
    var addInput = function(p_input) 
    { 
     // etc... 
    } 

    return { 
     addInput: addInput, 
     name: name 
    }; 
} 

myProject.input = function(p_name, p_type, p_value) 
{ 
    var name, method, value; 
    var setValue = function(p_value) 
    { 
     value = p_value; 
     return true; 
    } 

    return { 
     setValue: setValue, 
     name: name 
    }; 
} 

// etc... 

Wenn Sie vorsichtig sind über var verwenden, und halten Sie den Überblick über Ihre Funktionsumfang, dann haben Sie nur eine globale Variable - myProject.

Um ein neues Formularobjekt zu erhalten, gehen Sie einfach wie folgt vor: var myForm = myProject.form('form1', 'post', 'post.php').

Verwandte Themen