JQuery: Perché la funzione di JavaScript/Document Ready non invadente piuttosto che l'evento OnClick?

Question

Ho appena iniziato a guardare JQuery. Al momento non ho alcun AJAX nella mia applicazione web.

mio JavaScript esistente nel mio HTML assomiglia:

<form ...> 
<p>Find what? <input ...></p> 
<div class="ButtonArray"> 
    <a href="AddRecord.ASP&amp;Action=ADD">ADD</a> 
    <a href="#" onClick="return MyFormSubmit();">FIND</a> 
</div> 
</form> 

Questo visualizza i pulsanti per [Aggiungi] e [Trova]. Per Trova è necessario inviare il modulo e io utilizzo MyFormSubmit() che convalida i dati, aggiunge un effetto visivo alla pagina e quindi esegue il POST dei dati.

potrei aggiungere una classe o un ID per il per il pulsante Trova e JQuery potrei scrivere qualcosa di simile:

$(function() { 
    $(".MySearchButtonClass").click(function() { 
    // validate and process form here 
    }); 
}); 

Alla mia fase "novizio" di intesa con JQuery non ottengo perché lo farei in questo modo

Il mio vecchio modo identifica il metodo vicino all'oggetto. Potrebbe esserci il rischio che il JS non sia caricato prima che l'utente preme il pulsante (è lì? Il LOAD per il JS è proprio nella parte superiore della pagina).

Il metodo JQuery Document Ready non verrà attivato fino a quando il documento non viene caricato (che presumo garantisce che il JS sia tutto presente e pronto per essere eseguito?), Ma sposta il codice in una parte separata del mio HTML file - così quando vedo il DIV MyButtonArray nel sorgente HTML non è ovvio per me quali oggetti hanno metodi e quali no.

Potete per favore aiutarmi a capire quali sono le mie opzioni e i vantaggi/trucchi che dovrei cercare?

Edit: Sto bene che la manipolazione del DOM - come ad esempio un LightBox che può apparire quando si fa clic su una miniatura con classe "LightBoxThumb" - avrebbe utilizzato JavaScript discreto.

Tuttavia, sto lottando per convincermi che un pulsante con un'azione specifica debba avere il suo metodo applicato in quel modo. (Di certo non inserisco alcun codice sul pulsante se non una singola chiamata a qualcosa "altrove", ma a mio avviso è il mio miglior indizio su cosa faccia quel pulsante, e i livelli di Javascript non invadente potrebbero rendere molto più difficile per determinare)

Edit2 -. risposta accettata

ho preso Russ erotiche risposta. Descrive JavaScript non intrusivo in un modo che mi è stato utile per capire di più su come & quando dovrebbe essere usato.

Per il momento (potrebbe cambiare quando avrò più esperienza!) Attaccherò con un evento OnClick per un'azione singola, non mutevole, su un oggetto poiché ritengo che sia più facile per me eseguire il debug - e diagnosticare se sorgono problemi. Per ZebraStripes su una tabella che permette di cliccare sulla rubrica colonna per ordinare (e le situazioni di quel tipo) posso vedere i vantaggi dell'approccio JavaScript discreto

commento finale di Russ è stato particolarmente utile, ripetuto qui:

"@Kristen - Hai ragione, come molto di argomenti di programmazione, c'è più di un approccio e la gente sarà sostenuta con veemenza dalle loro convinzioni!Se stiamo parlando di un singolo metodo per un singolo pulsante, ho completamente capire dove stai venendo da ...

Se stiamo parlando di un sacco di JavaScript, con la stessa funzione chiamate per più di un elemento, funzione differente richiede metodi diversi, ecc penso che sarebbe più difficile per se stessi per mescolare in linea e discreti approcci, e sarebbe meglio adottare uno o l'altro approccio"

Answer 1

Unobtrusive JavaScript è il driver principale per separare il codice JS dal markup

• Separazione delle funzionalità ("strato comportamento") dal di una pagina Web
  struttura/contenuto e la presentazione
• Le migliori pratiche per evitare i problemi della programmazione JavaScript tradizionale (come il browser incoerenze e la mancanza di scalabilità )
• Il progressive enhancement per sostenere gli user agent che potrebbero non supportare
  avanzate funzionalità JavaScript

Con il codice document.ready, non verrà eseguito fino a quando il DOM è stato caricato e prima che il contenuto della pagina vengono caricati

da Learning jQuery

Con $ (document) .ready(), è possibile ottenere i vostri eventi per caricare o un incendio o quello che vuoi che facciano prima del caricamento delle finestre.

Si consiglia di dare un'occhiata a jQuery in Action, lo consiglio vivamente. È possibile campionare Chapter 1 e Chapter 5 su book's homepage. Penso che farlo potrebbe fornire ulteriori informazioni sul perché la separazione possa funzionare bene.

Infine, dai un'occhiata a this question che ha le risposte che descrivono in dettaglio come si troveranno i listener di eventi su un nodo DOM.

EDIT:

Alcuni pensieri che possono convincere perché discreto JavaScript può essere una buona idea.

Immaginate di avere una funzione legata come un gestore di eventi per lo stesso evento in rilievo su ciascuna di una serie di elementi -

• sarebbe più facile per scoprire quale elementi chiamano funzione per gestire un evento quando la dichiarazione è in linea in ciascun elemento oppure la dichiarazione si trova in un posto, al di fuori del markup ?

• E se si desidera aggiungere agli elementi che chiamano tale funzione quando l'evento viene generato su ciascuno di essi? Sarebbe più semplice/migliore aggiungere il gestore di eventi in linea a ciascun elemento o modificare il codice in un unico punto?

Answer 2

Lo si fa in questo modo per separare la logica dell'interfaccia utente dal progetto HTML effettivo.

Answer 3

l'evento pronto per il documento è molto prima dell'evento di caricamento del documento. il documento pronto si verifica una volta caricato il DOM, in modo tale che tutti gli elementi esistano prima di iniziare a lavorarci.

Quindi sì, il JS sarà pronto mentre il documento viene visualizzato. L'altro punto sull'associazione è che è utile per cambiare i collegamenti agli elementi quando si verificano azioni di cetain.

È comunque possibile dichiarare l'azione sull'elemento se si preferisce.

Answer 4

Nel corso del tempo penso che ci si abitua alla sintassi jQuery e la lettura:

class = "MyFormSubmit" diventa informativo come la lettura onClick = "tornare MyFormSubmit();

Dove il potere inizia davvero a kick-in (a parte tutti i vantaggi menzionati da altri poster) è la facilità con cui è possibile modificare l'associazione onClick tramite selettori legati ad altre azioni sulla pagina Web in modi che non sembrano mai presentarsi inizialmente

Una domanda Mi chiedo quanto sia profondo l'intenzione di andare con qualsiasi nuovo strumento, se sto progettando di m Fare un uso estensivo di un framework o di una libreria e poi scrivere il mio codice nel suo stile di codifica "più nativo" diventerà molto più naturale e altri sviluppatori che sanno che lo strumento troverà il codice molto più pulito e comprensibile.