-
Notifications
You must be signed in to change notification settings - Fork 30
Open
Description
problem
When we read some code like this:
document.querySelectorAll("div.myClass")::find("p")::html("hahaha");
We will think the find
and html
is a identifier like something follow .
.
But it's actually an expression. So it must be some using case like this:
document.querySelectorAll("div.myClass")
::libA.find("p") // means `::(libA).find("p")` or `::libA).find("p")` or `::(libA.find)("p")` or `::(libA.find("p"))`?
::(condition?libB.html:libB.text)("hahaha"); // it's seems good, but looks like a function call.
That becomes confusing.
solution
So I think it's necessary to wrap it with something,
- not
[]
they are used to wrap identifier expression; - not
()
, they are used to wrap a normal expression and looks like a function call; {}
and<>
are okay, I prefer to use{}
.
The code becomes:
document.querySelectorAll("div.myClass")::{find}("p")::{html}("hahaha");
document.querySelectorAll("div.myClass")
::{libA.find}("p")
::{condition?libB.html:libB.text}("hahaha");
With a little price of two characters, it becomes more readable and extendable.
a step more
Once we avoid to use a identifier syntax as an expression. We can let it do the right thing, to act as a identifier, get method from prototype and bind to the object. Example:
const foo= document.getElementById( 'foo' );
// with identifier
const setAttributeToFoo= foo::setAttribute;
// with identifier expression
const removeAttributeFromFoo= foo::['removeAttribute'];
// with function expression
function addClass( className ){ this.classList.add( className ); }
const addClassToFoo= foo::{addClass};
There are a new problem with the left hand of assign expression. A TypeError will solve the problem.
foo::bar= 1; // Just throw a TypeError
Krinkle and ExE-Bosscharmander and ljharb
Metadata
Metadata
Assignees
Labels
No labels