remy / min.js Goto Github PK

Super minimal selector and event library

JavaScript 100.00%

min.js's Introduction

min.js

A super tiny JavaScript library to execute simple DOM querying and hooking event listeners. Aims to return the raw DOM node for you to manipulate directly, using HTML5 (et al) tech like element.classList or element.innerHTML, etc.

Query elements

var links = $('p:first-child a');

If there is more than one link, the return value is NodeList, if there's only a single match, you have an Element object. So you need to have an idea of what to expect if you want to modify the DOM.

Events

Bind events

$('p:first-child a').on('click', function (event) {
  event.preventDefault();
  // do something else
});

Note: the on and trigger methods are on both Node objects and NodeList objects, which also means this affects the document node, so document.on(type, callback) will also work.

Custom events

$('a').on('foo', function () {
  // foo was fired
});

$('a:first-child').trigger('foo');

Arbitrary events / pubsub

$.on('foo', function () {
  // foo was fired, but doesn't require a selector
});

Turning off events?

Current min.js has no support for turning off events (beyond .removeEventListener -- but even then you don't have the reference function to work with). Currently there's no plans to implement this (as I find I don't disable events very often at all) -- but I'm not closed to the idea. There's an issue open, but it adds quite a bit more logic to a very small file. If there's enough 👍 on the issue, I'll add it in. Equally, if you think min.js should stay simple, please 👎 -- this is useful too.

Looping

$('p').forEach(function (el, index) {
  console.log(el.innerHTML);
});

Note: jQuery-like libraries tend to make the context this the element. Since we're borrowing forEach from the array object, this does not refer to the element.

Chaining events

$('a').on('foo', bar).on('click', doclick).trigger('foobar');

Also when a single element is matched, you have access to it:

$('a').href = '/some-place.html';

Silent failing

Like jQuery, this tiny library silently fails when it doesn't match any elements. As you might expect.

More info

Special thanks and inspired by Andrew Lunny's slide.
I've started using this library in conjunction with some microlibraries that I've written for data binding and XHR.
License: MIT / http://rem.mit-license.org

min.js's People

Contributors

Stargazers

Watchers

min.js's Issues

About Bower

Hey, I'm new to using Bower, but thought I'd share what I learned about how the versions work. The version you state in component.json will refer back to a tag from the git repository. With each tag, you effectively freeze the code where it is at that point, which then enables Bower users to ask for specific version, ex: bower install min.js#0.0.2

When you've made a change big enough for a tag, run: git tag -a 0.0.3 -m 'v0.0.3' then push the branch with the --tags flag: git push origin master --tags

Woo!

Support delegated event

The critical feature I use is event delegation.

EventTarget.prototype.on

This covers XMLHttpRequest.prototype.on.
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget

Why the grunt dependencies?

Shouldn't this be on devDependencies instead?

delegate

Looking at your source it doesn't seem like delegation is done correctly: you can't just compare the event.target, you have to find the closest ancestor matching the selector.

This is how jQuery & Zepto do it, and that's the correct behaviour. Example:

$('body').delegate('li > a', 'click', fn);

If you've clicked a span within the a element then it won't match even though a child of the a element was indeed clicked.

Because of this requirement, firing delegated events is actually quite a bit slower, and is rarely a necessity. I've opted against them in espresso.js and have not had any issues at all.

Why not use this.forEach within nodeList.on and nodeList.trigger?

Not really an issue, but wasn't sure where I could pass this along?
If you are only var'ing the "each" to use within the NodeList protototype addons, why not just declare it, and then actually use it?

var list = NodeList.prototype

list.forEach = Array.prototype.forEach

list.on = function(e, fn) {
  this.forEach(function(el) { el.on(e, fn) })
  return this
}

list.trigger = function(e) {
  this.forEach(function(el) { el.trigger(e) })
  return this
}

Don't use NodeList.proto

This is based on our Twitter discussion.

The problematical code:

nodeList = NodeList.__proto__ || NodeList.prototype

and then

nodeList[forEach] = each;

NodeList.__proto__ shouldn't be used. In Chrome, it refers to Object.prototype (!!) and in Firefox it refers to some "magical" host object. So, in Chrome you're adding a forEach property to Object.prototype, i.e. you're extending Object.prototype. You're doing this unintentionally, but even if you were doing this on purpose, it would be an awful approach.

From what I see, your intent is to be able to iterate over NodeList instances. The standard approach would be to extend NodeList prototype:

NodeList.prototype.forEach = Array.prototype.forEach;

But you're already doing the iteration differently by invoking Array.prototype.forEach via call() like so:

each.call(this, function (el) {
  el.on(event, fn);
});

This is a good approach. It gets the job done just fine. Therefore, you don't need to add a forEach method to NodeList.prototype and the two lines of code (from the beginning of my message) should be removed. (Edit: Only the second line should be removed. The first line is need to add stuff to Node.prototype. See my pull request.)

When script loaded: Failed to execute 'createElement'

Getting the following on Chrome 41 (and FF)

Uncaught TypeError: Failed to execute 'createElement' on 'Document': 1 argument required, but only 0 present.

I'm probably doing something wrong, the script is loaded like:

<script src="/static/bower_components/min.js/dist/$.js"></script>

"Live" events

Is it possible somehow to do the equivalent of jQuery's $(document).on('click', selector, function() {}); in min.js?

Different release versions

Hi,

Since June 24 2013 there are no new tags on GitHub (the latest is version 0.1.0), your component.json is stuck at version 0.1.0, but package.json is on version 0.2.3. Can you update all files what contains a version number? I recommend https://github.com/mikaelbr/mversion to keep it up to date. Maybe you can create an 1.0 version, because it's stable since your last commit on July 22, 2013.
Thank you in advance.