¿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.

javascript jquery code-conversion

— davidsleeps
fuente

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

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.

— Pim Jager
fuente

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.

— Intrusión
fuente

22

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.

— Milche Patern
fuente

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

— dan
fuente

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 :)

— Ryan Florence
fuente

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

Si quieres aprender JavaScript, mira estos videos de Douglas Crockford. Ellos son muy buenos.

— bobobobo
fuente

2

Un poco fuera de tema, pero las conversaciones de Crockford son generalmente sorprendentes.

— Interior

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.

— dylanfm
fuente

1

Hay varios buenos libros disponibles. Me gusta ppk en JavaScript. Aquí está C hapter 8 en el DOM .

— Nosredna
fuente