6 ms·
When starting to learn/write JS, I found a few of these basic name-shortening functions from HN's own JS very useful, and well-named: function $(id) { retu
by yesenadam 6y ago
When starting to learn/write JS, I found a few of these basic name-shortening functions from HN's own JS very useful, and well-named:
function $(id) { return document.getElementById(id); }
function byClass (el, cl) { return el ? el.getElementsByClassName(cl) : [] }
function byTag (el, tg) { return el ? el.getElementsByTagName(tg) : [] }
function allof (cl) { return byClass(document, cl) }
function hasClass (el, cl) { var a = el.className.split(' '); return afind(cl, a) }
function addClass (el, cl) { if (el) { var a = el.className.split(' '); if (!afind(cl, a)) { a.unshift(cl); el.className = a.join(' ')}} }
function remClass (el, cl) { if (el) { var a = el.className.split(' '); arem(a, cl); el.className = a.join(' ') } }
function html (el) { return el ? el.innerHTML : null; }
function attr (el, name) { return el.getAttribute(name) }
function tonum (x) { var n = parseFloat(x); return isNaN(n) ? null : n }
function remEl (el) { el.parentNode.removeChild(el) }
function posf (f, a) { for (var i=0; i < a.length; i++) { if (f(a[i])) return i; } return -1; }
function apos (x, a) { return (typeof x == 'function') ? posf(x,a) : Array.prototype.indexOf.call(a,x) }
function afind (x, a) { var i = apos(x, a); return (i >= 0) ? a[i] : null; }
function acut (a, m, n) { return Array.prototype.slice.call(a, m, n) }
function aeach (fn, a) { return Array.prototype.forEach.call(a, fn) }
function arem (a, x) { var i = apos(x, a); if (i >= 0) { a.splice(i, 1); } return a; }
function alast (a) { return a[a.length - 1] }
function vis(el, on) { if (el) { (on ? remClass : addClass)(el, 'nosee') } }
function noshow (el) { addClass(el, 'noshow') }
function elShow (el) { remClass(el, 'noshow') }
function ind (el) { return (byTag(el, 'img')[0] || {}).width }
https://news.ycombinator.com/hn.js https://news.ycombinator.com/hn.js
- ehnto 6y agoThe class related functions have been made native by the classList property of elements. element.classList.has('someClass') //true if present element.classList.add('someClass') //add to element element.classList.remove('someClass') //remove from element element.classList.toggle('someClass') //remove if present, add if not present I would also argue element.querySelector and element.querySelectorAll are plenty shorthand to replace the selector helpers! Not saying HN should rewrite their JS obviously, just for anyone reading this and wondering if there are native equivalents.
- yesenadam 6y agoThanks you! I was hoping someone would spell out the "changes from the last 5 years" mentioned elsewhere.
- rasz 6y agoquerySelectorAll is a lot slower than old school functions. You would be tempted to say who cares, but then you load Gmail and wait 2 seconds for UI to render.
- kevincox 6y agoDo you have any references for this? I would be flabbergasted if the simple case of #id and .class weren't optimized to be basically identical. (the only difference being that they had to do a quick "parse" before jumping into the optimized path)
- rasz 6y agohttps://jsperf.com/getelementbyid-vs-queryselector/25 https://jsperf.com/getelementbyid-vs-queryselector/25 tldr just looking for class x10 slower.
- kevincox 6y agoTrying that on Firefox mobile and they are all within 5%. The direct calls are faster but that could conceivably be the time to check for special cases with a DOM that small.
- albedoa 6y agohttps://www.sitepoint.com/optimizing-css-id-selectors-and-other-myths/ https://www.sitepoint.com/optimizing-css-id-selectors-and-ot... The slowest and most convoluted selector took 21ms when tested against 50,000 elements using a 2014 MacBook Pro.
- rasz 6y ago
- theandrewbailey 6y agoYou might be interested in bling.js: https://gist.github.com/paulirish/12fb951a8b893a454b32 https://gist.github.com/paulirish/12fb951a8b893a454b32 I was similarly inspired: if (undefined === window.$) { window.$ = document.querySelectorAll.bind(document); [EventTarget.prototype, window, XMLHttpRequest.prototype].forEach(function setOnOff(p) { Object.defineProperty(p, "on", { get() { return function onElement(t, f) { this.addEventListener(t, f); return this; }; } }) Object.defineProperty(p, "off", { get() { return function offElement(t, f) { this.removeEventListener(t, f); return this; }; } }); }); [NodeList.prototype, HTMLCollection.prototype].forEach(function setOnArray(p) { Object.setPrototypeOf(p, Array.prototype); Object.defineProperty(p, "on", { get() { return function onArray(t, f) { this.forEach(function onEach(e) { e.addEventListener(t, f); }); return this; }; } }); Object.defineProperty(p, "off", { get() { return function offArray(t, f) { this.forEach(function offEach(e) { e.removeEventListener(t, f); }); return this; }; } }); }); }
- elwell 6y ago> well-named They look useful to me, but I personally think they aren't so well-named; excessively concise for my taste.
- yesenadam 6y agoFair enough. Your comment (which I upvoted) reminded me of this, from Emerson's journals: Wm Little came to church & heard my sermon against minding trifles. He told me, had he preached he should have taken the other side. Probably not one hearer besides thought so far on the subject.
- nilsandrey 6y agoYes, it's nice. I saved for myself at: https://gist.github.com/nilsandrey/c1f66819de40b26eed4bf71ac5461835 https://gist.github.com/nilsandrey/c1f66819de40b26eed4bf71ac...