JAVASCRIPT NÃO-OBSTRUTIVO com jQuery
17
JAVASCRIPT NÃO-OBSTRUTIVO com jQuery Por Marcelo Fraga
-
Upload
zigotto-tecnologia -
Category
Documents
-
view
841 -
download
1
Transcript of JAVASCRIPT NÃO-OBSTRUTIVO com jQuery
JAVASCRIPTNÃ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.
EXEMPLOUma 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ÇÃOGARBER-IRISH
<body data-controller=”<%= params[:controller] %>” data-action=”<%= params[:action] %>”>
A IMPLEMENTAÇÃOGARBER-IRISH
<body id=”cart” class=”shopping”>
A IMPLEMENTAÇÃOGARBER-IRISH
SITENAME = {common: {
init: function() {// code
}},users: {
init: function() {// code
},show: function() {
// code}
}};
A IMPLEMENTAÇÃOGARBER-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);
}};
A IMPLEMENTAÇÃOGARBER-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
