Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Page 3
document.addEventListener('DOMContentLoaded', function init() {
var testD = document.querySelector('#testDetails');
var summary = testD.querySelector('summary');
summary.addEventListener('click', function () {
var open = !testD.hasAttribute('open');
console.log(open);
}, false);
});
// Page 4
$(function () {
var testD = $('#testDetails');
var summary = $('summary', testD);
summary.on('click', function () {
var open = !testD.attr('open');
var loaded = testD.data('loaded');
var url;
if (open && !loaded) {
testD.data('loaded', true);
url = testD.data('details');
$.get(url).then(function (res) {
$(summary).after(res);
});
}
});
});
@simevidas
Copy link
Author

simevidas commented Sep 20, 2013

Improvements in Page 3 code:

  1. Variables "testD" and "init" no longer leak into the global namespace (guards against potential name collisions)
  2. The second querySelector call is no longer global (global queries take more time, so we minimize their use)

Improvements in Page 4 code:

  1. Again, removed global variables (I've used a data-loaded attribute instead of a dedicated variable.)
  2. $(fn) instead of the deprecated $(document).ready(fn)
  3. "var that = this" removed. Instead I access reference via a variable. (We're querying the

element anyways.)

@WebReflection
Copy link

WebReflection commented May 10, 2019

testing gist notifications, but everything is wrong in this 2013 gist anyway :D (take this with hirony)

  • tabs are disturbing
  • addEventListener('DOMContentLoaded', ...) works too, no need to use document
  • the global selector, since there is an ID involved, is a bit LOL, 'cause any ID is reflected in the window object, so that testDetails would be already available
  • jQuery is disturbing in 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment