Sono principalmente uno sviluppatore PHP, ma ultimamente sto giocando con un sacco di JavaScript, principalmente in jQuery.Come organizzare il codice JavaScript nel progetto per la manutenzione?
Il problema è che il codice sta diventando più difficile eseguire il debug e ciò è reso più difficile dal fatto che i listener di eventi sono disseminati sull'HTML.
Il codice gestisce chiamate AJAX e manipolazione DOM.
Questo significa che hai tre tipi di file, HTML, CSS e JS.
Non si mischiano HTML, CSS o JS. Ognuno di loro è nel suo stesso file.
Semplicemente mantenendo tutto separato e mai utilizzando in linea javascript o CSS in linea è possibile risolvere la maggior parte dei problemi di organizzazione del codice.
Un'altra tecnica sono gli imballatori e i minificatori.
miei confezionatori di scelta sono browserify (js) e less (css)
Packagers significa che dovete tutto il codice in molti file/moduli divisi da una buona progettazione. Quindi, poiché l'invio di molti file di piccole dimensioni è costoso, si utilizza un programma di produzione build-time per trasformare tutti i file js in un file js e tutti i file CSS in un unico file css.
Per quanto riguarda JS stesso, tendo ad andare oltre e utilizzare un caricatore di moduli. Browserify è sia un packager che un caricatore di moduli.
Caricatori di modulo significa che si definiscono piccoli moduli e li si carica/li richiede quando è necessario e dove è necessario.
Ho anche implementato l'architettura basata su eventi e il pattern mediator per mantenere il mio codice fortemente allentato. Si potrebbe andare oltre e implementare qualcosa come lo blackboard system ma non l'ho provato personalmente.
Sì, questo è ciò che seguo, anche se tendo ad includere l'html diretto in un file php se necessario. –
@ ProjectV1 Non posso parlare per il PHP, ma l'istinto è una cattiva pratica. – Raynos
Sì, e forse non dovrei iniziare a scrivere alcune linee guida –
È possibile utilizzare CommonJS "require" per separare il codice javascript in molti file, quindi utilizzare browserify o Webpack. Un'altra opzione è Cor che è un linguaggio che compila in javascript incentrato sull'organizzazione, la pulizia e l'esperienza di sviluppo.
1) Non inserire gestori eventi in linea – William
@Lime riscontriamo anche problemi con javascript normale che non funziona prima di $ (document) .ready() – MrFoh