Question

I have a question towards design of my application, it is a big project that contains the following example javascripts:

• modal.js (contains a jQuery plugin for modal forms)
• tooltip.js (contains a jQuery plugin for tooltips)
• textbox.js (contains a jQuery plugin for textboxes, placeholders etc.)

Would it hurt performance if I would use data-api to set up my whole javascript ui, so I would loop through all elements with this code and initialize a plugin if needed:

$.each('[data-trigger="modal"]', function(a, b){
  // Do plugin code here $(this).modal()
});

$.each('[data-textbox="^*"]', function(a, b){
  // Do plugin code here $(this).textbox()
});

$.each('[data-tooltip="hello, I am a tooltip"]', function(a, b){
  // Do plugin code here $(this).tooltip()
});

The other option would be:

$(document).ready(function(){
  $('#modal-create-account-trigger').modal();
  $('#tb-username').textbox();
  $('#tb-password').textbox();
  $('#tb-fullname').textbox();
});

I prefer the .each solution, so we can control it all fully in the HTML, how ever I know this is bad for performance, how bad is it, and are there alternatives?

Thanks alot for reading.

Answer 1

It’s always better to use #ID selectors due to huge performance gain.