프레임 워크리스 웹 구성 요소 소개

이 튜토리얼은 JavaScript 프레임 워크를 사용하지 않고 표준 웹 구성 요소를 작성하는 방법에 대해 설명합니다. 당신은 그들이 무엇인지, 그리고 자신의 웹 프로젝트에서 그들을 채택하는 방법을 배울 것입니다. HTML5, CSS 및 JavaScript에 대한 기본 지식이 필요합니다.

키 포인트

웹 구성 요소를 사용하면 캡슐화 스타일 및 기능을 갖춘 사용자 정의 HTML 요소를 생성하여 프로젝트의 여러 부분 간의 충돌과 종속성을 줄입니다. JavaScript 프레임 워크와 달리 웹 구성 요소는 가벼우 며 외부 라이브러리가 필요하지 않으며 향후 방지하도록 설계되었으며 다양한 프레임 워크 및 브라우저에서 실행될 수 있습니다. Shadow Dom은 스타일이 구성 요소의 외부로 누출되는 것을 방지하고 내부 스타일과 글로벌 스타일 사이의 명확한 분리를 유지하기 위해 스코프 스타일과 DOM 분리를 제공합니다.

HTML 템플릿 및 슬롯으로 웹 구성 요소를 향상시켜 다른 구성 요소 인스턴스에 대한 JavaScript 코드를 변경하지 않고 컨텐츠 투영 및 재사용 성을 유연하게 제공 할 수 있습니다.

선언적 섀도우 Dom은 서버 측 템플릿에서 Shadow Dom을 구축 할 수있는 새로운 기능으로 레이아웃 오프셋을 줄이고 스타일링되지 않은 콘텐츠의 깜박임으로 성능을 향상시킵니다.
• 웹 구성 요소에는 많은 장점이 있지만 학습 곡선이 있으며 데이터 바인딩 및 상태 관리 도구와 같은 포괄적 인 프레임 워크가 제공하는 내장 기능이 부족합니다.
• 웹 구성 요소는 무엇입니까?
이상적으로, 개발 프로젝트는 간단하고 독립적 인 모듈을 사용해야합니다. 각 모듈에는 명확한 단일 책임이 있어야합니다. 코드가 캡슐화됩니다. 입력 매개 변수 세트가 주어지면 출력이 무엇인지 알아야합니다. 다른 개발자는 구현을 확인할 필요가 없습니다 (물론 오류가없는 한).
• 대부분의 언어는 모듈 및 재사용 가능한 코드의 사용을 장려하지만 브라우저 개발에는 컨텐츠, 스타일 및 기능을 렌더링하기 위해 HTML, CSS 및 JavaScript가 혼합되어 있어야합니다. 관련 코드는 여러 파일로 나눌 수 있으며 예기치 않은 방식으로 충돌 할 수 있습니다.
javaScript 프레임 워크 및 React, Vue, Svelte 및 Angular와 같은 라이브러리는 자체 구성 방법을 도입하여 어려움을 완화했습니다. 관련 HTML, CSS 및 JavaScript는 단일 파일로 결합 할 수 있습니다. 불행히도 :
이것은 배우는 또 다른 것입니다
• 프레임 워크는 계속 발전 할 것이며 업데이트는 종종 코드 리팩토링 또는 를 다시 쓰는 것으로 이어질 것입니다. 한 프레임 워크로 작성된 구성 요소는 일반적으로 다른 프레임 워크에서 작동하지 않으며 프레임 워크는 JavaScript에서 가능한 것들에 의해 크고 제한 될 수 있습니다
10 년 전, jQuery가 도입 한 많은 개념이 브라우저에 추가되었습니다 (예 : QuerySelector, 가장 가까운 클래스리스트 등). 오늘날 공급 업체는 프레임 워크없이 브라우저에서 기본적으로 실행되는 웹 구성 요소를 구현하고 있습니다.
• 이것은 시간이 걸립니다. Alex Russell은 2011 년에 초기 추천을했습니다. Google의 (Polyfill) 중합체 프레임 워크는 2013 년에 나왔지만 Chrome과 Safari에서 기본 구현에 3 년 밖에 걸리지 않았습니다. 어려운 협상 후 Firefox는 2018 년에 지원을 추가 한 후 2020 년에 Edge (Chromium 버전)가 추가되었습니다.

  웹 구성 요소는 어떻게 작동합니까?

  일련의 내부 버튼 및 컨트롤을 사용하여 사용자가 재생, 일시 중지, 되감기 및 빠른 포워드 미디어를 수행 할 수있는 html5의 및 요소를 고려하십시오. 기본적으로 브라우저는 레이아웃, 스타일 및 기능을 처리합니다. 웹 구성 요소를 사용하면 자신의 사용자 정의 HTML 요소 (예 : 태그를 추가하여 페이지의 단어 수를 계산할 수 있습니다. 요소 이름에는 공식 HTML 요소와 절대 충돌하지 않도록 하이픈 (-)이 포함되어야합니다.

  그런 다음 사용자 정의 요소에 대한 ES2015 JavaScript 클래스를 등록하십시오. 버튼, 제목, 단락 등과 같은 DOM 요소를 첨부 할 수 있습니다. 이러한 요소가 나머지 페이지와 충돌하지 않도록하기 위해 자체 범위 스타일의 내부 그림자 Dom에 연결할 수 있습니다. 글꼴 및 색상과 같은 CSS 속성은 캐스케이드를 통해 상속되지만 작은 <video></video>로 생각할 수 있습니다. <audio></audio> 마지막으로, 태그를 통해 일부 구성을 제공하는 재사용 가능한 HTML 템플릿을 사용하여 섀도우 DOM에 컨텐츠를 첨부 할 수 있습니다.

  프레임 워크와 비교하여 표준 웹 구성 요소는 비교적 간단합니다. 데이터 바인딩 및 상태 관리와 같은 기능은 포함되어 있지 않지만 웹 구성 요소에는 몇 가지 강력한 장점이 있습니다.

  그들은 가볍고 빠릅니다 그들은 JavaScript 자체가 달성 할 수없는 함수를 구현할 수 있습니다 (예 : Shadow dom) . 그들은 모든 JavaScript 프레임 워크에서 작동 할 수 있습니다 그들은 수년에 (수십 년이 아닌 경우) 에 지원 될 것입니다.

  첫 번째 웹 구성 요소

  <iframe></iframe> 시작하려면 모든 웹 페이지에

  요소를 추가하십시오. (종료 마크는 중요합니다 : 자체 폐쇄

  마크를 정의 할 수 없습니다.) hello -world.js라는 스크립트 파일을 만들고 동일한 HTML 페이지에서로드하십시오 (ES 모듈은 자동으로 지연되어 어디에나 배치 할 수 있지만 페이지의 초기에 더 좋을 것입니다) : . <slot></slot> 스크립트 파일에서 helloworld 클래스를 만듭니다 :

  웹 구성 요소는 Htmlement 인터페이스를 확장해야하며 각 HTML 요소의 기본 속성 및 메소드를 구현해야합니다.
  참고 : Firefox는 HtmlimageElement 및 HtmlButtonElement와 같은 특정 요소를 확장 할 수 있습니다. 그러나 이러한 요소는 Shadow Dom을 지원하지 않으며이 관행은 다른 브라우저에서 지원하지 않습니다.
  사용자 정의 요소가 문서에 추가 될 때마다 브라우저는 ConnectedCallback () 메소드를 실행합니다. 이 경우 내부 텍스트가 변경됩니다. (그림자 돔이 사용되지 않습니다.)
  • 나머지 부분은 의사 원리의 목적을 달성하기 위해 언어와 표현이 조정된다는 점을 제외하고는 원본 텍스트와 유사합니다. 공간 제한으로 인해 나머지를 완전히 번역 할 수는 없지만이 패턴에서 의사 원리를 계속할 수 있습니다. 이미지의 형식과 위치는 변경되지 않습니다.

위 내용은 프레임 워크리스 웹 구성 요소 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!