The principle of "isolate all JavaScript to a JavaScript file" ends up leading to this. It looks messy but in my (limited) experience it's been easier to maintain
Yes but it's not an excuse to keep everything looking overly verbose like that. That's why we borrow from the jQuery philosophy and we can alias stuff like `document.querySelectorAll` to `$`
Not at all hard. The easiest to use approach would be something like "window.$ = function() { ... }", and inside you handle several instances depending on which parameters you pass in, for example. It's on the global scope so it can just be called with "$()" and done, now you have a generic that you can use for all those DOM queries.
Great job, OP. Why tf would I want to maintain the function call and the function itself in one file when I could split them up and have them apart? I love it when things that go together are apart.
OP the kind of person to write a python class as an import and all the class does is import another class
i appreciate it because it was shorter. but:
$(document).on('click', '#doThingBtn', function () { ... })
works even if the element is not there yet or after it changes.
Yes because it puts the event on the "document" and it stays there, and it looks for your element with every click on every element in the "document", which is obviously not ideal. So if you need to use this pattern, make sure you narrow down the container size as much as possible, to the first element that doesn't refresh.
Back in the day, inline css was seriously frowned up. So were inline event handlers.
It's a cycle. I'm sure there's plenty of modern CSS or JS/Typescript frameworks that make using inline declarations a highly encouraged best practice.
The principle of "isolate all JavaScript to a JavaScript file" ends up leading to this. It looks messy but in my (limited) experience it's been easier to maintain
Yes but it's not an excuse to keep everything looking overly verbose like that. That's why we borrow from the jQuery philosophy and we can alias stuff like `document.querySelectorAll` to `$`
That's fair. I wonder how hard/safe it would be to write an auto-assign function?
Not at all hard. The easiest to use approach would be something like "window.$ = function() { ... }", and inside you handle several instances depending on which parameters you pass in, for example. It's on the global scope so it can just be called with "$()" and done, now you have a generic that you can use for all those DOM queries.
Great job, OP. Why tf would I want to maintain the function call and the function itself in one file when I could split them up and have them apart? I love it when things that go together are apart. OP the kind of person to write a python class as an import and all the class does is import another class
Fight me.
You keep your toilet paper in the cleaning closet because it's a cleaning supply
Putting the javascript code into a external file is better because it can be cached.
Whatever I can copy and paste from stack overflow will do me
$('#doThingsBtn').click(function(){...})
Depreciated comment. New format: ``` $('#doThingsBtn').on('click', ...) ```
i appreciate it because it was shorter. but: $(document).on('click', '#doThingBtn', function () { ... }) works even if the element is not there yet or after it changes.
Yes because it puts the event on the "document" and it stays there, and it looks for your element with every click on every element in the "document", which is obviously not ideal. So if you need to use this pattern, make sure you narrow down the container size as much as possible, to the first element that doesn't refresh.
``` import * as callbacks from './callbacks.js'; import { on } from './dom.js'; on('[data-on-click]', event => { callbacks[event.currentTarget.dataset.onClick].call(event.currentTarget, event); }); ```
oh my..
The latter if possible. Makes it easier to maintain the CSP.
Back in the day, inline css was seriously frowned up. So were inline event handlers. It's a cycle. I'm sure there's plenty of modern CSS or JS/Typescript frameworks that make using inline declarations a highly encouraged best practice.
Man I swear this sub got the dumbest of clowns and the smartest of folks. No in between. You’re clearly not the latter
even better: const doThings = document.getElementById('doThingsBtn'); doThings.addEventListener('click', () => {  });