DEV Community

[Comment from a deleted post]
Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

I love tiny libraries like this, have a ❤🦄

I hope the below gives you some inspiration, as if you want tiny and powerful (with support for IE!) my modified version of ki.js is pretty sweet:-

!function (b, c, d, e, f) {
  f = b['add' + e]

  function i(a, d, i) {
    for(d = (a && a.nodeType ? [a] : '' + a === a ? b.querySelectorAll(a) : c), i = d.length; i--; c.unshift.call(this, d[i]));
  }

  $ = function (a) {
    return /^f/.test(typeof a) ? /in/.test(b.readyState) ? setTimeout(function() { $(a); }, 9) : a() : new i(a);
};

  $[d] = i[d] = {
    on: function (a, b) {
      return this.each(function (c) {
        f ? c['add' + e](a, b, false) : c.attachEvent('on' + a, b)
      })
    },
    off: function (a, b) {
      return this.each(function (c) {
        f ? c['remove' + e](a, b) : c.detachEvent('on' + a, b)
      })
    },
    each: function (a, b) {
      for (var c = this, d = 0, e = c.length; d < e; ++d) {
        a.call(b || c[d], c[d], d, c)
      }
      return c
    },
    splice: c.splice
  }
}(document, [], 'prototype', 'EventListener');
Enter fullscreen mode Exit fullscreen mode

This gives you:
$('button').on('click', someAction); for event listeners (and .off to remove them)

$('div').each(function (elem, i) { to iterate over items

$(function () { for document ready

All for 150 bytes gzipped!

And for extra features:-

var props = ['add', 'remove', 'toggle', 'has'],
maps = ['add', 'remove', 'toggle', 'contains'];
props.forEach(function(prop, index) {
  $.prototype[prop + 'Class'] = function(a) {
    return this.each(function(b) {
        if(a){
            b.classList[maps[index]](a);
        }
    });
  };
});
Enter fullscreen mode Exit fullscreen mode

That gives us addClass removeClass toggleClass and hasClass.

And if you want the kitchen sink:-

$.prototype.css = function(a, b) {
  if (typeof(a) === 'object') {
    for(var prop in a) {
      this.each(function(c) {
        c.style[prop] = a[prop];
      });
    }
    return this;
  } else {

    return b === []._ ? this[0].style[a] : this.each(function(c) {
      c.style[a] = b;
    });
  }
};
$.prototype.text = function(a) {
    console.log(a);
  return a === []._ ? this[0].textContent : this.each(function(b) {
    b.textContent = a;
  });
};
$.prototype.html = function(a) {
  return a === []._ ? this[0].innerHTML : this.each(function(b) {
    b.innerHTML = a;
  });
};
$.prototype.attr = function(a, b) {
  return b === []._ ? this[0].getAttribute(a) : this.each(function(c) {
    c.setAttribute(a, b);
  });
};
$.param = function(obj, prefix) {
  var str = [];
  for(var p in obj) {
    var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
    str.push(typeof v == "object" ? $.param(v, k) : encodeURIComponent(k) + "=" + encodeURIComponent(v));
  }
  return str.join("&");
};
$.prototype.append = function(a) {
  return this.each(function(b) {
    b.appendChild(a[0]);
  });
  };
Enter fullscreen mode Exit fullscreen mode

Although that would be 750 bytes gzipped so it might be a little large!

Collapse
 
fzn0x profile image
Fauzan

this library is even smaller, the open source world is really beautiful!