3 ms·
My opinion of the code is this. It's pretty tight, which I can respect. I haven't run it, but it PROBABLY works. But it's hard to read. Things are n
by halis 8y ago
My opinion of the code is this.
It's pretty tight, which I can respect.
I haven't run it, but it PROBABLY works.
But it's hard to read.
Things are named poorly.
Many edge cases are missed (not checking args properly).
These functions are not pure and therefore, harder to test.
Maybe true 1337 H@X0Rz don't need to write tests, but some of us have mortgages to pay...
I didn't re-write all of this mess, but check out the few util functions that I re-wrote.
As a developer, which version would you rather work with?
If you said the original version that's cool with me.
But don't try to come work on my team.
// isNull :: a -> Boolean
const isNull = x => x == null
// isNullOrEmpty :: String -> Boolean
const isNullOrEmpty = string => string == null || !string.length
// $ :: String -> HTMLDocument -> HTMLElement
const $ = (id, _document = document) => {
if (isNullOrEmpty(id)) return null
if (isNull(_document)) return null
return _document.getElementById(id) || null
}
// findClassInElement :: HTMLElement -> String -> [HTMLElement]
const findClassInElement = (el, className) => {
if (isNull(el)) return []
if (isNullOrEmpty(tagName)) return []
return el.getElementsByClassName(className) || []
}
// findTagInElement :: HTMLElement -> String -> [HTMLElement]
const findTagInElement = (el, tagName) => {
if (isNull(el)) return []
if (isNullOrEmpty(tagName)) return []
return el.getElementsByTagName(tagName) || []
}
// findClass :: String -> HTMLDocument -> [HTMLElement]
const findClass = (className, _document = document) => {
if (isNullOrEmpty(className)) return []
if (isNull(_document)) return []
return findClassInElement(_document, className) || []
}
// elementHasClass :: HTMLElement -> String -> Boolean
const elementHasClass = (el, className) => {
if (isNull(el)) return false
if (isNullOrEmpty(className)) return false
return el.className.includes(className)
}
// addClass :: HTMLElement -> String -> Boolean
const addClass = (el, className) => {
if (isNull(el) || isNull(el.className)) return false
if (isNullOrEmpty(className)) return false
if (el.className.includes(className)) return true
el.className = `${el.className} ${className}`
return true
}
- aprdm 8y agoI prefer the original one. I don't see the value, for this use case, of all those checks. We know what the input values are, essentially what's in the DOM that we 100% control. I feel ES6 syntax much less readable than ES5 (probably because I have worked more in ES5 than ES6), it introduces a bunch of new symbols. How can this const isNull = x => x == null Be more readable than function isNull (x) { return x == null} Another example, const addClass = (el, className) => { } I always have to remember what this construct means and translate / unroll it in my mind to a regular function. Also, why would an addClass return a boolean? Doesn't make much sense. // $ :: String -> HTMLDocument -> HTMLElement const $ = (id, _document = document) => { if (isNullOrEmpty(id)) return null if (isNull(_document)) return null return _document.getElementById(id) || null } How can above be more readable than function $(id) { return document.getElementById(id); } I bet I can give the original code for Python/C/Java developers and they would understand / change it easily. That said, I consider myself a backend / devops person who sometimes needs to do work in the frontend, the biggest project I did was a medium size app with around 40 routes that I used react, es5 and bootstrap. Big fan of Go and it's very readable / limited syntax.