Existe uma maneira fácil de converter o código jquery em javascript? [fechadas]


142

Existem muitos exemplos por aí de conseguir certas coisas em javascript / dom usando jQuery. No entanto, o uso do jQuery nem sempre é uma opção que pode dificultar a compreensão dos exemplos de soluções javascript escritas no jQuery.

Existe uma maneira fácil de converter o código jQuery em javascript regular? Eu acho que sem ter que acessar ou entender o código fonte do jQuery.


8
i era basicamente depois de algo que fez converter a linha 1 jquery em 10 de baunilha linhas de javascript ... para casos quando jquery não está disponível ...
davidsleeps

1
Mesmo se você não puder usar uma tag de script para incluir o jQuery, sempre poderá acrescentar uma versão reduzida ao arquivo de origem. Não vejo nenhum motivo para o jQuery não estar disponível além de algum tipo de política corporativa.
Cdmckay 11/06/2009

23
Também vejo bom uso disso. Suponha que você use apenas cerca de 10 a 100 linhas em javascript com jQuery. Isso economizaria largura de banda recompilando e substituindo funções nos métodos principais e, portanto, não carregando tudo o mais do jQuery.

5
Eu tenho a mesma pergunta. Muitos responderam que o jQuery é mais simples, mas um desenvolvedor que já esteja familiarizado com JavaScript terá algum problema ao entender o símbolo / abreviação no jQuery. E minha razão para perguntar é que, por alguma razão, o script jQuery que obtive não funcionará no Blackberry. É um script de upload do Ajax. Então eu acho que preciso traduzi-lo para Javascript :(

1
Estou tentando criar um JS-kludge dentro de um aplicativo existente, e todas as funções JS incorporadas do aplicativo são interrompidas se eu incluir o jQuery. É um aplicativo mal escrito (JIRA da Atlassian), e tenho certeza que eles são os culpados, mas preciso disso da mesma forma.
chadoh

Respostas:


41

A maneira mais fácil é aprender como fazer a travessia e manipulação do DOM com a API simples do DOM (você provavelmente chamaria isso: JavaScript normal).

No entanto, isso pode ser uma dor para algumas coisas. (razão pela qual as bibliotecas foram inventadas).

A pesquisa no Google sobre "navegação / manipulação de DOM javascript" deve apresentar muitos recursos úteis (e alguns menos úteis).

Os artigos deste site são muito bons: http://www.htmlgoodies.com/primers/jsp/

E como Nosredna aponta nos comentários: teste em todos os navegadores, porque agora o jQuery não estará lidando com as inconsistências para você.


4
E você deve certificar-se de testar em várias versões de cada navegador.
Nosredna

1
Como a escolha da estação de trabalho de mesa influencia o uso do jQuery?
11119 Dan Davies Brackett

5
Simpatizo com a política de usar uma biblioteca de código aberto para algumas organizações. No final, o tempo que você gasta reescrevendo de forma clara (e provavelmente com erros) em uma passagem DOM simples e JS é um desperdício de dinheiro para a empresa. Você pode fazer o caso que as grandes empresas, incluindo os muito conservadores, use jQuery: docs.jquery.com/Sites_Using_jQuery : Oracle, Google, Amazon, Dell, Bank of America, Intuit, Salesforce. Essas dificilmente são empresas comunistas hippies. Estas são as empresas muito reais cujos departamentos jurídico já deve ter feito sua lição de casa e aceito jQuery ...
artlung

2
@davidsleeps - o jQuery é sancionado pela Microsoft ... Está incluído no Visual Studio 2008, o que tecnicamente o torna uma ferramenta "Microsoft". Isso faria seu empregador se sentir melhor?
Robert Harvey

4
Qual é a diferença para sua empresa entre jquery e um monte de javascript que você escreveu para fazer a mesma coisa? Não é como se você estivesse instalando algo, codificando em um novo idioma ou adicionando QUALQUER dependência. Essa é honestamente a coisa mais estúpida que já ouvi, permitindo javascript, mas não jQuery. jQuery É JAVASCRIPT!
11789 micmcg

60

Isso fará você 90% do caminho até lá; )

window.$ = document.querySelectorAll.bind(document)

Para o Ajax, a API de busca agora é suportada na versão atual de todos os principais navegadores . Para $.ready(), DOMContentLoadedtem suporte quase universal . Você pode não precisar do jQuery fornece métodos nativos equivalentes para outras funções comuns do jQuery.

O Zepto oferece funcionalidade semelhante, mas pesa 10K compactado. Existem compilações personalizadas do Ajax para jQuery e Zepto, além de algumas microestruturas , mas o jQuery / Zepto tem suporte sólido e 10 KB é de apenas 1 segundo em um modem de 56K.


22

Acabei de encontrar este tutorial bastante impressionante sobre a conversão de jquery para javascript de Jeffrey Way em 19 de janeiro de 2012 *Copyright © 2014 Envato* :

http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/

Quer gostemos ou não, cada vez mais desenvolvedores estão sendo introduzidos no mundo do JavaScript através do jQuery. De muitas maneiras, esses recém-chegados são os sortudos. Eles têm acesso a uma infinidade de novas APIs JavaScript, que facilitam consideravelmente o processo de passagem do DOM (algo que muitas pessoas dependem do jQuery). Infelizmente, eles não conhecem essas APIs!

Neste artigo, pegaremos uma variedade de tarefas comuns do jQuery e as converteremos em JavaScript moderno e legado.

Eu o propus em um comentário ao OP e, após a sugestão dele, eu o publico, tem uma resposta para que todos possam se referir.

Além disso, Jeffrey Way mencionado sobre sua inspiração, parece ser um bom manual para entender: http://sharedfil.es/js-48hIfQE4XK.html

Tem um teaser, esta comparação de documento de jQuery para javascript:

$(document).ready(function() {
  // code…
});

document.addEventListener("DOMContentLoaded", function() {
  // code…
});

$("a").click(function() {
  // code…
})

[].forEach.call(document.querySelectorAll("a"), function(el) {
  el.addEventListener("click", function() {
    // code…
  });
});

Você deveria dar uma olhada.


12

Eu sei que este é um thread antigo, mas há um excelente recurso que mostra o javascript nativo equivalente ao jquery, incluindo até exemplos do ES6. Este é o mais abrangente que eu descobri nos outros artigos que abordam esse assunto.

jQuery para Vanilla JS


6

Existe uma maneira fácil de converter o código jQuery em javascript regular?

Não, especialmente se:

é difícil entender os exemplos de soluções javascript escritas no jQuery.

O JQuery e todas as estruturas tendem a facilitar a compreensão do código. Se isso é difícil de entender, o javascript de baunilha será uma tortura :)


15
outros têm respostas reais
ftrotter

2
Além disso, embora o JQuery torne o código mais conciso (geralmente), é discutível se ele realmente facilita . O jQuery pode dificultar a análise mental de alguns códigos. Por exemplo, <input onclick="myfunction(this)">com myfunction(field){ field.value = "3"; }faz mais sentido para mim do que <input id='thing'>com(function ($) { $(thing).click({ $(thing).val("3");});})()
liljoshu 25/15

6

Eu vejo um motivo, não relacionado à postagem original, para compilar automaticamente o código jQuery no JavaScript padrão:

16k - ou qualquer que seja a biblioteca jQuery compactada e compactada, compactada - pode ser demais para o seu site destinado a um navegador móvel. O w3c recomenda que todas as solicitações HTTP para sites para celular tenham no máximo 20k.

especificações do w3c para dispositivos móveis

Por isso, gosto de codificar meu jQuery agradável, conciso e encadeado. Mas agora eu preciso otimizar para dispositivos móveis. Eu realmente deveria voltar e fazer o trabalho difícil e tedioso de reescrever todas as funções auxiliares que usei na biblioteca jQuery? Ou existe algum tipo de aplicativo conveniente que me ajudará a recompilar?

Isso seria muito gentil. Infelizmente, não acho que isso exista.


6

1

O livro de Jeremy Keith, " DOM Scripting ", é uma excelente introdução ao trabalho com Javascript e o DOM. Eu recomendo, se você deseja usar o jQuery ou não. É bom saber o que está acontecendo embaixo.


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.