Struttura del codice HTML e JS

1

Sono relativamente nuovo a HTML / JS e sono un programmatore dilettante. Ho creato un'applicazione web che funziona, ma non posso fare a meno di pensare che il codice sia un pasticcio di spaghetti! Ho cercato le best practice per JS / HTML ma nulla risponde alle mie domande (sono sicuro che esiste online ma forse non sto vedendo se si applica nel mio caso!).

Ho iniziato a programmare in C e sono abituato a scrivere un insieme di funzioni che svolgono un'attività, ma non sono sicuro che questo sia adatto a JS / HTML come l'ho fatto io.

Quindi, alle mie domande - supponiamo di avere una funzione:

function GetFixtureData(group){
 // #1. Query the server
 query.find().then(function(results){
 // #2. Manipulate the data in some way.
 var datatoshow = results.map(...)
 // #3. Show data to user by creating a HTML table
 CreateHTMLTable(datatoshow);
});

Questa funzione acquisisce i dati, li manipola e aggiorna la vista utente. Sono sicuro che questo sia un modo poco strutturato di farlo. È consigliabile suddividere questo tipo di funzione, in caso affermativo, in che modo?

Inoltre, sto usando l'ui semantico che mi richiede di inizializzare elementi come dropdown, modali, ecc. Dovrei avere tutto questo in una funzione dell'interfaccia utente init() ? Ma poi, ad esempio, quando il menu a discesa cambia, chiama GetFixtureData() .

$('#ddGroup').dropdown({
 onChange: function (value, text, $choice) {
      GetFixtureData();
 }
});

In sostanza, sono confuso sul fatto che tutto questo dovrebbe essere nel modulo e se il codice relativo all'interfaccia utente / HTML debba essere tenuto separato dal recupero e dalla manipolazione dei dati.

    
posta SimpleOne 09.05.2018 - 12:32
fonte

2 risposte

4

La struttura del codice varierà da progetto a progetto. Non c'è un modo giusto per fare cose in JavaScript (e lo sviluppo del web in generale), e l'organizzazione e la struttura generali dipenderanno da (1) il framework / libreria che si usa, (2) la specificità di un dato progetto o ( 3) le preferenze personali di uno sviluppatore.

Per i progetti per principianti, hai una scelta. Puoi:

  • Utilizza un framework esistente, come AngularJS o React.

    Il vantaggio è che ti costringerà ad organizzare il tuo progetto in un modo molto specifico, e mentre potresti fare delle scelte quando acquisisci abbastanza esperienza, puoi anche evitare di fare qualsiasi scelta di struttura quando sei un principiante, e seguire la struttura predefinita del framework.

    Lo svantaggio è che oltre alle complessità delle tecnologie e dei protocolli utilizzati nello sviluppo web, si aggiunge la complessità del framework stesso. Personalmente, penso che la complessità delle strutture con una struttura rigida, come Angular, siano troppo opprimenti per una persona che è nuova allo sviluppo web.

  • Lavora da zero, ma scegli un'architettura o un pattern famosi, come MVC.

    Il vantaggio, ancora una volta, è che sei abbastanza sicuro che le scelte architettoniche che sono state fatte per te siano probabilmente quelle migliori, meglio di quanto potrebbe fare qualcuno senza una profonda conoscenza dell'architettura web.

    Lo svantaggio è che devi cogliere quelle architetture / modelli e capire chiaramente come dovrebbero essere applicati in un contesto di sviluppo web.

  • Vai da zero, lavora nelle iterazioni, produci qualcosa che funzioni e vedi dove finisce tutto.

    Se lo fai, non aspettarti di avere un'applicazione pronta per la produzione. Invece, preparati a buttarlo via diverse volte e riavvia tutto il processo una volta che hai imparato abbastanza da capire dove hai commesso errori strutturali che non possono essere facilmente rifatti.

Durante il processo di apprendimento, assicurati che

  • Controlli i progetti open source per vedere come sono stati costruiti.

  • Non impari solo le lingue, ma anche tutto ciò che riguarda lo sviluppo web. Conoscere JavaScript è una cosa, ma è anche necessario conoscere HTTP, o come i browser rendono la pagina, o cosa rende speciali i dispositivi mobili in termini di utilizzo della larghezza di banda e consumo energetico durante l'accesso a un'applicazione web.

I started programming in C and am used to writing a set of functions that carry out a task but not sure this is suited to JS/HTML as I have done it.

Analogamente a C, JavaScript ha delle funzioni e tu usi queste funzioni per astrarre l'implementazione ed evitare la duplicazione del codice. Inoltre, JavaScript ha prototipi e, dal momento che ECMAScript 2015, classi (anche se fondamentalmente, le classi rimangono prototipi in JavaScript, a differenza di altri linguaggi orientati agli oggetti). Imparare la programmazione orientata agli oggetti; questa è una competenza importante per uno sviluppatore web.

Un altro concetto importante è la programmazione funzionale. JavaScript utilizza diversi paradigmi funzionali e molti problemi che risultano in codice procedurale non leggibile potrebbero essere espressi molto meglio nella sua forma funzionale. L'apprendimento della programmazione funzionale è molto importante, sia per le tue abilità JavaScript che per migliorare il tuo codice e il tuo ragionamento in generale, indipendentemente dalla lingua che hai scelto.

I feel sure this is a poorly structured way of doing it.

Il tuo pezzo di codice mi sta bene. Tuttavia, è necessario guardare al progetto più ampio per avere una buona comprensione della qualità del codice.

Non esitare, a proposito, a inviare pezzi di codice più grandi a CodeReview.SE . Le persone da lì sarebbero felici di aiutarti, dicendo quali potrebbero essere migliorate.

    
risposta data 09.05.2018 - 21:08
fonte
1

È sempre opportuno mantenere il codice separato in base a MVC (Model-view-controller). Se sviluppi un'app utilizzando la modalità MVC, in futuro sarà molto facile da gestire / mantenere. Inoltre sarà molto facile eseguire il debug e risolvere bug.

    
risposta data 09.05.2018 - 13:19
fonte

Leggi altre domande sui tag