2012-09-12 14 views
5

Ho un codice procedurale javascript che ho scritto per un'applicazione open-source e mi piacerebbe rifattarlo in OOP e poiché ho poca esperienza con i framework javascript ho difficoltà a trovare un uno adatto alle mie esigenze, anche se non ho ancora provato nulla, ho appena letto su AngularJS, Backbone.js e Knockout.Framework per strutturare il codice JS esistente

Voglio strutturare il codice, perché, al momento, c'è un pasticcio, variabili globali e funzioni sparse in giro.

Devo dire che tutta la logica aziendale è gestita a livello di server, quindi il codice lato client gestisce solo l'interfaccia utente utilizzando i dati che riceve o richieste dal server.

Il codice può essere trovato qui: https://github.com/paullik/webchat/blob/asp.net/webchat/Static/Js/chat.js

Avete qualche suggerimento?

+0

In primo luogo, raccomando vivamente di cogliere i fondamenti di javascript prima di decidere di utilizzare un framework; non è difficile creare un javascript orientato agli oggetti ([questo è assolutamente da leggere] (http://shop.oreilly.com/product/9780596517748.do)). Esistono numerosi framework (nodo, colonna vertebrale, backbone ecc.) Che forniscono i propri modi per definire ed estendere gli oggetti, ma non ne conosco abbastanza per fornire un confronto decente. – RobMasters

+0

@RobMasters JS non è un mio problema, forse non sono a conoscenza di ogni trucco in JS, ma posso scrivere JS senza problemi. Comunque, grazie per il suggerimento, inserirò sicuramente il link che hai indicato. – Paul

risposta

5

JavaScript orientato agli oggetti non è necessariamente la soluzione per tutti i tuoi problemi di .

Il mio consiglio è di fare attenzione alla scelta scelta su questo argomento.

In pratica, OO-JS può aggiungere più complessità al codice al fine di cercare di essere più come i tradizionali linguaggi orientati agli oggetti. Come probabilmente sai, JS è unico.

È importante sapere che esistono schemi di progettazione che strutturano il codice e mantengono l'implementazione leggera e flessibile.

È Design Patterns che vedo strutturare implementazioni JS avanzate, non OO. Per parafrasare Axel Rauchmeyer - "La metodologia orientata agli oggetti non si adatta alla sintassi di base JavaScript, è un'implementazione contorta e contorta, e JS è molto più espressivo con fuori."

La radice di questa analisi si riduce al fatto che JS non ha classe. Essenzialmente, poiché tutto è un oggetto, hai già variabili e funzioni orientate agli oggetti. Quindi il problema è leggermente diverso da quello trovato nei linguaggi compilati (C/Java).

Quali modelli di progettazione sono disponibili per JavaScript?

Un'eccellente risorsa da controllare è Addy O 'Somani ed Essential Design Patterns. He wrote this book on Design Patterns in JavaScript.

Ma c'è di più ... molto di più.

A. require.js - C'è un modo per caricare moduli di codice JS in modo molto impressionante. Questi sono generalmente chiamati caricatori di moduli e sono ampiamente considerati il ​​futuro del caricamento di file js poiché ottimizzano le prestazioni in fase di runtime. yepnope e altri esistono. Tienilo a mente se stai caricando più di un paio di file js. (spostato verso l'alto su richiesta).

B. MVC - Esistono dozzine di framework Model View Controller per semplificare il codice di struttura. È un modello, ma potrebbe essere irragionevole per i tuoi scopi.Hai citato spina dorsale, a eliminazione diretta e angolare ... Sì. Questi possono fare il trucco per te, ma sarei preoccupato che potrebbero essere 1) alta curva di apprendimento, e 2) eccessivo per il tuo ambiente.

C. Namespace o Pattern modulo. Sono probabilmente i più importanti per le tue esigenze. Per risolvere le variabili globali, basta racchiuderle in uno spazio dei nomi e fare riferimento a ciò. Questi sono ottimi modelli che danno origine a caricatori di moduli.

D. Chiusura - Lei ha menzionato OO JS. Su un pezzo di questo è utile la nozione di chiusure per fornirti ... membri privati. All'inizio questa è un'idea criptica, ma dopo aver riconosciuto il modello, è pratica banale.

E. Eventi personalizzati: diventa molto importante non utilizzare riferimenti rigidi tra gli oggetti. Esempio: AnotherObject.member; Questo perché accoppierà strettamente i due oggetti e renderà entrambi flessibili da cambiare. Per risolvere questo, innescare e ascoltare gli eventi. Nei modelli di design tradizionali questo è l'Observer. In JS si chiama PubSub.

F. Il callback - Il pattern di callback è ciò che ha permesso AJAX e sta rivoluzionando lo sviluppo in termini di Window 8, Firefox OS e Node.js - a causa di qualcosa chiamato non-blocking-io. Molto importante.

Non aver paura. Questa è la direzione da seguire per implementazioni JavaScript a lungo termine e avanzate.

Una volta riconosciuti gli schemi, è in discesa da lì.

Spero che questo aiuti.

+1

Vorrei mettere RequireJS in cima. Fornisce modularità, gestisce le dipendenze dei moduli e consente di automatizzare la costruzione/la minimizzazione in modo intelligente. Indipendentemente da ciò che viene utilizzato in basso, require.js apporta molta sanità mentale a una base di codice più ampia. Ci sono anche alternative, ma l'approccio generale di AMD (Asynchronous Module Definition) è un must da conquistare. Ad ogni modo, potrei riformulare la tua risposta, e qualcuno potrebbe voler riformulare il mio, ma l'approccio generale e l'elenco delle cose da sapere saranno essenzialmente le stesse. –

+0

In effetti, buon suggerimento, cambio fatto. +1 –

+1

Grazie, quindi ho deciso di non utilizzare un framework (diverso da require.js forse), ma invece di rifattorizzare il mio codice usando alcuni dei concetti che hai elencato lì (alcuni dei quali sono già familiari e li uso in codice frequentemente). Anche una struttura multi-file di namespace può portare ordine al mio codice JS. – Paul

Problemi correlati