6

O que é Unobtrusive JavaScript e qual seu diferencial ao escrever funções em JavaScript no documento HTML?

1
  • 2
    Apesar de parecer um termo técnico (2 termos between obtrusive e unobtrusive 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".
    – Syzoth
    Commented 27/11/2019 às 15:02

3 Respostas 3

5

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

Coloquei no GitHub para referência futura.

3

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

Ref: What is Unobtrusive JavaScript and Why it’s Important?

2

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/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .