8

Eu tenho um sério problema que é:

Estou aprendendo jQuery antes do JavaScript, e acho que agora vou me dar mal, pôs em meus sites só uso jQuery, e estou percebendo que é uma má prática. Mas voltando a pergunta: Tudo que faço com jQuery eu consigo fazer com JavaScript? Pôs acho que vou converter todos os meus scripts.


EDIT:

No meu site tenho o seguinte código (mais completo aqui no jsFiddle):

if ($j(window).width() > 980) {
    $j('.title.title--sm').click(function(){
    $j('.filters__list').slideToggle(50);
    $j('.filters__filtered').slideToggle(50);
    $j('.filters .title').toggleClass('active'); 
    }); 
    $j('.filters__filter.tamanho').click(function(){
        $j('.filters__filter.tamanho .ul--0').slideToggle(150);
        $j('.filters__filter.tamanho .filters__name').toggleClass('active'); 
    }); 
    $j('.filters__filter.cor').click(function(){
        $j('.filters__filter.cor .ul--0').slideToggle(150);
        $j('.filters__filter.cor .filters__name').toggleClass('active'); 
    }); 
    $j('.filters__filter.preco').click(function(){
        $j('.filters__filter.preco .ul--0').slideToggle(150);
        $j('.filters__filter.preco .filters__name').toggleClass('active', 150); 
    }); 
}

Não seria no caso, o mesmo "peso", a mesma quantidade, de código que escrevendo em JavaScript? Por ser a mesma coisa? O jQuery só estaria "minificando" o JavaScript. Por que ficaria mais pesado?

3

2 Respostas 2

8

Sim.

O jQuery é construído em cima de JavaScript e a ideia é basicamente poupar texto quando se escreve. O jQuery e outras bibliotecas corrigem alguns comportamentos diferentes entre browsers e simplificam tarefas que são complexas ou morosas de criar com JavaScript nativo, mas é só isso.

Tudo o que o jQuery faz é escrito/programado com JavaScript.

Em relação a converteres todo o teu jQuery em JavaScript nativo isso pode ser uma boa ideia uma vez que vais poupar largura de banda, acelerar o carregamento do site e aprender muito!

Dá uma olhada antes ao jQuery que tens e repensa quais os browsers que queres suportar. Se forem só browsers modernos, pode ser mesmo o mais indicado tirar o jQuery.


Edit:

(aqui fica uma sugestão para o teu edit na pergunta, de código nativo para substituir jQuery)

var filtros = [].slice.call(document.querySelectorAll('.filters__name'));
document.querySelector('.filters .title').addEventListener('click', function() {
    var list = document.querySelector('.filters__list');
    list.style.display = list.style.display == 'block' ? 'none' : 'block';
});

function toggleFilters(current) {
    return function(e) {
        if (filtros.indexOf(e.target) == -1) return;
        filtros.forEach(function(el) {
            var filter = el.parentElement;
            if (el == current) filter.classList.toggle('expand-filter');
            else filter.classList.remove('expand-filter');
        });
    }
}
filtros.forEach(function(el) {
    el.addEventListener('click', toggleFilters(el))
});
.title {
  margin: 10px;
  border-bottom: 1px solid black;
  cursor: pointer;
}
.filters__name {
  margin-left: 20px;
  cursor: pointer;
}

.filters__filter ol > li,
.filters__filter ul > li {
    height: 0;
    opacity: 0;
    transition: height 0.5s, opacity 0.2s;
}

.expand-filter ol > li,
.expand-filter ul > li {
    height: 20px;
    opacity: 1;
}
<aside class="col-left sidebar">
    <div class="filters">
        <div class="title title--sm"><span>Filtros</span></div>
        <div class="filters__list" style="display: none;">
            <div class="filters__filter categoria">
                <div class="filters__name">Categoria</div>
                <ol>
                    <li>
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/calca-legging" title="Calça Legging" class="a-filter link">
                            <span class="label">Calça Legging</span>
                            <span class="count">(307)</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/top-fitness" title="Tops" class="a-filter link">
                            <span class="label">Tops</span>
                            <span class="count">(106)</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/blusas-de-academia" title="Blusas e Camisetas" class="a-filter link">
                            <span class="label">Blusas e Camisetas</span>
                            <span class="count">(55)</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/bermuda-para-academia" title="Bermudas" class="a-filter link">
                            <span class="label">Bermudas</span>
                            <span class="count">(13)</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/short-de-academia" title="Shorts" class="a-filter link">
                            <span class="label">Shorts</span>
                            <span class="count">(14)</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia/combos-e-kits" title="Combos e Kits" class="a-filter link">
                            <span class="label">Combos e Kits</span>
                            <span class="count">(22)</span>
                        </a>
                    </li>
                </ol>
            </div>
            <div class="filters__filter tamanho">
                <div class="filters__name">Tamanho</div>
                <div class="filters__swatches">
                    <ul class="ul--0">
                        <li class="li--0 pp">
                            <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=482" title="PP" class="a--0 ">
                                <span class="label">
                     <span class="swatch">PP</span>
                                </span>
                            </a>
                        </li>
                        <li class="li--0 p">
                            <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=476" title="P" class="a--0 ">
                                <span class="label">
                     <span class="swatch">P</span>
                                </span>
                            </a>
                        </li>
                        <li class="li--0 m">
                            <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=473" title="M" class="a--0 ">
                                <span class="label">
                     <span class="swatch">M</span>
                                </span>
                            </a>
                        </li>
                        <li class="li--0 g">
                            <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=474" title="G" class="a--0 ">
                                <span class="label">
                     <span class="swatch">G</span>
                                </span>
                            </a>
                        </li>
                        <li class="li--0 gg">
                            <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tamanho=475" title="GG" class="a--0 ">
                                <span class="label">
                     <span class="swatch">GG</span>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="filters__filter tecido">
                <div class="filters__name">Tecido</div>
                <ul class="ul--0">
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tecidos=472" title="Poliamida" class="a--0">
                            <span class="label">Poliamida</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tecidos=471" title="Poliester" class="a--0">
                            <span class="label">Poliester</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?tecidos=470" title="Viscose" class="a--0">
                            <span class="label">Viscose</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="filters__filter cor ">
                <div class="filters__name">Cor </div>
                <ul class="ul--0">
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=73" title="Amarelo" class="a--0">
                            <span class="label">Amarelo</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=74" title="Azul" class="a--0">
                            <span class="label">Azul</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=76" title="Branco" class="a--0">
                            <span class="label">Branco</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=77" title="Cinza" class="a--0">
                            <span class="label">Cinza</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=85" title="Estampado" class="a--0">
                            <span class="label">Estampado</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=78" title="Laranja" class="a--0">
                            <span class="label">Laranja</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=86" title="Multicolorido" class="a--0">
                            <span class="label">Multicolorido</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=80" title="Preto" class="a--0">
                            <span class="label">Preto</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=81" title="Rosa" class="a--0">
                            <span class="label">Rosa</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=82" title="Roxo" class="a--0">
                            <span class="label">Roxo</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=83" title="Verde" class="a--0">
                            <span class="label">Verde</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?cor=84" title="Vermelho" class="a--0">
                            <span class="label">Vermelho</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="filters__filter beneficios">
                <div class="filters__name">Benefícios</div>
                <ul class="ul--0">
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=26" title="Anticelulite" class="a--0">
                            <span class="label">Anticelulite</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=28" title="Disfarça celulite" class="a--0">
                            <span class="label">Disfarça celulite</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=36" title="Dupla face" class="a--0">
                            <span class="label">Dupla face</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=27" title="Facilita a transpiração" class="a--0">
                            <span class="label">Facilita a transpiração</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=31" title="Melhora a circulação" class="a--0">
                            <span class="label">Melhora a circulação</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=24" title="Modela o corpo" class="a--0">
                            <span class="label">Modela o corpo</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=32" title="Possui Bolso" class="a--0">
                            <span class="label">Possui Bolso</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=29" title="Previne dores musculares" class="a--0">
                            <span class="label">Previne dores musculares</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=25" title="Proteção UV" class="a--0">
                            <span class="label">Proteção UV</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=30" title="Regula a temperatura do corpo" class="a--0">
                            <span class="label">Regula a temperatura do corpo</span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?beneficios=33" title="Seca rapidamente" class="a--0">
                            <span class="label">Seca rapidamente</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="filters__filter preco">
                <div class="filters__name">Preço</div>
                <ul class="ul--0">
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=-20" title="R$0,00 - R$19,99" class="a--0">
                            <span class="label"><span class="price">R$0,00</span> - <span class="price">R$19,99</span></span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=20-40" title="R$20,00 - R$39,99" class="a--0">
                            <span class="label"><span class="price">R$20,00</span> - <span class="price">R$39,99</span></span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=40-60" title="R$40,00 - R$59,99" class="a--0">
                            <span class="label"><span class="price">R$40,00</span> - <span class="price">R$59,99</span></span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=60-80" title="R$60,00 - R$79,99" class="a--0">
                            <span class="label"><span class="price">R$60,00</span> - <span class="price">R$79,99</span></span>
                        </a>
                    </li>
                    <li class="li--0">
                        <a href="http://roupasatacado.dev.bizcommerce.com.br/roupas-de-academia?price=80-" title="acima de R$80,00 " class="a--0">
                            <span class="label">acima de <span class="price">R$80,00</span> </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</aside>

Para usares jQuery tens de carregar a biblioteca toda. Dá uma olhada aqui: https://code.jquery.com/jquery-2.2.4.js é isso tudo que tens de carregar para podes escrever código jQuery. O meu JavaScript não precisa de nada. Por isso é que é mais leve do que carregando o jQuery.

0
1

Sim, eu acho. Mas você vai ter um poucos mais de trabalho. O jQuery te poupa muito trabalho, por isso ele é muito usado. Mas você consegue sim fazer as coisas que quer.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .