JavaScript Não-Obstrutivo

JAVASCRIPT NÃO-OBSTRUTIVO com jQuery Por Marcelo Fraga

O QUE É? Um conjunto de princípios para uma escrita
de JavaScript acessível, de fácil manutenção.

CARACTERÍSTICAS • Sempre aplicar JavaScript em arquivos externos. • Nunca
utilizar JavaScript diretamente no documento. • Usar JavaScript como incremento, não como uma funcionalidade segura. • A página continua sendo utilizável, mesmo sem o suporte a JavaScript.

EXEMPLO Uma vez que a página foi carregada, o JavaScript:
• Encontra todos os labels ligados a um campo de texto. • Move o texto do label para o campo de texto associado. • Esconde os labels. • Estabelece eventos para remover o texto descritivo quando o campo está em foco.

EXEMPLO

O JAVASCRIPT $('label').each(function() { var $label = $(this), $input =
$('#' + $label.attr('for')), initial = $label.hide().text(); $input.focus(function() { if ($input.val() == initial) { $input.val(‘’).css('color', '#000'); } }).blur(function() { if (!$input.val()) { $input.val(initial).css('color', '#aaa'); } }).css('color', '#aaa').val(initial); });

O HTML <form action=”procurar.php”> <label for=”procurar”>Procurar</label> <input type=”text” id=”procurar” name=”procurar”
/> <button type=”submit”>ok</button> </form>

MAL USO <a href=”javascript: window.open(‘http://zigotto.com.br’);”>Zigotto</a>

MAL USO <a href=”#” onclick=”javascript: window.open(‘http://zigotto.com.br’); return false;”>Zigotto</a>

UM POUCO MELHOR <a href=”http://zigotto.com.br” onclick=”javascript: window.open(this.href); return false;”>Zigotto</a>

O MELHOR $('a[rel="externo"]').click(function(e) { window.open(this.href); e.preventDefault(); }); <a href=”http://zigotto.com.br” rel=”externo”>Zigotto</a>

A IMPLEMENTAÇÃO GARBER-IRISH <body data-controller=”<%= params[:controller] %>” data-action=”<%= params[:action] %>”>

A IMPLEMENTAÇÃO GARBER-IRISH <body id=”cart” class=”shopping”>

A IMPLEMENTAÇÃO GARBER-IRISH SITENAME = { common: { init: function()
{ // code } }, users: { init: function() { // code }, show: function() { // code } } };

A IMPLEMENTAÇÃO GARBER-IRISH UTIL = { exec: function(controller, action) {
var namespace = SITENAME, action = (action === undeﬁned) ? “init” : action; if (controller && namespace[controller] && typeof(namespace[controller][action] == “function”)) { namespace[controller][action](); } }, init: function() { var $body = $(document.body), controller = $body.data(‘controller’), action = $body.data(‘action’); UTIL.exec(‘common’); UTIL.exec(controller); UTL.exec(controller, action); } };

A IMPLEMENTAÇÃO GARBER-IRISH $(document).ready(UTIL.init);

FONTES • http://dev.opera.com/articles/view/the-seven-rules-of-unobtrusive-javascrip/ • http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready- execution/ • http://www.viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready- execution

JavaScript Não-Obstrutivo

JavaScript Não-Obstrutivo

Marcelo Fraga

More Decks by Marcelo Fraga

Other Decks in Programming

Featured

Transcript