JQuery: Por JavaScript discreta / Documento Pronto funcionar em vez de evento OnClick?

Question

Eu apenas comecei a olhar para JQuery. Eu não tenho qualquer AJAX no meu aplicativo web atualmente.

O meu JavaScript existente em minha aparência HTML como:

<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>

Isso exibe botões para [Add] e [Find]. Para Find é necessário enviar o formulário, e eu uso MyFormSubmit (), que valida os dados, acrescenta um efeito visual para a página, e em seguida, envia os dados.

Eu poderia adicionar uma classe ou ID para o para o botão de encontrar e em JQuery eu poderia escrever algo como:

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

No meu palco "novato" de entendimento com JQuery Eu não get por que eu iria fazê-lo desta maneira

A minha velha forma identifica o método de perto do objeto. Pode haver um risco de que a JS não foi carregado antes que o usuário pressiona a tecla (há? A carga para a JS está bem no topo da página).

O método JQuery Documento Pronto não será ativado até que o documento é carregado (que eu suponho que garante que o JS é tudo presente e pronto para ser executado?), Mas ele se move o código para uma parte separada do meu arquivo HTML - então, quando vejo o MyButtonArray DIV em HTML não é óbvio para mim que os objetos têm métodos, e quais não

.

Você pode por favor me ajudar a entender quais são minhas opções e os benefícios / gotchas que eu deveria olhar para fora?

Editar :. Sinto-me confortável que a manipulação DOM - como um LightBox que podem aparecer quando qualquer miniatura com classe "LightBoxThumb" é clicado - usaria Javascript Discreto

No entanto, estou lutando para me convencer de que um botão que tem uma ação específica deve ter o seu método aplicado dessa forma. (Eu certamente não iria colocar qualquer código no botão diferente de uma única chamada de função para algo "outro lugar", mas a minha mente que é a minha melhor pista sobre o que esse botão faz, e camadas de Javascript Discreto pode fazer muito mais difícil de determinar.)

Edit2 - aceitado Resposta

Eu tomei Russ Câmaras resposta. Ele descreve Javascript Discreto de uma forma que tem sido útil para mim em compreender mais sobre como e quando isso deve ser usado.

No momento (pode mudar quando eu tenho mais experiência!) Eu vou ficar com um evento onclick para um único, não-mudança, a ação em um objeto como eu sinto que será mais fácil para mim depuração - e diagnosticar se surgirem problemas. Para ZebraStripes em uma tabela que permite clicar no título da coluna para tipo (e situações desse tipo) eu posso ver os benefícios da abordagem discreta Javascript

O comentário final de Russ foi particularmente útil, repetido aqui:

"@ Kristen - Você tem razão, como um monte tópicos de programação, há mais de uma abordagem e as pessoas vão veementemente estar por suas crenças! E se estamos falando de um único método para um único botão, eu totalmente entender onde você está vindo ...

Se nós estamos falando sobre os lotes de JavaScript, com chamadas de função mesmas para mais do que um elemento, diferente chamadas de função para diferentes métodos, etc. Eu acho que seria mais difícil para si mesmo para misturar em linha e abordagens discretas, e seria melhor adotar um ou outra abordagem "

Answer 1

JavaScript discreta é o principal motor para a separação de código JS da marcação

• A separação de funcionalidade (a "camada de comportamento") de
  de uma página Web estrutura / conteúdo e apresentação
• As melhores práticas para evitar os problemas de JavaScript tradicional programação (tais como navegador inconsistências e falta de escalabilidade)
• optimização progressiva para agentes de usuário de apoio que pode não suportar
  funcionalidade avançada JavaScript

Com o código em document.ready, não irá executar até que o DOM foi carregado e antes do conteúdo da página são carregados

A partir Aprendizagem jQuery

Com US $ (document) .ready (), você pode obter os seus eventos para carregar ou fogo ou o que você quer fazer antes de as cargas janela.

Pode querer dar uma olhada jQuery in Action , I 'd recomendo. Você pode provar Capítulo 1 e Capítulo 5 na livro homepage . Eu acho que isso pode fornecer uma visão mais aprofundada por que a separação pode funcionar bem.

Finalmente, ter um olhar para este questão que tem respostas que detalham como você iria encontrar os ouvintes de eventos em um nó DOM.

EDIT:

Alguns pensamentos que podem persuadi-lo porque discreto JavaScript pode ser uma boa idéia.

Imagine que você tem uma função vinculado como um manipulador de eventos para o mesmo evento levantado em cada um de uma série de elementos -

• Seria mais fácil para descobrir qual elementos chamar essa função a alça um evento quando a declaração está em linha em cada elemento, ou a declaração está em um lugar, fora do markup?

• E se você deseja adicionar ao elementos que chamam essa função quando o evento é gerado em cada um deles? Seria mais fácil / melhor para adicionar o manipulador de eventos inline para cada elemento ou de alterar o código em um só lugar?

Answer 2

o pronto evento documento é bem antes do evento load documento. documento pronto ocorre uma vez que o DOM é carregado que é tão que existem todos os elementos antes de começar a trabalhar neles.

Então, sim a JS estará pronto como o documento é processado. O outro ponto sobre a ligação é que é útil para alterar ligações a elementos quando ocorrem ações cetain.

Você ainda pode declarar o recurso sobre o elemento, se preferir embora.

Answer 3

Com o tempo eu acho que você se acostumar com a sintaxe jQuery e leitura:

class = "MyFormSubmit" torna-se tão informativa quanto lendo onClick = "MyFormSubmit retorno ();

Onde o poder realmente começa a chutar em (além de todos os benefícios mencionados por outros cartazes) é a facilidade com que você pode mudar a ligação do onClick via seletores vinculados a outras ações na página web de uma forma que nunca parecem presente -se inicialmente.

Uma pergunta que me faço é o plano quão profundo I em ir com qualquer nova ferramenta, se eu estou planejando fazer uso extensivo de um quadro ou biblioteca em seguida, escrever meu código em estilo que é "mais nativa" de codificação se tornará muito mais desenvolvedores naturais e outros que conhecem a ferramenta irá encontrar o código muito mais limpo e mais compreensível.

Answer 4

Você fazê-lo desta maneira de separar a lógica da interface do usuário a partir do desenho HTML real.