Modo efficace di usare jQuery

Question

Modo efficace di usare jQuery

#1 da (2 voti)

1

Sto cercando di modificare il DOM tramite javascript. Mi è stato suggerito di usare jQuery in questo modo

    var options = $("<div>")
        .append(
            $("<ul>").append(
                $("<li>")
                    .text("Resolution: ")
                    .append(
                        $("<select>")
                            .append($("<option>")
                                .attr("value", $(window).width()+"x"+$(window).height())
                                .text("Window"))
                            .append($("<option>").text("1024x768"))
                            .append($("<option>").text("1280x1024"))
                    )
            )
    );

Ma lo trovo goffo, soprattutto considerando che aumenta la quantità di codice da scrivere di circa il 40% rispetto a solo scrivere su una stringa html e quindi aggiungerla. È questo il modo giusto di usare jQuery, o esiste una best practice per la manipolazione DOM di questo tipo?

jquery

posta Stefano Borini 22.09.2016 - 16:04

fonte

1 risposta

Leggi altre domande sui tag jquery

suggerimenti sulla strutturazione del codice pygame? Utilizzo di NGINX come proxy per il contenuto dinamico

score 2 · Answer 1

In genere questo è il punto in cui tenderei a introdurre una libreria di template JavaScript per integrare jQuery. Knockout JS è sempre stato uno dei miei preferiti perché ha portato il data binding con esso, ma ci sono molte opzioni.

Se dovessimo rimanere nel contesto di jQuery, potrei considerare qualcosa del genere:

 var html = "<div> \
              <ul> \
                 <li>Resolution: \
                     <select> \
                         {options} \
                     </select> \
                 </li> \
              </ul> \
             </div>";

// I am assuming that there is something dynamic here - if not, you can put it all in the first string.
var options = '<option value='; // etc.

$(html.replace('{options}', options)).appendTo(someSpot);

Questo scambia la manipolazione del DOM per la manipolazione delle stringhe, ma di solito ho scoperto che è uno scambio abbastanza decente.

Se l'applicazione sarà di qualsiasi dimensione, è davvero un buon momento per iniziare a fare in modo di separare le preoccupazioni in modo da non avere la logica di templatura DOM mescolata troppo profondamente con le convalide e la logica aziendale.