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 just 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

Categories:  

Next:

Previous:

Comments

I accept comments via email, and clicking "Add Comment" will open your default email client. If the thoughts of your native email client opening horrifies you, you can instead email your comment to contact@tj.ie.

Add Comment