JavaScript의 Cascade-esq 표기법?

조금 전에 나는 Dart's Language Tour을 살펴보고 그들이 얻은 멋진 표기법을 발견했습니다. 그들은 그것을 Cascade Notation라고 부릅니다.

다음은 둘러보기의 코드 예입니다.

querySelector('#confirm') // Get an object.
  ..text = 'Confirm' // Use its members.
  ..classes.add('important')
  ..onClick.listen((e) => window.alert('Confirmed!'));

번역:

var button = querySelector('#confirm');
button.text = 'Confirm';
button.classes.add('important');
button.onClick.listen((e) => window.alert('Confirmed!'));

자, 예쁘지 않나요? 😆

Dart의 구문에 대한 JavaScript의 영향은 매우 분명합니다. 마치 Dart가 전체에 누텔라가 묻은 Javascript인 것처럼 보입니다.
따라서 Dart에는 JavaScript에 비해 침을 흘리게 만드는 몇 가지 기능이 있습니다! 🤤

내 문제

JavaScript에서 프로그래밍 방식으로 요소를 빌드하고 일부parent 요소에 채우는 것은 매우 일반적입니다. 이렇게:

let anchor = document.createElement('a');
anchor.href = data.link;
anchor.innerText = data.caption
anchor.classList.add(data.type)
parent.appendChild(anchor)

anchor.someProp 를 입력해야 하는 것은 항상 저를 괴롭혔습니다. 나는 우리에게 그런 것이 있었으면 좋겠지만 Cascade Notation, 슬프게도 우리는 그렇지 않습니다. 그리고 그게 내 문제야.

내 솔루션 - 모두 사슬로 묶으세요!

나는 단순히 연결하는 클래스를 만들고 요소를 반환하는 .build() 메서드를 가질 것입니다. 다음과 같은 것:

parent.appendChild(
  new Link()            // Returns a chainable builder
    .to(data.link)
    .text(data.caption)
    .type(data.type)
    .build()            // Finally, returns anchor element
)

이제 어떻게 구현할까요?

Chainable objects은 수년 동안 주변에 있었고 꽤 잘 알려져 있습니다. 그리고 여기 내가 그것들을 구성하는 방법이 있습니다.

먼저 도움이 되는 카레 기능(check Currying )을 만듭니다.

let chainer = (ctx) => (mutator) => (...args) => {
  mutator.apply(ctx, args)
  return ctx
}

여기,

ctx는

에 연결된 개체입니다.

mutator는 ctx

를 실제로 변경하는데 사용하는 함수입니다.

...args는 mutator

에 제공된 인수입니다.

그런 다음 빌더를 만듭니다.

let Link = function () {
  let linker = chainer(this)

  let config = {
    to: "",
    text: "",
    type: "",
  }

  this.config = config
  this.to = linker((link) => {
    config.to = link
  })
  this.text = linker((text) => {
    config.text = text
  })
  this.type = linker((type) => {
    config.type = type
  })

  this.build = () => {
    let a = document.createElement("a")
    a.href = config.to
    a.innerText = config.text
    !!config.type && a.classList.add(config.type)
    return a
  }
}

짜잔! 끝났어요 (︶^︶)

용법

말 그대로 누텔라를 바르는 것처럼 어디서나 사용할 수 있습니다. 😋

document.body.appendChild(
  new Link()
    .to("http://localhost")
    .text("home sweet home")
    .build()
)

시도하시겠습니까?

미주

야 독자! 이것은 JavaScript를 사용하여 계단식 구문을 재현하려는 나의 방법이었습니다. 더 나은 방법이 있다면... 모두와 공유하십시오!

건배~