Hacker News Reader

Comment by beatgammit | Hacker News Reader

I don't think so, for example:

    var list = querySelectorAll(selector);
    var i;
    for (i = 0; i < list.length; i++)
        list[i].value = value;

Is just as readable as:

    $(selector).val(value);

Except that the jQuery example requires you to be familiar with jQuery. The first, however, just requires you to be familiar with a for loop, which is a common construct in many languages. Being faster is just a happy by-product.

I, personally, am starting to use Dart instead, because it is a nice middleground between jQuery and raw DOM manipulation; it doesn't hide the details like jQuery does and it's still fast.

Ihe best argument I can see is with XMLHttpRequest, which is still a pain because it doesn't have a nice API.

View on HN

Chain a few more commands onto that example and then we can talk about how readable the pure JS version is.

I've never liked chaining, and I hardly ever find a time when it's needed now:

* animations: CSS3

* templating: I don't do it, I prefer static pages and toggle sections with classes

* element filtering: better selectors (nth-child, nth-of-type, [data-stuff=''], etc)

* form serialization: either use event handlers and build it as you go or just use regular browser form handling

Currently, I use reqwest [1] for my HTTP requests. It's very small and is cross browser. In Dart, I just use the built-in libraries.

[1] - https://github.com/ded/reqwest

Just because you mention Dart here, I want to point out what this would look like in Dart right now:

    queryAll(selector).forEach((e) => e.value = value);

To me this is quite readable, and it's really nothing special about Dart, it's just that the dart:html library uses real Dart collections rather than the very unfortunate DOM NodeList.

To go even further into jQuery territory, there are bugs requesting that queryAll() return an ElementList that has setters that effect every element in the list, so we could do this:

    queryAll(selector).value = value;

I'm on the fence about that. It's short, but a little magical. I'm sure jQuery fans would like to have it though.

It's even better with modern JS:

    document.querySelectorAll(selector).forEach(function (elem) { value = somevalue; });

Which is more obvious in intent and more flexible.

Except this doesn't work, because that's not a real array, it's a stupid NodeList. :(

So you'd have to do:

  Array.prototype.slice.call(document.querySelectorAll('thing'), 0).forEach(function (elem) { value = somevalue; });

ugh.

Everyone should be shimming ES5 array methods so your good example could quite happily run on older browsers too.

You don't need to call the slice method:

    Array.prototype.forEach.call(document.querySelectorAll('thing'), function (elem) { value = somevalue; });

And I could use underscore, a much more general-purpose library than jQuery to help me here, only 4kb. So:

  _.each(document.querySelectorAll('thing'), function (elem) { value = somevalue; });

(But then I might as well just use jQuery, I guess)

I'm sorry but four lines of code will never be "just as readable as" one.

Frequently four lines are more readable than one.

Reply on news.ycombinator.com