The seven rules of Unobtrusive JavaScript

Um resumo:

1. Não assuma nada: não espera que o javascript esteja sempre ligado, não espera que o markup desejado estará lá;
2. Encontre seus ganchos e relacionamentos: examine o HTML com o qual você vai trabalhar para encontrar a melhora maneira de fazer seu script interagir com o markup;
3. Deixe a travessia para os experts: Quando possível, deixe o CSS cuidar de encontrar o elemento que você quer mudar;
4. Entenda os navegadores e usuários: não se desvie muito da maneira como os navegadores funcionam e da maneira como os usuários esperam que eles funcionem;
5. Entenda eventos: aprenda como o tratamento de eventos ajuda você a separar seu javascript de seu HTML;
6. Jogue bem com os outros: Assegure-se de que seu script não interefere em outros, e faça com que seja difícil que outros scripts interfiram no seu;
7. Trabalhe para o próximo desenvolvedor: Torne a manutenção fácil escrevendo código lógico com nomes de função e variáveis claros, e comentando quando necessário.

Fantástico. Alguém arrisca uma tradução do artigo inteiro?

Habilitando o TableSorter

Depois de algum tempo procurando por soluções prontas (sem sucesso), eu implementei um código javascript para ser executado no evento onload da página que modifica a tabela adicionando a sessão <thead> utilizada pelo TableSorter. Segue o código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function _jQueryTableSorter_SemanticTable(tableId) {
    var table = document.getElementById(tableId)
    if (table == null)
        return false
    if (table.tHead != null && table.tHead.rows.length < 0)
        return true
    table.tHead || table.createTHead()
    var tHead = table.tHead
    var tFirstRow = table.rows[0]
    var tHeadRow = tHead.insertRow(0)
    tHeadRow.className = tFirstRow.className
    for (var i=0;i<FirstRow.cells.length;i++) {
        var tHeadCell = tHeadRow.insertCell(tHeadRow.cells.length)
        tHeadCell.innerHTML = tFirstRow.cells[i].innerHTML
        tHeadCell.className = tFirstRow.cells[i].className
    }
    table.deleteRow(1);
    return true;
}

O código acima resolveu o meu problema fazendo com que o plugin da jQuery conseguisse identificar o header da tabela e a ordenasse corretamente. Então caso encerrado, certo? Errado… Pois o funcionamento correto do TableSorter acabou me gerando outro problema, pois a minha tabela possuia o background da linhas com cores alternadas e no momento ordenação, essa alternância ficava completamente bagunçada.

Habilitando a alternância de estilos

Novamente procurando por solução prontas, eu encontrei na documentação do plugin uma solução pronta para o problema, porém que não não sei porque cargas d’águas não funcionou comigo. E para resolver agora o meu mais novo problema, eu desenvolvi um widget para trabalhar sobre o TableSorter. Segue o código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function _jQueryTableSorter_AddWidgets() {
    $.tablesorter.addWidget({
        id: 'AlternatingRowStyle',
        format: function(table) {
            var tRows = table.tBodies[0].rows
            var classes = new Array;
            for (var i=0;i<Rows.length;i++) {
                var classExists = false
                for (var j=0;j<classes.length;j++)
                    if (classes[j] == tRows[i].className) {
                        classExists = true
                        break
                    }
                if (!classExists)
                    classes.push(tRows[i].className)
            }
            for (var i=0;i<Rows.length;i++)
                tRows[i].className = classes[i%classes.length];
        }
    });
}

Agora sim, problema resolvido! O TablerSorter funcionando perfeitamente nos DataGrid’s do .NET Framework.

Juntando os caquinhos

Para facilitar a utilização posterior, eu ainda criei uma terceira função para executar as duas funções anteriores para mim, e o código final acabou ficando assim:

1
2
3
4
5
6
7

function jQueryTableSorter(tableId, options, defaultOrder) {
    _jQueryTableSorter_SemanticTable(tableId)
    _jQueryTableSorter_AddWidgets()
    $('#' + tableId).tablesorter(options || null)
    if (defaultOrder != undefined)
        $('#' + tableId).trigger('sorton', [ defaultOrder ]);
}

E agora, basta aplicar as funções acima sobre um DataGrid para habilitar ordenação client-side.

Fazendo funcionar

Veja abaixo o exemplo da minha implementação, onde eu utilizo as funções acima juntamente com algumas outras configurações do TableSorter:

1
2
3
4
5
6
7
8
9

 
    window.onload = function() { /* IE7 fix */
        var defaltOrder = [[ 2, 0 ]]
        jQueryTableSorter('dataGridId', {
            widgets:[ 'AlternatingRowStyle' ],
            sortInitialOrder:'asc',
            headers:{ 0:{ sorter:false } }
        }, defaultOrder)
    }

@todo unir essas funções para criar um plugin para o plugin

Fonte: http://arthurfurlan.org/blog/2007/08/03/jquery-e-tablesorter-sobre-componentes-dotnet/

Me inscrevi no ClientSide especialmente pra falar de (X)HTML e CSS, que são minha especialidade, mas, apesar de não ser programador de fato, vou dar melhorias a serem feitas (como a maioria das funções recém feitas), mas que é bem fácil de fazer e bastante útil se você quiser melhorar a acessibilidade de seu site. Chega de papo e vamos ao código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function fontSize(action, container){
    container = typeof(container) != 'undefined' ? container : "div.texto" //se não for especificado um container será "div.texto"
    baseSize = parseInt($(container+" p").css("font-size")) //extraímos o font-size padrão, tomando como base o p do nosso container
 
    $els = $(container).children()
 
    $els.each(function(){
        $fs = parseInt($(this).css("font-size"))
        if(action=="plus" && baseSize<16) $fs+=1
        else if(action=="minus" && baseSize>13) $fs-=1
        $(this).css("font-size", $fs)
    })
}
$(function(){
    $(".decrease").click(function(){ fontSize("minus") }).blur() //blur() aqui remove o foco do elemento, logo após o clique
    $(".increase").click(function(){ fontSize("plus") }).blur()
})

Quinze linhas de código. Nada mal. A única consideração a ser feita aqui é que ao chamarmos a função fontSize, há um parâmetro obrigatório, que é exatamente a ação a ser feita: aumentar a letra (plus) ou diminuí-la (minus).

Agora, tudo o que precisamos fazer é chamar dois arquivos javascript no header de nossa página (jquery.js e font-size.js) e criar os elementos com os respectivos id’s pra chamar a função correspondente quando clicados. Links? Inputs? Não… Botões! Aliás, uma lista deles:

<ul>
  <li><button type="button">Diminuir a letra</button></li>
  <li><button type="button">Aumentar a letra</button></li>
</ul>

Com isso, tudo o que estiver dentro de uma div com classe igual a “texto” será alvo de nossa função e terá seu tamanho de fonte alterado. Listas, títulos, parágrafos, div’s, address, strong… tudo o que for filho direto de uma <div class="texto">.

Obviamente, como disse anteriormente, a função precisa de melhorias, mas o core está aí. Uma melhoria certa é a funcionalidade de resetar o tamanho da fonte para o padrão. Mas isso fica pra outra hora, já passam das 2h da manhã. Fica aí uma sugestão de passatempo pra vocês.

Quer ter um gostinho do que é o negócio? Bom, para começar, com jQuery você encontra os elementos DOM usando seletores CSS ou XPath. Por exemplo, para pegar todos os links de uma página, você faz:

$("a")

E para pegar todos os links com a classe externo dentro do div “menu”:

$("#menu a.externo")

Agora vamos pegar todos os campos de texto dentro do primeiro formulário da página:

$("form:first input[@type=text]")

Não é legal? O objeto retornado é uma coleção de elementos HTML. Essa coleção tem métodos próprios, que executam ações em todos os objetos da coleção. Por exemplo, para colocar uma classe nos campos de texto do primeiro formulário, podemos fazer:

$("form:first input[@type=text]").addClass("obrigatorio")

Outro ponto interessante é que as funções que agem sobre a coleção retornam a própria coleção. Então vocẽ pode chamar outro método em seguida. Assim:

$("form:first input[@type=text]").addClass("obrigatorio").removeClass("opcional")

O pessoal da jQuery prefere, e eu também, quebrar essa instrução em várias linhas:

$("form:first input[@type=text]")
  .addClass("obrigatorio")
  .removeClass("opcional")

Só para deixar você com mais vontade, veja como fazer com que todas as li ganhem uma determinada classe ao passar o mouse sobre elas, e percam essa classe quando o mouse sair:

$("li").hover(
  function(){
    $(this).addClass("over")
  },
  function(){
    $(this).removeClass("over")
  }
)