Come rendere il codice javascript facile alla manutenzione

Question

Tutti, sto lavorando a un'applicazione web altamente interattiva che richiede molto jQuery o codice js, E sto scoprendo che il mio codice sta diventando un po 'difficile da mantenere e non è tutto ciò che è leggibile. A volte anche l'autore non riesce a trovare il codice specificato.

Finora quello che ho fatto per il codice chiaro è sotto.

1. Un componente js in un unico file js. (Per esempio. CustomTab.js è un componente scheda nella mia app.)
2. Utilizzando il templete per generare codice HTML monocomponente a base di JSON.
3. Utilizzo dell'interfaccia utente di Jquery.
4. JavaScript non intrusivo.

C'è qualche altro punto che devo prestare attenzione? Ad ogni modo, qualsiasi suggerimento o suggerimento di una tecnica per rendere la libreria/framework js facile alla miananance è apprezzabile, grazie.

Answer 1

Potrei suggerire di utilizzare il modello di modulo insieme a RequireJS per organizzare il codice JavaScript. Per la produzione sarai in grado di utilizzare RequireJS optimizer per creare i tuoi moduli in un unico file JavaScript.

Inoltre, se ti aspetti che la tua applicazione lato client sia enorme, considera di utilizzare alcuni framework MVC JavaScript come Backbone.js insieme al servizio RESTful sul lato server.

Answer 2

Io uso questo schema namespacing per le mie librerie:

MyLibrary.ListView.js:

var MyLibrary = MyLibrary || {}; 

MyLibrary.ListView = { 

    doSomethingOnListView: function() { 
     ... 
     return this; 
    }, 

    doSpecialThing: function() { 
     ... 
     return this; 
    }, 

    init: function() { 

     // Additional methods to run for all pages 
     this.doSomethingOnListView(); 

     return this; 
    } 
}; 

Qualunque sia la pagina ha bisogno di questo:

<script type="text/javascript" src="/js/MyLibrary.ListView.js"></script> 
<script type="text/javascript"> 
$(function() { 
    MyLibrary.ListView 
     .init() 
     .doSpecialThing(); 
}); 
</script> 

si può anche metodi catena se un certo pagina richiede una funzione aggiuntiva.

Answer 3

Attualmente sto anche lavorando a un framework JS per la mia azienda. Quello che sto facendo è usare gli elementi OOP per JS. In altre parole sto implementando un codice simile alle librerie C# (non così simile, la simulazione sarà la parola corretta). Come esempio in C# si usa Microsoft.Window.Forms, quindi posso usare JSOOP e usare il metodo estendendolo e sovrascrivendolo per creare lo stesso scenario. Ma se sei andato molto lontano nel tuo progetto, la conversione del tuo codice JS in JSOOP richiederà molto tempo.

usa JSLint, questo convaliderà il tuo codice e ridurrà a un codice leggibile, compatibile con lo script. Sebbene JSLint sia molto rigido, puoi usare anche JSHint.

utilizzando un file separato per ogni componente è una buona idea lo sto facendo anche io.

Se ti piace, puoi scaricare la versione degli sviluppatori jQuery e puoi avere un'idea generale di come hanno creato il framework. Ho imparato molte cose guardando il framework jQuery!

Answer 4

Questa è esattamente la stessa domanda che mi pongo ogni volta. Penso che ci siano pochi modi per ottenere un codice di manutenzione semplice.

• Contribuire in progetti javascript opensource e capire come hanno risolto il problema.Penso che tu possa raccogliere una soluzione unica per ogni progetto e una parte comune della struttura dei progetti risponderà alla tua domanda sulla manutenzione.

• Utilizzare soluzioni preparate come backbone, knockout, ember o angularjs Se non mi sbaglio angolare non dà si struttura ma che fornisci potente strumento per la creazione di pagine con meno codice. Controllare anche todomvc per soluzioni pronte.

• Leggi libri e prova a creare una struttura per le tue esigenze. Sarà difficile e lungo ma il risultato (forse qualche anno dopo :)) sarà fantastico.