What consequence could mixing code styles or Javascript / jQuery cross procedures have?

Question:

It is a concern that I have had for a long time and about which I cannot find any reference.

Sometimes I have had the perception that code snippets work faster when using pure Javascript. So I usually apply sometimes I don't know whether to call it a code style or a way to get the data, based on pure Javascript.

This is a simple example in which jQuery is used to listen to the event, but inside the function, to obtain the value I pass to pure Javascript with 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>

In this second example, I stay true to jQuery at all times and get the jQuery-style value $(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>

Both codes work fine. What I want to know is if there is any demonstrable problem in mixing styles or ways of proceeding .

The concept that I have formed right now is to pass to pure Javascript as much as I can, but I don't know if this could have any consequence at the performance level or others.

Answer:

There are usually no problems. Native / pure / vanilla Javascript is usually faster as it does not have compatibility layers.

To replace jQuery with its vanilla equivalents, you can consult this website: http://youmightnotneedjquery.com/

To implement specific functionalities there are several libraries on this website: http://microjs.com

Internet Explorer has historically been the most mutant in terms of implementations, but as of EDGE it has become more standard, with which the compatibility libraries become more than "sugar syntax".

Note

Bear in mind that jQuery in addition to being a multi-browser library is also dedicated to doing stunts around bugs / issues in various browsers / versions, I don't know if there is a list of version 3.x, here is a list of bugs or issues that version 2.1.x try to dodge or fix: https://gist.github.com/rwaldron/8720084#file-reasons-md

You always have to evaluate whether it is worth the effort to reinvent the wheel or add complexity to development by removing (or adding) a library of this type.

Scroll to Top