Qual seria a melhor maneira de gerenciar muitos códigos jQuery?

5

Desculpe pela pergunta contundente, vou tentar explicar melhor.

Eu vou ter um site que usa jQuery, e eu sinto que em algum momento, haverá um monte de código jQuery, o que significa um monte de funções, seletores jQuery, etc. Existe uma maneira de limitar a disponibilidade do código jQuery para páginas específicas? Talvez usando objetos? Eu estou procurando a melhor abordagem aqui, então eu não corro para uma tempestade e não consigo encontrar meu caminho.

Obrigado.

    
por Zack Zatkin-Gold 29.12.2011 / 09:40
fonte

1 resposta

4

Eu normalmente separo meu código de forma modular, onde cada parte da página (cada módulo) recebe seu próprio arquivo para CSS, JS e HTML (assim como PHP / qualquer código do lado do servidor que você usa).

Cada módulo é agrupado em um elemento div ou section (ou o que quer que seja semântico) com um ID único (óbvio), como este:

<section id="recent-comments">

    <h2>Recent comments</h2>

    <ul>
        ...
    </ul>

</section>

Em seguida, criei um arquivo CSS com o nome do módulo ( recent-comments.css ) e um arquivo JS ( recent-comments.js ). O arquivo JS pode ser parecido com isto:

Base.modules.RecentComments = {
    init: function () {
        this.autoRefreshComments(); // this is just an example
    }, 

    autoRefreshComments: function () {
        setInterval(function () {
            $('#recent-comments').load('/new-comments');
        }, 5000);
    }
};

Se eu começar a escrever código em um arquivo de módulo que eu acho que pode ser reutilizado, normalmente eu o transformo em um plug-in jQuery (que pode ser reutilizado).

Isso leva a vários CSS e arquivos JS diferentes, mas é claro que eu mesclei todos em um só antes de exibi-los no navegador.

O benefício disso é que você pode rapidamente encontrar código relacionado a uma parte de sua página e seus arquivos normalmente são mantidos bem curtos e concisos.

Eu usei para exibir diferentes JS / CSS para cada página (apenas os módulos que estavam em uso nessa página), mas não acho que isso melhora o desempenho, pois leva a um único CSS e Arquivos JS por página em vez de apenas um arquivo CSS e JS que é armazenado em cache no primeiro carregamento da página.

Editar: btw, é assim que a "classe" básica se parece:

var Base = {
    modules: [], 

    init: function () {
        Base.runModules();
    }, 

    runModules: function () {
        for (var module in Base.modules) {
            // Work out the HTML-ID based on the module-name (RecentComments == recent-comments)
            var id      = module.replace(/([A-Z])/g, '-$1').toLowerCase();
                id      = id.substring(0, 1) == '-' ? id.substring(1) : id;
            var mod     = jQuery('#' + id);

            if ( 
                    mod.length && 
                    typeof(Base.modules[module]) != 'undefined' && 
                    typeof(Base.modules[module].init) == 'function' 
            ) {

                Base.modules[module].init(mod);
            }
        }
    }
};

$(Base.init);
    
por 30.12.2011 / 00:47
fonte

Tags