7 ms·
This is cute and all, but JQuery is slightly more than just a framework for accessing the DOM. My JS is a bit rusty, but I remember that in JQuery I could do:
by disconnected 9y ago
This is cute and all, but JQuery is slightly more than just a framework for accessing the DOM.
My JS is a bit rusty, but I remember that in JQuery I could do:
$("some selector").do_things()
And "do_things" would be done on all matching elements. For example:
$("li").addClass("foo")
Would add the class "foo" to all "li". I could further refine the selector above to select only the "li"s I wanted of course.
With the "plain js" solution, you have to "querySelectorAll" and then iterate over each element.
Another example is "ajax" requests. In JQuery you have the general purpose "ajax" method, with simple "success" and "failure" callbacks, and configuration done via a standard JS object filled with all the necessary parameters (and this object could be reused for the most part, since most of the parameters don't change). You can also chain ajax requests together with deferred objects. Simple, straightforward and useful.
With their proposed solution here, you have to faff around with the XMLHttpRequest object every single time you want to make a POST or a GET. Ugh. And if you need to chain a bunch of those together? Uuuuugh.
Yeah, you can put all of these things inside helper functions to hide the ugliness, but if you are going through all that trouble, you are essentially rewriting JQuery (or similar libraries), badly. If it is a one off thing, I guess you don't need JQuery, but if you are rewriting most of these methods, you are crazy. Use a library, and trim it down to remove the stuff you don't need (JQuery allows this, IIRC).
A final aside. One oft overlooked advantage of JQuery is that the "$()" method can be applied to anything, not just the DOM. You can create a JQuery object that encapsulates, say, an array. Then you can iterate with "each", you can "filter", etc. Also, you can easily trigger events on your objects with "trigger" that other interested parties can listen to them by setting up event listener with "on". Useful to give your classes some Qt style signal/slot semantics.
- madeofpalk 9y ago> You can create a JQuery object that encapsulates, say, an array. Then you can iterate with "each", you can "filter", etc. each and filter are native functions on Array.
- megous 9y ago'each' is not. forEach is.
- disconnected 9y ago"each" and "filter" were used as examples of what you can do. You don't have "on", "off" and "trigger", for example.
- mark242 9y agoThe sizzle library that jQuery uses takes advantage of querySelectorAll. https://github.com/jquery/jquery/blob/2d4f53416e5f74fa98e0c1d66b6f3c285a12f0ce/external/sizzle/dist/sizzle.js#L293 https://github.com/jquery/jquery/blob/2d4f53416e5f74fa98e0c1... ...only with a ton of wrapper code around it in order to support IE9 and below. If you don't have to support ancient browsers, there's no reason you can't write QSA code. var nodes = document.querySelectorAll("li"); for(var i=0; i<nodes.length; i++) { nodes[i].classList.add("foo"); } Yes it's slightly more code. It's also going to run a hell of a lot faster on, eg, a mobile device.
- 52-6F-62 9y agoLol. You beat me to it. Kudos.
- megous 9y agoI prefer: for (let node of document.querySelectorAll("li")) node.classList.add('foo'); or: Array.from(document.querySelectorAll("li")).forEach(node => node.classList.add('foo')) And if any particular pattern repeats in the code I'm writing I'll just create a helper function for that pattern (most of the time locally). Like: let qsa => s => Array.from(document.querySelectorAll(s)); There's nothing to test about that.
- loganfsmyth 9y agoYou don't even need the `Array.from` anymore. `.forEach` on `NodeList` is standard https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach https://developer.mozilla.org/en-US/docs/Web/API/NodeList/fo..., so all you need to do is load a polyfill for that.
- Flenser 9y agoYou might want to do map or filter before you do forEach. In which case you would need to convert it to an array.
- deleted 9y ago[deleted]
- megous 9y agoOr use fetch()
- 52-6F-62 9y ago>>> My JS is a bit rusty, but I remember that in JQuery I could do: $("some selector").do_things() And "do_things" would be done on all matching elements. --- jQuery selectors were matched in native JS by `document.querySelector()` and `document.querySelectorAll()` Pretty sure `querySelectorAll()` operates quite the same as jQuery's selector which returns an array of element objects that you can perform actions upon. The primary difference being that you'll have to run the actions in a loop over the array if you want to perform them over the entire selection. Eg: let elements = document.querySelectorAll('li'); for(let i = 0; i < elements.length; i++) { elements[i].addEventListener('click', e => { console.log(`This element is ${elements[i]}`); }); } You could write a helper in a few lines to handle that throughout your codebase if it's commonly used.
- yunyu 9y agoYou can wrap that in Array.from() to take advantage of foreach, filter, etc..
- ccheney 9y agoThis is how i've been doing it: const elements = document.querySelectorAll('li'); [...elements].forEach((element) => element.addEventListener('click', this.onClickHandler));
- 52-6F-62 9y agoThis is a much more elegant solution. Thanks.
- loganfsmyth 9y agoIt's even easier now. `.forEach` on `NodeList` is standard https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach https://developer.mozilla.org/en-US/docs/Web/API/NodeList/fo..., so all you need to do is load a polyfill for that.
- shortstuffsushi 9y agoWhy do you need the [ ... elements ] -- can't you call foreach off elements directly? Is it not an array?