이 블로그 시리즈의 목적은 Lit 라이브러리를 깊이 탐구하고 Lit 라이브러리의 고유한 기능과 시장의 다른 라이브러리 및 프레임워크와 차별화되는 방법을 포괄적으로 이해하는 것입니다.

이 시리즈는 1. lit-html 작동 방식 과 같은 주제를 다루는 세 부분으로 나뉩니다 .
2. Lit Element가 DOM에서 일괄 업데이트를 수행하는 방법은 무엇입니까?
3. 잠재적 사용 사례와 함께 Lit를 다른 프레임워크 및 라이브러리와 비교 및 ​​벤치마킹합니다.

이 특정 블로그에서는 lit-html과 그 내부 작업을 살펴보는 데 중점을 둘 것입니다. 하지만 lit-html을 자세히 살펴보기 전에 먼저 Lit 라이브러리 자체에 대한 개요를 살펴보겠습니다.

리트가 무엇인가요?

Lit는 약 5KB의 작은 공간을 차지하는 경량 웹 구성요소 라이브러리입니다.

웹 구성 요소 사양을 사용하여 UI 구성 요소를 효율적이고 신속하게 개발할 수 있도록 특별히 설계되었으며 DOM에 일괄 업데이트를 도입하여 성능을 더욱 향상시킵니다.

실제로, 공공 벤치마크에 따르면https://krausest.github.io/js-framework-benchmark/index.html, Lit Element는 React보다 빠른 성능을 보여주었습니다.

Lit Element에 대해 자세히 알아보려면 공식 웹사이트를 방문하세요.https://lit.dev/. 하지만 이 시리즈의 초점은 Lit 요소의 작동 방식과 구현 방식을 이해하는 것입니다.

Lit Element는 템플릿 생성에 사용되는 템플릿 라이브러리인 lit-html과 일괄 DOM 업데이트 로직을 기반으로 구축됩니다. Lit Element는 일괄 업데이트를 위한 추가 기능을 제공하여 lit-html을 확장합니다.

lit-html 템플릿 생성:

lit-html은 기본 JavaScript 기능 및 웹 구성 요소를 활용하여 JavaScript 태그 리터럴 및 태그 기능을 사용하여 템플릿을 생성할 수 있는 JavaScript 템플릿 라이브러리입니다.

JSX 또는 기타 템플릿 라이브러리와 달리 lit-html은 기본 JavaScript 기능을 직접 활용하므로 프레임워크별 템플릿 또는 구문을 브라우저 호환 템플릿 또는 구문으로 변환하기 위한 빌드 단계가 필요하지 않습니다.

lit-html 라이브러리를 사용하여 템플릿을 만들어 보겠습니다.

이 예에서는 lit-html 라이브러리에서 태그 기능인
1. 두 가지 기능을 가져옵니다. 2. 템플릿을 DOM에 렌더링하는 데 사용됩니다.html
render

myTemplate다음으로 인수를 취하는 함수를 정의합니다 name.

템플릿은 html백틱(``)으로 묶인 태그 기능을 사용하여 정의되며 HTML 스니펫을 포함합니다 <div>Hello, ${name}</div>.

는 ${name}함수에 전달된 인수에 따라 런타임 시 값으로 동적으로 대체될 수 있는 자리 표시자입니다 myTemplate.

태그 함수는 DOM에 렌더링할 수 있는 템플릿을 나타내는 개체를 html반환합니다 .TemplateResult

다음 섹션에서는 JavaScript 태그 기능과 html 태그 기능이 lit-html 라이브러리에서 구현되는 방법을 살펴보겠습니다.

render코드의 마지막 줄에서는 템플릿을 렌더링하는 메서드를 호출합니다 .
이 render메서드는 두 가지 인수를 허용합니다.
a) TemplateResult렌더링할 템플릿을 나타내는 객체.
b) 템플릿이 렌더링될 DOM 요소에 대한 참조.

JavaScript의 태그 기능:

참고: 이미 태그 기능에 익숙하다면 이 섹션을 건너뛸 수 있습니다.

JavaScript의 태그 함수는 백틱(``)으로 묶인 문자열인 템플릿 리터럴을 처리하는 데 사용할 수 있는 특수한 유형의 함수입니다.

태그 함수는 템플릿 리터럴이 평가되기 직전에 호출되며 템플릿 리터럴과 보간된 값을 별도의 인수로 받습니다.

예를 들어 다음 코드를 고려하십시오.

var name = "Whatfix";
function sayHello(literalString, ...values) {
    console.log(literalString); //Output: ['Hello, ', '', raw: Array(2)]
    console.log(values); //Output: ['Whatfix']
}
sayHello`Hello, ${name}`;

ㅏ. 템플릿 리터럴의 정적 부분 배열: literalString.
이 예에서 literalString매개변수 의 값은['Hello, ', '', raw: Array(2)]

비. 태그가 지정된 리터럴의 표현식 수에 해당하는 하나 이상의 인수: values. 이 예에서는 스프레드 연산자( ...)를 사용하여 배열로 나타냅니다. 그 값은 ['Whatfix']템플릿 리터럴에 사용된 표현식의 값을 포함하는 입니다.

html 방법에 대한 심층 분석:

html다음은 저장소 의 태그 기능 구현입니다 lit-html.https://github.com/lit/lit. (코드를 이해하기 쉽도록 불필요한 부분을 제거하여 코드를 약간 개선했습니다.)

const html =
  <T extends ResultType>(type: T) =>
  (strings: TemplateStringsArray, ...values: unknown[]): TemplateResult<T> => {
    return {
      ['_$litType$']: type,
      strings,
      values,
    };
  };

그런 다음 세 개의 매개변수를 사용하여 라는 객체를 형성 TemplateResult하고 반환합니다.

의 세 가지 매개변수에는 TemplateResult_$litType$, 문자열 및 값[]이 포함됩니다.

ㅏ. _$litType$ 매개변수는 유형을 포함합니다.
비. strings 매개변수는 리터럴의 정적 부분 배열을 보유합니다.
씨. values[] 매개변수는 리터럴의 동적 부분 값을 포함합니다.

이전 예제(템플릿 — A)에서 myTemplate("whatfix”)메서드는 다음을 반환합니다.

{
  _$litType$: 1,
  strings: ["<div>Hello, ", "</div>", raw: Array(2)],
  values: ["whatfix"]
}

렌더 방법에 대한 심층 분석:

lit-html의 render 메서드는 UI에서 구성 요소를 렌더링하는 역할을 합니다.
세 가지 인수를 허용합니다.

ㅏ. value — TemplateResult이전 섹션에서 설명한 대로 html 태그 함수에 의해 생성되는 A입니다.

비. 컨테이너 — 템플릿이 렌더링될 DOM 요소에 대한 참조입니다.

씨. options — 단순화를 위해 프로세스를 더 잘 이해하기 위해 이 인수를 무시할 수 있습니다.

순서도를 활용하여 예제에서 렌더링 방법의 작동을 시각적으로 이해할 수 있습니다.

다음으로 앞서 언급한 순서도를 사용하여 예제 구성 요소인 템플릿 A를 처리해 보겠습니다. 이전 섹션에서 설명한 것처럼 html 태그 기능을 사용하여 객체를 이미 생성했으므로 TemplateResult이제 렌더링 프로세스를 진행할 수 있습니다.

예제 구성 요소인 템플릿 A의 개체 TemplateResult는 다음 구조를 사용합니다.

후속 단계에는 개체 <template>에서 요소를 생성하는 작업이 포함됩니다 TemplateResult.
로 표시되는 동적 부분을 포함하는 예제 구성 요소 템플릿 A에서 {name}임의의 9자리 숫자를 생성하고 이를 대신 주석 노드로 추가합니다 {name}.
결과적으로 <template>요소는 다음과 같이 나타납니다.