What could be the consequence of mixing Javascript/jQuery code styles or cross procedures?

Question:

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

I have sometimes 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 of obtaining the data, based on pure Javascript.

This is a simple example where jQuery is used to listen to the event, but inside the function, to get 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 throughout and get the value jQuery-style $(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 switch to pure Javascript in everything I can, but I don't know if this could have any consequences in terms of performance or others.

Answer:

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

To replace jQuery with its vanilla equivalent, 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 since EDGE it has become more standard, with which the compatibility libraries become more of "sugar syntax".

Note

Keep in mind that jQuery in addition to being a cross-browser library is also dedicated to doing tricks 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 tries 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 the development by removing (or adding) a library of this type.

Post Views: 13
Scroll to Top