O que é Unobtrusive JavaScript e qual seu diferencial ao escrever funções em JavaScript no documento HTML?
3 Respostas
É uma evolução e ampliação do Quando usar Graceful Degradation e quando usar Progressive Enhancement? (não vou dar detalhes porque ali está bem respondido e no fundo é o que mais importa). É fazer um código que não interfira no conteúdo e uso normal e básico da página se o JS ou algum recurso dele não estiver disponível ou não funcionar corretamente no ambiente que está sendo executado (provavelmente o navegador específico).
Então seu código JS será considerado não obstrutivo se ele foi feito com o cuidado de não impossibilitar o uso da página nas sua condição essencial parcial ou totalmente.
O diferencial é justamente tornar a página acessível universalmente (não no sentido de atender quem tem alguma dificuldade específica para vê-la). Hoje é muito comum se você não tiver o navegador certo na versão certa entre outras características não conseguir acessar parte relevante do site. Isto porque o código criou uma obstrução. Você quer que as pessoas não consigam usar seu site porque não foi cuidadoso?
Uma das técnicas usadas é separar bem o que é JS e o que é HTML. Mas isso sozinho não quer dizer nada, porque se estiver presente, separado e executando e ainda assim não funcionar ele está obstruindo.
É a separação do HTML do código Javascript, ou em outras palavras, a sua página e seu conteúdo deve funcionar sem o Javascript, dai que surge o Unobtrusive JavaScript.
Vantagens
- Manutenção e refatoração mais fáceis
- Caso seu usuário não consiga carregar o Javascript por algum motivo, isso não afetará tanto a experiência
- Caso algum navegador não possua alguma funcionalidade nova do Javascript, também não irá afetar tanto
- E acessibilidade, já que alguns leitores de tela, podem desativar o Javascript
Recomendo a leitura do artigo abaixo, de onde tirei as referencias.
Ainda, para complementar a base de conhecimento sobre o assunto:
O javascript não intrusivo (unobtrusive javascript) sugere que o código HTML fique separado do código javascript, trazendo organização, modularidade, e maior facilidade na criação de plugins. Ao invés de adicionarmos códigos javascript aos eventos diretamente nos elementos HTML, construimos um HTML mais simples, e adicionamos um código javascript que irá observar quando o evento for disparado.
Exemplo:
Ao invés de fazermos isso:
<script>
function exibeResultado(){
// faz alguma coisa ...
}
</script>
<button onclick="exibeResultado()">Exibir</button>
Podemos fazer isso:
<script>
// Quando a página for carregada
$(function(){
$("#btnExibir").click(function(){
// faz alguma coisa ...
}
}
</script>
<button id="btnExibir">Exibir</button>
O exemplo faz uso da biblioteca jQuery para definir o comportamento do clique do botão quando a página for totalmente carregada.
Ref: http://blog.werneckpaiva.com.br/2011/03/ajax-com-java-script-nao-intrusivo-unobtrusive-ajax/
between obtrusive
eunobtrusive javascript
), na verdade não considero, é apenas falta de tradução, seria: intrusivo (ou obstrutivo) e discreto (ou não-obstrutivo). Semelhante a uma situação que passei no site aonde o autor escreveu "uma nova feature", mas feature poderia ser dito como funcionalidade, comentei então, mas o autor me "rebateu" dizendo que feature era um termo técnico, por fim o convenci que não "necessariamente".