8

Es una inquietud que tengo hace tiempo y sobre la cual no encuentro ninguna referencia.

Algunas veces he tenido la percepción de que los fragmentos de código trabajan más rápido cuando se usa Javascript puro. Entonces yo suelo aplicar algunas veces no sé si llamarle estilo de código o forma de obtener los datos, basándome en Javascript puro.

Este es un ejemplo sencillo en el que, para escuchar el evento se usa jQuery, pero dentro de la función, para obtener el valor yo paso a Javascript puro con this.value.

$("#mySelectId").on('change', function() {
  var selValue = this.value;
  var selStatus = (selValue > 0) ? "Vamos a trabajar con: " + selValue : "No podemos trabajar con " + selValue;
  console.log(selStatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="mySelectId" name="mySelect">
  <option value="0" selected>--Seleccione un número--</option>
  <option value="1">Uno</option>
  <option value="2">Dos</option>
  <option value="3">Tres</option>
</select>

En este segundo ejemplo, yo permanezco fiel a jQuery en todo momento y obtengo el valor al estilo jQuery $(this).val():

$("#mySelectId").on('change', function() {
  var selValue = $(this).val();
  var selStatus = (selValue > 0) ? "Vamos a trabajar con: " + selValue : "No podemos trabajar con " + selValue;
  console.log(selStatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="mySelectId" name="mySelect">
  <option value="0" selected>--Seleccione un número--</option>
  <option value="1">Uno</option>
  <option value="2">Dos</option>
  <option value="3">Tres</option>
</select>

Ambos códigos funcionan bien. Yo lo que quiero saber es si existe algún problema demostrable en mezclar estilos o formas de proceder.

El concepto que yo tengo formado ahora mismo es de pasar a Javascript puro en todo lo que puedo, pero no sé si esto pueda tener alguna consecuencia a nivel de rendimiento u otros.

1
  • Problemas como tal en la mezcla de estilos no he tenido pero sí es fácil presenciar como aumentan los tiempos de carga de un sitio web cuando estás utilizando jquery por medio aunque es como todo si sabes utilizar la herramienta en un nivel muy avanzado, todos los "posibles" defectos se terminan minimizando y generalmente obtienes sólo beneficios al implementarla. No menciono los casos de colisión de nombres porque a mi parecer son escasos y con un conocimiento básico de javascript puro o jquery es dificil que se presente este panorama. Espero sea de ayuda, Un saludo.
    – Eztronics
    Commented el 21 may. 2018 a las 19:38

3 respuestas 3

5

No suele haber problemas. Javascript nativo/puro/vanilla suele ser mas rápido pues no tiene capas de compatibilidad.

Para reemplazar jQuery con sus equivalente vanilla se puede consultar esta web: http://youmightnotneedjquery.com/

Para implementar funcionalidades específicas hay varias librerías en esta web: http://microjs.com

Internet Explorer ha sido históricamente el mas mutante en cuanto a implementaciones, pero a partir de EDGE ya se hace mas estándar, con lo cual las librerías de compatibilidad pasan a ser mas de "sugar syntax".

Nota

Tener en cuenta que jQuery además de ser una librería multinavegador también se dedica a hacer acrobacias alrededor de bugs/issues en varios navegadores/versiones, desconozco si hay un listado de la versión 3.x, aquí hay una lista de los bugs o issues que la versión 2.1.x intenta esquivar o arreglar: https://gist.github.com/rwaldron/8720084#file-reasons-md

Siempre hay que ir evaluando si vale el esfuerzo reinventar la rueda o sumar complejidad en el desarrollo al quitar (o agregar) una librería de este tipo.

2
  • La página youmightnotneedjquery.com sólo te da alternativas para IE o esto funciona con todos los navegadores? Commented el 21 may. 2018 a las 19:06
  • El mas problemático suele ser IE al intentar moverse de jQuery a vanilla, por eso el enlace. Commented el 22 may. 2018 a las 0:17
3

No tiene consecuencias en general aunque, hay que tener en cuenta que JQuery esta escrito en JavaScript, escribir JavaScript puro y mezclarlo con Jquery no tiene más consecuencia que un código menos bonito o legible, pero a nivel rendimiento, si el JavaScript puro esta escrito de la manera más eficiente posible, según el caso, funcionaría más rápido que JQuery. Un saludo.

3
  • y que pasa si en un método hecho en javascript llega a tener colisión de nombres?
    – user75901
    Commented el 21 may. 2018 a las 15:14
  • A que te refieres con colisión de nombres?
    – lDanny7
    Commented el 21 may. 2018 a las 15:19
  • 2
    @AlfredoPaz La colisión de nombres no la pongo como consecuencia de JQuery con JavaScript, ya que puede suceder con cualquier plugin o librería, no solo con JQuery. Commented el 21 may. 2018 a las 15:27
2

Pasar de JavaScript a JQuery.

Los problemas que se pueden estar presentando son:

  1. Colisiones de nombres de métodos, claro es si aplica el caso; es decir si el nombre de una función no interfiere con los métodos predefinidos de JQuery
  2. Sintáxis ambigua, es decir al estar pasando de un lenguaje a una librería se mezclan als sintáxis
  3. No existe problema en rendimiento ya que las sentencias nativas, es decir que ocupan javascript se interpretan por el navegador; mientras que JQuery se lee se convierte a javascript puro y se trata
  4. Salvo que algún método de JQuery solicite alguna sintáxis muy particular no debe haber problema

Es decir en el siguiente código tuyo

$("#mySelectId").on('change', function() {
  var selValue = $(this).val();
  var selStatus = (selValue > 0) ? "Vamos a trabajar con: " + selValue : "No podemos trabajar con " + selValue;
  console.log(selStatus);
});

Tomarás el valor de selValue considerando que debe interpretarse el código y transformarse a js tomará menos tiempo como lo tienes justo con:

var selValue = this.value;

Lo anterior ya que this sigue haciendo referencia al contexto de donde esta declarada, es decir la función anónima que se dispara cuando el evento on change ocurre

ACTUALIZACIÓN

El mayor detalle que si se debe tener en consideración si se empieza a migrar código jquery a javascript puro, es el uso de caracter´siticas de ES6; por ejemplo las arrow functions

Las arrow functions tienen un ámbito para el caso de this distinto a una function() tradicional por lo cual hasta que el código no sea migrado totalmente no deberían implementarse sin saber que tal son soportadas por la versión especifica de jquery que se este usando

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.