Come evitare troppo html in JQuery?

2

Non mi piace come è il mio JQuery dopo aver creato alcuni pulsanti dinamici o altre cose dinamiche. Ad esempio, quando sono contrassegnate le caselle di controllo, aggiungo un pulsante chiamato "Scarica selezionati" e "Rimuovi selezionati". Naturalmente, ci sono molte altre cose JQuery + HTML nel mio sito.

Mi piacerebbe sapere come posso rendere il mio codice migliore, non come quello degli spaghetti.

Grazie mille!

  $(document).on('change', '.docListCheckbox', function(event){
    if( $('#resultsContainer').find('.docListCheckbox:checked').length > 0 )
    {
      if( ! $('#download-sel').length > 0 )
      {
        var downSelectionBtn = '<button id="download-sel" class="button-small button-blue" type="button">DESCARGAR MARCADOS</button>';
        var delSelectionBtn = '<button id="delete-sel" class="button-small button-red" type="button">ELIMINAR MARCADOS</button>';
        $('#selection-controls').append(downSelectionBtn);
        <?php if( SwHelper::checkAccess('Docusearch.Documento.Eliminar') ): ?>
        $('#selection-controls').append(delSelectionBtn);
        <?php endif; ?>
      }
    }
    else
    {
      if( $('#download-sel').length > 0 )
      {
        $('#download-sel').remove();
        <?php if( SwHelper::checkAccess('Docusearch.Documento.Eliminar') ): ?>
        $('#delete-sel').remove();
        <?php endif; ?>
      }
    }
  });


 $(document).on('click', '#docActionEdit', function() {
    var button = $(this);
    var isToggled = button.data('toggled');
    $('#docDataEditor').slideToggle({
      duration: 1000,
      easing: 'easeOutBounce',
      start: function(){
        if(isToggled == 'false') {
          button.html('EDITAR');
          button.data('toggled', 'true');
          $('#docActionSave').remove();
        }
        else {
          button.html('CANCELAR');
          button.data('toggled', 'false');
          $('#docAvailableActions').prepend('<button id="docActionSave" class="button-small button-green">GUARDAR</button>');
        }
      }
    });
  });
    
posta JorgeeFG 18.02.2014 - 13:48
fonte

1 risposta

3

Nota: sarei più preoccupato di mixare PHP e JavaScript , come nel tuo esempio.

Typically, it is bad practice to use language X to generate code in language Y.

Mi ricorda anche di questo L'articolo del Daily WTF:. lato client PHP

Per rispondere alla tua domanda:

  • Il modo più semplice sarebbe quello di mantenere l'HTML all'interno dell'HTML. Perché i pulsanti vengono aggiunti dinamicamente e non esistono nella versione che viene mostrata agli utenti senza JavaScript? Se possono essere utilizzati solo con una funzione che richiede JavaScript, non dovrebbe essere possibile avere i pulsanti direttamente in HTML, nascosti per impostazione predefinita e quindi visualizzati con JavaScript su richiesta?

  • Se ci sono pezzi di HTML di grandi dimensioni (non nel tuo esempio), generali sul lato server e caricali su richiesta tramite AJAX.

  • Se ci sono pezzi di HTML che sono duplicati di HTML generati lato server (non nel tuo esempio, immagino), generali sul lato server e caricali su richiesta tramite AJAX, evitando la duplicazione del codice (che è, nel caso in cui sono coinvolte due lingue, particolarmente difficili da rilevare in seguito).

  • Se hai solo bisogno di aggiungere brevi quantità di codice HTML, il commento di superM ti dà già la risposta: inserisci l'HTML in una variabile che considererai una costante nel tuo codice.

Se pertinente, non dimenticare di usare i modelli. Modelli di chiusura Google è un esempio di modello con JavaScript.

    
risposta data 18.02.2014 - 14:05
fonte

Leggi altre domande sui tag