Lightweight Utility Object

I'm working on a little project, and it's fairly lightweight. I ended up creating a JavaScript object with a few functions to help with the most common tasks, e.g. add class, toggle class, select element...

It's a collection assembled from You Might Not Need jQuery.

Example usage:

U.ready(function() {
  console.log('Ready to go!');
});

I'd usually have this exported as a separate module using Browserify or ES2015.

/**
 * Utilities
 * see http://youmightnotneedjquery.com/
 * @type {Object}
 */
var U = {
  /**
   * Call a function when DOM is ready
   * @param  {Function} fn Function to call when DOM is ready
   */
  ready: function(fn) {
    if (document.readyState !== 'loading') {
      fn();
    } else {
      document.addEventListener('DOMContentLoaded', fn);
    }
  },

  /**
   * Select a DOM element
   * @param  {String} selector
   * @return {DOM Element}
   */
  qsa: function(selector) {
    return document.querySelectorAll(selector);
  },

  /**
   * Add class
   * @param {String} el        DOM Selector
   * @param {String} className Class to add to el
   */
  addClass: function(el, className) {
    if (el.classList) {
      el.classList.add(className);
    } else {
      el.className += ' ' + className;
    }
  },

  /**
   * Check if an element has a given class
   * @param  {String}  el        Selector string to check
   * @param  {String}  className Class to check against
   * @return {Boolean}
   */
  hasClass: function(el, className) {
    if (el.classList) {
      el.classList.contains(className);
    } else {
      new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
    }
  },

  /**
   * Remove class
   * @param {String}  el        DOM Selector
   * @param {String}  className Class to remove from el
   */
  removeClass: function(el, className) {
    if (el.classList) {
      el.classList.remove(className);
    } else {
      el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
    }
  },

  /**
   * Toggle class
   * @param {String}  el        DOM Selector
   * @param {String}  className Class to toggle on el
   */
  toggleClass: function(el, className) {
    if (el.classList) {
      el.classList.toggle(className);
    } else {
      var classes = el.className.split(' ');
      var existingIndex = classes.indexOf(className);

      if (existingIndex >= 0) {
        classes.splice(existingIndex, 1);
      } else {
        classes.push(className);
      }

      el.className = classes.join(' ');
    }
  }
};

View the Gist

← Home