Vanilla JavaScript를 사용하여 웹 구성 요소 구성

2015년에 저는 제 첫 번째 전면 프레임인 AngularJS를 배우고 있습니다.내 생각은 사용자 정의 기능으로 HTML 태그를 구축하고 있다는 것이다.물론 사실은 그렇지 않지만 학습 곡선을 낮추는 데 도움이 된다.
이제 웹 구성 요소를 사용하여 HTML 태그를 만들 수 있습니다!그것들은 여전히 실험적인 기능이다. 크롬과 Opera에서 일하고FireFox에서 사용할 수 있지만, Safari와 Edge에서는 아직 실현되지 않았다.완전히 출시되면 라이브러리나 프레임워크가 필요 없는 일반적인 자바스크립트로 재사용 가능한 구성 요소를 구축할 수 있는 더 좋은 도구가 될 것입니다.

학습 과정

Vanilla JS로 작성된 웹 구성 요소에 대한 기사와 예를 찾기가 매우 어렵습니다.Polymer에 대한 예와 글이 많이 있습니다. 이것은 웹 구성 요소를 작성하는 데 사용되는 프레임워크입니다. 이 프레임워크는 PolyFill을 포함하여 웹 구성 요소를 지원하지 않는 브라우저에 적용됩니다.이 프레임워크는 듣기에 매우 좋아서, 나는 장래에 그것을 사용하려고 시도할 수도 있지만, 나는 단지 이 특정한 항목에서 일반적인 자바스크립트를 사용하고 싶다.
마지막으로 저는 프로젝트를 구축하기 위해 그림자DOM의 MDN 문서를 사용했습니다.나는 또한 CodePen과 WebComponents 사이트를 방문했다. 비록 나는 이 두 사이트에서 내가 구축하고 싶은 것과 비슷한 내용을 많이 찾지 못했지만.
나도 좋아!이것은 웹 구성 요소를 사용하는 장점을 포함한다. 모든 프레임워크에 적용되고, 일반적인 자바스크립트만 사용하기 때문에 쉽게 실현하고 이해할 수 있다.

최종 항목

나의 많은 프로젝트에서 나는 유사한 디자인 방안을 사용하여 개인 브랜드 홍보와 제작을 한다. 그러면 나는 새로운 디자인을 제기할 필요가 없다!특히 나는 제목을 사용했는데 자모마다 다른 색깔이고 그 위에 내려간 애니메이션이 있다.제 개인 사이트 alispit.tel이 좋은 예입니다!제 이력서, 회의 슬라이드에도 이 글이 있는데 조만간 다른 사이트에 사용할 계획입니다!단점 중 하나는 CSS에서 첫 번째 문자를 제외한 단일 문자를 허용하지 않는다는 것입니다.따라서 편지 한 통은 반드시 span으로 포장해야 한다.쓰기에는 매우 고통스럽기 때문에 나는 이것이 네트워크 구성 요소를 사용하는 완벽한 곳이라고 생각한다.

웹 구성 요소를 작성하는 사람에 대한 글을 찾기 어려우므로 코드를 깊이 있게 소개하겠습니다.
먼저 웹 구성 요소를 다음과 같이 HTML 코드로 표시합니다.

  <rainbow-text text="hello world" font-size="100"></rainbow-text>

웹 구성 요소의 이름은 rainbow-text으로 두 가지 속성이 있습니다. 텍스트 (구성 요소가 나타내는 내용) 와 글꼴 크기입니다.slots과 templates을 사용하여 내용을 삽입할 수 있습니다.그러나 내 용례에서 그것들은 추가 비용을 증가시킬 것이다.텍스트를 입력한 다음 일련의 HTML 요소를 출력하고 싶습니다. 그 중에서 텍스트는 문자로 구분되기 때문에 가장 간단한 방법은 속성을 통해 텍스트를 전송하는 것입니다. 특히 음영DOM을 사용합니다.
그럼, 그림자 DOM은 무엇입니까?그것은 사실상 새것도 아니고 웹 구성 요소에 특정된 것도 아니다.그림자 DOM은 DOM 요소 서브트리를 도입하여 자신의 역할 영역을 가집니다.하위 요소를 숨길 수도 있습니다.예를 들어 video 요소는 실제로 HTML 요소의 집합이다.그러나 우리가 그것을 만들고 검사할 때, 우리는 video 표시만 볼 수 있습니다!나에게 있어서 음영DOM의 가장 멋있는 부분은 그의 스타일이 범위가 있다는 것이다!예를 들어, 문서에 div 스타일을 모두 수정하면 섀도우 DOM의 요소에 영향을 주지 않습니다.반대로 그림자 DOM의 스타일은 외부 문서 DOM의 요소에 영향을 주지 않습니다.이것은 내가 가장 좋아하는 Vue 기능 중의 하나이기 때문에 나는 매우 흥분한다. 왜냐하면 나는 틀이 없는 상황에서 유사한 기능을 실현할 수 있기 때문이다!
이제 사용자 정의 요소를 구현하는 JavaScript 코드에 대해 살펴보겠습니다.먼저 확장 기능이 내장된 HTMLElement 클래스의 JavaScript 클래스를 작성합니다.ES6 클래스를 사용했지만 필요한 경우 JavaScript의 이전 OOP 구문을 사용할 수도 있습니다.나는 정말 ES6 과정을 사용하는 것을 좋아한다. 특히 나는 이미 그들에게 익숙해졌기 때문이다.문법은 사람들로 하여금 익숙하고 간단하게 느끼게 한다.
내가 하는 첫 번째 일은 connectedCallback의 생명주기 방법을 작성하는 것이다.렌더링 요소는 React의 componentDidMount과 유사하게 자동으로 호출됩니다.다른 ES6 클래스와 유사한 constructor을 사용할 수도 있습니다.그러나 기본값이나 아무것도 설정하지 않았기 때문에, 나는 그것을 정말 필요로 하지 않는다.connectedCallback 내부에서 저는 먼저 this.createShadowRoot()을 호출하여 원소의 그림자DOM을 실례화했습니다.현재 rainbow-text 요소는 자신의 그림자 DOM의 뿌리이기 때문에 하위 요소는 숨겨지고 자신의 스타일과 외부 자바스크립트 변화 범위가 있습니다.그런 다음 가져온 HTML 속성에 따라 클래스에서 속성을 설정합니다.클래스에서 당신은 this이 rainbow-text원소를 가리킨다고 생각할 수 있습니다.document.querySelector('rainbow-text').getAttribute('text')을 실행하지 않고 this.getAttribute('text')을 실행하면 원소에서 text 속성을 얻을 수 있습니다.

class RainbowText extends HTMLElement {
  connectedCallback () {
    this.createShadowRoot()
    this.text = this.getAttribute('text')
    this.size = this.getAttribute('font-size')
    this.render()
  }

render은 내가 쓴 방법으로 connectedCallback에서 호출되었다.만약 disconnectedCallback과 attributeChangedCallback의 생명주기 방법이 당신의 코드에 도움이 된다면 당신도 그것들을 사용할 수 있습니다!내가 그것을 분리한 것은 Sandi Metz의 규칙을 준수하기 위해서이다. 나는 이 규칙들을 매우 경건하게 준수한다.이런 방법은 일반 DOM 작업과 다른 점은 내가 만든 원소를 shadowRoot이 아니라 document에 부가하거나 원소에 직접 부가하는 것이다!이것은 문서의 루트 DOM 대신 그림자 DOM에 요소를 첨부하는 것입니다.

  render () {
    const div = document.createElement('div')
    div.classList.add('header')
    this.shadowRoot.appendChild(div)
    this.addSpans(div)
    this.addStyle()
  }

그런 다음 각 문자의 개별 간격을 DOM에 추가합니다. 이것은 일반 JavaScript 코드와 거의 같습니다.

  addSpanEventListeners (span) {
    span.addEventListener('mouseover', () => { span.classList.add('hovered') })
    span.addEventListener('animationend', () => { span.classList.remove('hovered') })
  }

  createSpan (letter) {
    const span = document.createElement('span')
    span.classList.add('letter')
    span.innerHTML = letter
    this.addSpanEventListeners(span)
    return span
  }

  addSpans (div) {
    [...this.text].forEach(letter => {
      let span = this.createSpan(letter)
      div.appendChild(span)
    })
  }

마지막으로 섀도우 DOM에 스타일을 추가합니다.

  addStyle () {
    const styleTag = document.createElement('style')
    styleTag.textContent = getStyle(this.size)
    this.shadowRoot.appendChild(styleTag)
  }

이 방법은 섀도우 DOM에 style 태그를 추가하여 요소를 수정합니다.함수를 사용하여 모든 CSS를 포함하는 템플릿 텍스트에 머리글꼴 크기를 삽입합니다.
구성 요소를 작성한 후 새 요소를 등록해야 합니다.

try {
  customElements.define('rainbow-text', RainbowText)
} catch (err) {
  const h3 = document.createElement('h3')
  h3.innerHTML = "This site uses webcomponents which don't work in all browsers! Try this site in a browser that supports them!"
  document.body.appendChild(h3)
}

나는 또한 비네트워크 구성 요소 친선 브라우저의 사용자를 위해 경고를 추가했다.
다음은 이 요소가 최종적으로 콘솔에 나타나는 방법입니다.

다음 단계

나는 네트워크 구성 요소를 사용하는 것을 좋아한다.프레임워크가 없는 상황에서 다시 사용할 수 있는 구성 요소를 만들 수 있다는 생각은 매우 좋다.나는 이 다채로운 이름을 자주 사용하기 때문에, 내가 세운 이 이름은 나에게 정말 도움이 된다.나는 다른 문서에 script을 포함할 것이다.그러나, 나는 크로스 브라우저가 이 구성 요소를 지원하기를 원하기 때문에, 나의 개인 사이트를 이 구성 요소로 바꾸지 않을 것이다.웹 구성 요소의 목표를 고려하면 명확한 상태나 데이터 관리 시스템이 없다.그러나 다른 전단 프레임워크는 여전히 필요하다.이러한 이유로 나는 전단 프레임을 계속 사용할 것이라고 생각한다.그러나 일단 그것들이 충분한 지지를 받게 되면 그것들의 사용은 매우 좋을 것이다!
Full Code
Example Use-(네트워크 구성 요소 사용 안 함)
내 On Learning New Things 시리즈의 일부