JavaScript Não-Obstrutivo

Transcript

1. JAVASCRIPT NÃO-OBSTRUTIVO com jQuery Por Marcelo Fraga
2. O QUE É? Um conjunto de princípios para uma escrita de JavaScript acessível, de fácil manutenção.
3. 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.
4. 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.
5. EXEMPLO
6. 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); });
7. O HTML <form action=”procurar.php”> <label for=”procurar”>Procurar</label> <input type=”text” id=”procurar” name=”procurar” /> <button type=”submit”>ok</button> </form>
8. MAL USO <a href=”javascript: window.open(‘http://zigotto.com.br’);”>Zigotto</a>
9. MAL USO <a href=”#” onclick=”javascript: window.open(‘http://zigotto.com.br’); return false;”>Zigotto</a>
10. UM POUCO MELHOR <a href=”http://zigotto.com.br” onclick=”javascript: window.open(this.href); return false;”>Zigotto</a>
11. O MELHOR $('a[rel="externo"]').click(function(e) { window.open(this.href); e.preventDefault(); }); <a href=”http://zigotto.com.br” rel=”externo”>Zigotto</a>
12. A IMPLEMENTAÇÃO GARBER-IRISH <body data-controller=”<%= params[:controller] %>” data-action=”<%= params[:action] %>”>
13. A IMPLEMENTAÇÃO GARBER-IRISH <body id=”cart” class=”shopping”>
14. A IMPLEMENTAÇÃO GARBER-IRISH SITENAME = { common: { init: function() { // code } }, users: { init: function() { // code }, show: function() { // code } } };
15. A IMPLEMENTAÇÃO GARBER-IRISH UTIL = { exec: function(controller, action) { var namespace = SITENAME, action = (action === undefined) ? “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); } };
16. A IMPLEMENTAÇÃO GARBER-IRISH $(document).ready(UTIL.init);
17. 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