Live data from Hacker News

Bling – the $ of jQuery without the jQuery

gist.github.com

11–20 of 138 posts

Re: Bling – the $ of jQuery without the jQuery

#12
post #10

> [].slice.call( document.querySelectorAll('.foo'), function(){ When do you need to do that?

querySelectorAll returns a NodeList instead of a real array, so you can't call things like `.forEach` on the result. `[].slice.call(x)` turns x into an array, so that becomes

    [].slice.call(document.querySelectorAll(...)).forEach(function () {})
Because a lot of array methods are "generic", i.e. operate on array-like objects instead of just arrays, that can be "compacted" to

    [].forEach.call(document.querySelectorAll(...), function () {})
but neither are very nice.

Re: Bling – the $ of jQuery without the jQuery

#13
post #10

> [].slice.call( document.querySelectorAll('.foo'), function(){ When do you need to do that?

Probably meant to be

    [].slice.call(document.querySelectorAll('.foo')).forEach(...
It "casts" the NodeList which is "Array-like" to a proper Array, which has forEach, map and other useful methods in its prototype.

Re: Bling – the $ of jQuery without the jQuery

#14
post #6

Tries to play it cool by wrecking jQuery? Check. No semicolons? Check. Put together by Paul Irish? Check. Yep, this submission is Hipster 1.0 Certified.

1) Paul Irish is a former jQuery team member and he has blog entries about how much he's learned from reading jQuery's source code, not sure exactly how he's "wrecking jQuery".

2) Semicolons are still in debate amongst the JS community, I don't think there's a consensus on whether they're needed or not and it seems to boil down to personal preferences.

3) This reeks of ad hominem, how exactly is Paul Irish "hipster"? Strikes me as someone who's done a lot of work to make the web a better place for all of us, fine with me.

Re: Bling – the $ of jQuery without the jQuery

#15
post #2

This does three things: 1. Alias document.querySelectorAll to $. 2. Alias node.on to node.addEventListener. 3. Make NodeList a sub-type of Array (so you can use forEach etc on node lists as you would on arrays). The $ of jQuery also does a few other things, e.g. create HTML elements from text ($(' ') creates a div element with CSS class "foo") and wrap elements in a node list ($(document.body) creates a node list con…

4. Add NodeList.on, which adds the event listener to all nodes in the list

Re: Bling – the $ of jQuery without the jQuery

#16
post #8
post #5

I don't really know what to think about that. On one hand it may be a nice way to show to people that what they use in jQuery can be written in a few lines of pure JS. On the other hand it encourages people who could use pure JS (because they only use a small portion of jQuery) to stick with some non-standard helper syntax.

> to stick with some non-standard helper syntax. Or in other words - replacing an ugly, verbose API with a widely recognised alternate syntax!

Yes "document.querySelectorAll(selector)" is a bit verbose, but jQuery API is no better, do you know what would "$(selector)" actually do? You can't - it depends on what "selector" is.

Re: Bling – the $ of jQuery without the jQuery

#17
Yes, you can re-implement jQuery in 10 lines of code... if you only support 0.1% of the functionality of jQuery.

jQuery was a game changer for web client side development. Thousands of work hours have been spent on it. It had a specially important role of dealing with all the inconsistencies between browsers. If you don't use all the features, nowadays you can just create a custom build with the stuff you want.

If you don't need jQuery, maybe because you only care about modern browsers, or you use another library or you don't mind a bit of extra boilerplate for DOM manipulation, that's perfectly fine. But these kind of posts seem like mockery on the developers of a library that has provided extreme value for thousands for developers over many years.

Re: Bling – the $ of jQuery without the jQuery

#19
post #11
post #3

This is all I personally ever need. function $(q) { return document.querySelector(q) }

If we're golfing, $ = document.querySelector.bind(document); would be sufficient? ;)

(var | let | const) $ = ::document.querySelector;

with experimental ES7 syntax :D https://github.com/zenparsing/es-function-bind

Re: Bling – the $ of jQuery without the jQuery

#20

Yes, you can re-implement jQuery in 10 lines of code... if you only support 0.1% of the functionality of jQuery. jQuery was a game changer for web client side development. Thousands of work hours have been spent on it. It had a specially important role of dealing with all the inconsistencies between browsers. If you don't use all the features, nowadays you can just create a custom build with the stuff you want. If yo…

I would agree with your comment, but the author is not claiming to be reimplementing jQuery in 10 lines of code. He's merely providing a way to benefit from the syntactic sugar ($) to avoid using the verbose vanilla JS API (document.querySelectorAll) and solve the issue of NodeList not supporting the functionality available on Arrays (forEach, map, etc), which doesn't make any sense in the first place.
Post reply on HN