Skip to content

Instantly share code, notes, and snippets.

@simevidas

simevidas/gist:6640655

Created September 20, 2013 17:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save simevidas/6640655 to your computer and use it in GitHub Desktop.
Save simevidas/6640655 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.js
// 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