¿Hay una manera fácil de convertir el código jquery a javascript? [cerrado]


142

Existen muchos ejemplos para lograr ciertas cosas en javascript / dom usando jQuery. Sin embargo, usar jQuery no siempre es una opción que puede dificultar la comprensión de los ejemplos de soluciones javascript escritas en jQuery.

¿Hay una manera fácil de convertir el código jQuery a JavaScript normal? Supongo que sin tener que acceder o comprender el código fuente de jQuery.


8
yo era básicamente después de algo que hizo convertir la línea 1 en líneas de jQuery javascript 10 de vainilla ... para los casos en que jQuery no está disponible ...
davidsleeps

1
Incluso si no puede usar una etiqueta de script para incluir jQuery, siempre puede anteponer una versión minificada al archivo fuente. No puedo ver ninguna razón por la cual jQuery no estaría disponible aparte de algún tipo de política corporativa.
cdmckay

23
Puedo ver un buen uso para esto también. Supongamos que usa solo alrededor de 10-100 líneas en javascript con jQuery. Ahorraría ancho de banda al volver a compilar y sustituir funciones a los métodos principales y, por lo tanto, no cargar todo lo demás desde jQuery.

55
Tengo la misma pregunta Muchos respondieron que jQuery es más simple, pero un desarrollador que ya esté familiarizado con JavaScript tendrá algunos problemas para comprender el símbolo / abreviatura en jQuery. Y mi razón para preguntar es, por alguna razón, el script jQuery que obtuve no funcionará en Blackberry. Es un script de carga de Ajax. Así que creo que necesito traducirlo a Javascript :(

1
Estoy intentando hacer un JS-kludge dentro de una aplicación existente, y todas las funciones JS incorporadas de la aplicación se rompen si incluyo jQuery. Es una aplicación mal escrita (JIRA de Atlassian), y estoy seguro de que tienen la culpa, pero igual necesito esto.
chadoh 01 de

Respuestas:


41

La forma más fácil es aprender cómo atravesar y manipular DOM con la API de DOM simple (probablemente llamaría esto: JavaScript normal).

Sin embargo, esto puede ser un dolor para algunas cosas. (razón por la cual las bibliotecas se inventaron en primer lugar).

Buscar en Google "JavaScript DOM traversing / manipulation" debería presentarle muchos recursos útiles (y algunos menos útiles).

Los artículos en este sitio web son bastante buenos: http://www.htmlgoodies.com/primers/jsp/

Y como Nosredna señala en los comentarios: asegúrese de probar en todos los navegadores, porque ahora jQuery no manejará las inconsistencias por usted.


44
Y debe asegurarse de probar varias versiones de cada navegador.
Nosredna

1
¿Cómo influye la elección de la estación de trabajo de escritorio en el uso de jQuery?
Dan Davies Brackett

55
Simpatizo con la política de usar una biblioteca de código abierto para algunas organizaciones. Al final, el tiempo que pasa reescribiendo de manera simple (y probablemente con errores) en la travesía simple de DOM y JS es dinero perdido para la empresa. Puede argumentar que las grandes empresas, incluidas las muy conservadoras, usan jQuery: docs.jquery.com/Sites_Using_jQuery : Oracle, Google, Amazon, Dell, Bank of America, Intuit, Salesforce. Estas no son compañías comunistas hippies. Se trata de empresas muy reales cuyos departamentos legales probablemente han hecho sus deberes y aceptado jQuery ...
artlung

2
@davidsleeps - jQuery es sancionado por Microsoft ... Está incluido en Visual Studio 2008, lo que técnicamente lo convierte en una herramienta "Microsoft". ¿Eso haría que tu empleador se sintiera mejor?
Robert Harvey

44
¿Cuál es la diferencia para su empresa entre jquery y un montón de javascript que escribió para hacer lo mismo? No es que esté instalando nada, codificando en un nuevo idioma o agregando CUALQUIER dependencia. Honestamente, esto es lo más estúpido que he escuchado, ya que permite JavaScript pero no jQuery. jQuery ES JAVASCRIPT!
micmcg

60

Esto te llevará al 90% del camino; )

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

Para Ajax, la API Fetch ahora es compatible con la versión actual de cada navegador principal . Para $.ready(), DOMContentLoadedtiene un soporte casi universal . Es posible que no necesite jQuery proporciona métodos nativos equivalentes para otras funciones comunes de jQuery.

Zepto ofrece una funcionalidad similar pero pesa 10K con cremallera. Hay compilaciones personalizadas de Ajax para jQuery y Zepto, así como algunos micro frameworks , pero jQuery / Zepto tiene un soporte sólido y 10KB es solo ~ 1 segundo en un módem de 56K.


22

Acabo de encontrar este tutorial bastante impresionante sobre la conversión de jquery a javascript de Jeffrey Way el 19 de enero de 2012 *Copyright © 2014 Envato* :

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

Nos guste o no, cada vez más desarrolladores están siendo introducidos al mundo de JavaScript a través de jQuery primero. En muchos sentidos, estos recién llegados son los afortunados. Tienen acceso a una gran cantidad de nuevas API de JavaScript, que hacen que el proceso de atravesar DOM (algo de lo que mucha gente depende de jQuery) sea considerablemente más fácil. ¡Desafortunadamente, no saben sobre estas API!

En este artículo, tomaremos una variedad de tareas comunes de jQuery y las convertiremos a JavaScript moderno y heredado.

Lo propuse en un comentario a OP, y después de su sugerencia, publico tiene una respuesta para que todos puedan consultar.

Además, Jeffrey Way mencionó sobre su inspiración, la bruja parece ser un buen manual para comprender: http://sharedfil.es/js-48hIfQE4XK.html

Tiene un avance, esta comparación de documentos de jQuery a 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…
  });
});

Deberías echar un vistazo.


12

Sé que este es un hilo antiguo, pero hay un excelente recurso que muestra el javascript nativo equivalente a jquery, incluso incluye ejemplos de ES6. Este es el más completo que he encontrado de los otros artículos que cubren este tema.

jQuery to Vanilla JS


6

¿Hay una manera fácil de convertir el código jQuery a JavaScript normal?

No, especialmente si:

Comprender los ejemplos de soluciones javascript escritas en jQuery [es] difícil.

JQuery y todos los marcos tienden a facilitar la comprensión del código. Si eso es difícil de entender, entonces JavaScript vainilla será una tortura :)


15
otros tienen respuestas reales
ftrotter

2
Además, aunque JQuery hace que el código sea más conciso (generalmente), es discutible si realmente lo hace más fácil . jQuery puede hacer que un código sea más difícil de analizar mentalmente. Por ejemplo, <input onclick="myfunction(this)">con myfunction(field){ field.value = "3"; }tiene más sentido para mí que <input id='thing'>con(function ($) { $(thing).click({ $(thing).val("3");});})()
liljoshu

6

Puedo ver una razón, no relacionada con la publicación original, para compilar automáticamente el código jQuery en JavaScript estándar:

16k, o lo que sea que sea la biblioteca jQuery minimizada y comprimida, puede ser demasiado para su sitio web destinado a un navegador móvil. El w3c recomienda que todas las solicitudes HTTP para sitios web móviles tengan un máximo de 20k.

Especificaciones de w3c para dispositivos móviles

Así que disfruto codificando en mi jQuery bonito, conciso y encadenado. Pero ahora necesito optimizar para dispositivos móviles. ¿Realmente debería regresar y hacer el trabajo difícil y tedioso de reescribir todas las funciones auxiliares que utilicé en la biblioteca jQuery? ¿O hay algún tipo de aplicación conveniente que me ayude a compilar?

Eso sería muy dulce. Lamentablemente, no creo que tal cosa exista.


6

1

El libro de Jeremy Keith " DOM Scripting " es una gran introducción para trabajar con Javascript y DOM. Lo recomiendo, ya sea que quieras usar jQuery o no. Es bueno saber qué está pasando debajo.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.