Skip to content

Use a wrapper to indicate something follow :: is a expression but not an identifier  #55

@Fenzland

Description

@Fenzland

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions