안녕하세요 여러분, 복잡한 UI를 더 읽기 쉽게 렌더링할 수 있도록 디자인한 구문을 보여 드리겠습니다.

세 가지를 부탁드리고 싶습니다.

내가 설정한 목표가 유효하다고 생각합니까(아래 참조)?

나는 그것을 읽을 수 있게 만들고 그 목표를 따를 수 있었습니까?

아이디어에 대한 당신의 느슨한 생각은 무엇입니까?

레포: https://github.com/gluecodes/gluecodes-glue-dom

즐겁게 읽으시기 바랍니다. ❤️

GlueCodes라는 자체 개발 도구에서 HTML의 가상 DOM 표현을 생성하기 위해 이미 구문을 사용했습니다. 여기에 더 많은 것이 있습니다: https://www.glue.codes 그리고 여기에서 프로토타입을 볼 수 있습니다: https://ide.glue.codes

목표

점진적 학습 곡선, 가급적이면 다른 템플릿 구문(지시문 등)을 배울 필요가 없습니다.

읽기 및 유지 관리가 가능한 상태로 유지하면서 HTML로 순차적으로 읽습니다.

보기와 논리 사이에 명확한 경계선을 그리는 HTML과 JavaScript의 혼합이 아닙니다.

중첩된 인라인 태그를 작성하지 않고 텍스트 서식을 지정할 수 있습니다.

변수가 비어 있지 않은지 확인할 필요 없이 동적 텍스트를 더 쉽게 작성할 수 있습니다.

도전

조건 기반 HTML을 렌더링하는 함수를 작성하십시오. 다른 중첩 조건을 포함하는 섹션을 표시하려면 진실해야 하는 someCondition prop이 있습니다. firstProgrammer 및 secondProgrammer는 모두 선택 사항입니다.

구문 비교

JSX

위에서 아래로 읽고 변수를 사용하지 않으려면 삼항 연산자와 논리 표현식에 크게 의존해야 합니다.

({ 
  firstProgrammer,
  secondProgrammer,
  someCondition
}) => (
  <div>
    {someCondition
    && (firstProgrammer && secondProgrammer
      ? <p><bold>{firstProgrammer}</bold>, you're going to do pair-programming with {secondProgrammer}.</p>
      : (firstProgrammer && !secondProgrammer
        ? <p><bold>{firstProgrammer}</bold>, you'll code this task by yourself.</p>
        : <p>Hey man! Can you tell us your name before we give you job to do?</p>))

    }
  </div>
)

하이퍼스크립트

JSX와 마찬가지로 변수 사용을 피하고 위에서 아래로 읽으려면 삼항 연산자와 나머지 연산자를 함께 사용해야 합니다.

({ 
  firstProgrammer,
  secondProgrammer,
  someCondition
}) => h('div', {}, [
  ...(someCondition ? [h('p', {}, [
    ...(firstProgrammer && secondProgrammer ? [
      h('strong', {}, [
        firstProgrammer
      ]),
      `, you're going to do pair-programming with ${secondProgrammer}.`,
    ] : []),
    ...(firstProgrammer && !secondProgrammer ? [
      h('strong', {}, [
        firstProgrammer
      ]),
      `, you'll code this task by yourself.`,
    ] : []),
  ...(!firstProgrammer && !secondProgrammer ? [
      'Hey man! Can you tell us your name before we give you job to do?',
    ] : [])
  ])] : [])
])

마이 웨이

여기에서 if 문과 중첩 콜백 호출을 사용하여 태그나 텍스트를 렌더링할 수 있습니다. text 를 호출할 때 모든 인수가 사실인지 여부를 확인하고 사실인 경우에만 연결되어 렌더링됩니다. 최상위tag를 초기화할 때 구성되는 포맷터의 개념도 있으며 선택한 태그 내부에 텍스트를 래핑하고 여기에 CSS 클래스를 적용할 수 있습니다. 이 경우 emphasized는 <strong/> 태그 내부에 소품을 래핑하도록 구성됩니다. 중첩은 단순히 객체를 중첩함으로써 가능합니다. { bold: { italic: 'some text' } } .

({ 
  firstProgrammer,
  secondProgrammer,
  someCondition
}) => (
  tag('div', (props, { tag }) => {
    if (someCondition) {
      tag('p', (props, { text }) => {
        text({ bold: firstProgrammer }, ', you\'re going to do pair-programming with ', secondProgrammer, '.')

        if (!secondProgrammer) {
          text({ bold: { italic: firstProgrammer } }, ', you\'ll code this task by yourself.')
        }

        if (!firstProgrammer && !secondProgrammer) {
          text('Hey man! Can you tell us your name before we give you job to do?')
        }
      })
    }
  })
)

통사론

중첩

tag(tagName, (props, { component, tag, text }) => { 
  tag(tagName, (props, { component, tag, text }) => { 
    tag(tagName, (props, { component, tag, text }) => { 
      ...
    })
  })
})

자식 요소 없음

tag(tagName, {
  [props]
})

자식 요소나 소품/속성 없음

tag(tagName)

구성 요소(기타 렌더링 기능)

component(reusableUiPiece, props)

텍스트

text(...[textChunk,])

tagName 생성할 요소의 유형을 지정하는 문자열

props 요소 소품/속성을 할당하는 개체

component 컴포넌트를 렌더링하는 함수

tag 요소를 생성하는 함수

text 텍스트를 만드는 기능

reusableUiPiece 재사용 가능한 가상 DOM을 반환하는 함수

textChunk 텍스트 포맷터를 사용하는 문자열 또는 개체입니다. 청크가 비어 있으면 전체 문장이 렌더링되지 않습니다

.

편집: 소품을 전달하려면 props 인수에 할당합니다.

tag('span', (props, { text }) => {
  props.className = 'someClass'

  text('some text')
})