Skip to content

Instantly share code, notes, and snippets.

@simevidas
Created September 20, 2013 17:08
Show Gist options
  • Save simevidas/6640655 to your computer and use it in GitHub Desktop.
Save simevidas/6640655 to your computer and use it in GitHub Desktop.
// 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

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

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