จุดประสงค์ของซีรีส์บล็อกนี้คือการเจาะลึกเข้าไปในไลบรารี Lit และทำความเข้าใจอย่างครอบคลุมเกี่ยวกับคุณลักษณะเฉพาะของมัน และวิธีการที่ทำให้ตัวมันแตกต่างจากไลบรารีและเฟรมเวิร์กอื่นๆ ในตลาด

ซีรีส์นี้แบ่งออกเป็น 3 ส่วน โดยครอบคลุมหัวข้อต่างๆ เช่น
1. How lit-html works?
2. Lit Element ทำการอัปเดตเป็นชุดบน DOM อย่างไร
3. การเปรียบเทียบและการทำเครื่องหมายมาตรฐานของ Lit กับเฟรมเวิร์กและไลบรารีอื่น ๆ พร้อมกับกรณีการใช้งานที่เป็นไปได้

ในบล็อกนี้โดยเฉพาะ เราจะมุ่งเน้นไปที่การสำรวจ lit-html และการทำงานภายใน แต่ก่อนที่จะเจาะลึกไปที่ lit-html เรามาดูภาพรวมของไลบรารี Lit กันก่อน

Lit คืออะไร?

Lit เป็นไลบรารีองค์ประกอบเว็บขนาดเล็กที่มีขนาดเล็กประมาณ 5KB

ได้รับการออกแบบมาโดยเฉพาะสำหรับการพัฒนาคอมโพเนนต์ UI อย่างมีประสิทธิภาพและรวดเร็วโดยใช้ข้อมูลจำเพาะของคอมโพเนนต์เว็บ และปรับปรุงประสิทธิภาพให้ดียิ่งขึ้นโดยแนะนำการอัปเดตแบบกลุ่มให้กับ DOM

ตามเกณฑ์มาตรฐานสาธารณะที่จัดทำโดยhttps://krausest.github.io/js-framework-benchmark/index.html, Lit Element ได้แสดงให้เห็นประสิทธิภาพที่เร็วกว่าเมื่อเทียบกับ React

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Lit Element คุณสามารถเยี่ยมชมเว็บไซต์อย่างเป็นทางการได้ที่https://lit.dev/. อย่างไรก็ตาม จุดเน้นของซีรี่ส์นี้คือการทำความเข้าใจว่า Lit Element ทำงานอย่างไรและใช้งานอย่างไร

องค์ประกอบ Lit สร้างขึ้นบน lit-html ซึ่งเป็นไลบรารีเทมเพลตที่ใช้สำหรับสร้างเทมเพลต และลอจิกการอัปเดต DOM แบบกลุ่ม Lit Element ขยาย lit-html โดยให้ฟังก์ชันเพิ่มเติมสำหรับการอัปเดตเป็นชุด

การสร้างเทมเพลต lit-html:

lit-html เป็นไลบรารีเทมเพลต JavaScript ที่เปิดใช้งานการสร้างเทมเพลตโดยใช้ตัวอักษรและแท็กแท็ก JavaScript โดยใช้ประโยชน์จากคุณสมบัติดั้งเดิมของ JavaScript และส่วนประกอบของเว็บ

ไม่เหมือนกับ JSX หรือไลบรารีเทมเพลตอื่น ๆ lit-html ไม่ต้องการขั้นตอนการสร้างเพื่อแปลงเทมเพลตหรือไวยากรณ์เฉพาะเฟรมเวิร์กให้เป็นเทมเพลตหรือไวยากรณ์ที่เข้ากันได้กับเบราว์เซอร์ เนื่องจากใช้ฟีเจอร์ดั้งเดิมของ JavaScript โดยตรง

มาสร้างเทมเพลตโดยใช้ไลบรารี lit-html:

ในตัวอย่างนี้ เรานำเข้าสองฟังก์ชันจากไลบรารี lit-html:
1. htmlซึ่งเป็นฟังก์ชันแท็ก
2. renderซึ่งใช้เพื่อแสดงเทมเพลตไปยัง DOM

ต่อไป เรากำหนดฟังก์ชันที่เรียกว่าซึ่งmyTemplateใช้อาร์กิวเมนต์name

เทมเพลตถูกกำหนดโดยใช้ ฟังก์ชันแท็ กhtmlอยู่ในเครื่องหมายขีดด้านหลัง (``) และมีข้อมูลโค้ด HTML เป็น ตัวยึดที่สามารถแทนที่แบบไดนามิกด้วยค่า ที่รันไทม์ตามอาร์กิวเมนต์ที่ส่งไปยังฟังก์ชัน<div>Hello, ${name}</div>

${name}myTemplate

ฟังก์ชันhtmlแท็กส่งคืนTemplateResultวัตถุ ซึ่งแสดงถึงเทมเพลตที่สามารถแสดงผลไปยัง DOM

ในส่วนถัดไป เราจะสำรวจฟังก์ชันแท็ก 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 เก็บอาร์เรย์ของส่วนสแตติกของตัวอักษร
ค. พารามิเตอร์ค่า [] ประกอบด้วยค่าของส่วนไดนามิกของตัวอักษร

ในตัวอย่างก่อนหน้าของเรา (เทมเพลต — A) myTemplate("whatfix”)เมธอดจะคืนค่า:

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

เจาะลึกวิธีการเรนเดอร์:

วิธีการเรนเดอร์ใน lit-html มีหน้าที่แสดงผลส่วนประกอบใน UI
ยอมรับข้อโต้แย้งสามข้อ:

ก. ค่า — A TemplateResultที่สร้างขึ้นโดยฟังก์ชันแท็ก html ตามที่กล่าวไว้ในส่วนก่อนหน้า

ข. คอนเทนเนอร์ — การอ้างอิงถึงองค์ประกอบ DOM ที่เทมเพลตจะแสดงผล

ค. ตัวเลือก — เพื่อจุดประสงค์ในการทำให้เข้าใจง่าย สามารถละเว้นอาร์กิวเมนต์นี้เพื่อให้เข้าใจกระบวนการได้ดีขึ้น

เราสามารถเข้าใจการทำงานของวิธีการเรนเดอร์ด้วยภาพในตัวอย่างของเราได้โดยใช้ผังงาน

ต่อไป เรามาประมวลผลองค์ประกอบตัวอย่างของเรา เทมเพลต A โดยใช้ผังงานดังกล่าวข้างต้น เนื่องจากเราได้สร้างTemplateResultวัตถุโดยใช้ฟังก์ชันแท็ก html ดังที่กล่าวไว้ในหัวข้อที่แล้ว เราจึงดำเนินการขั้นตอนการเรนเดอร์ต่อไปได้

วัตถุTemplateResultสำหรับส่วนประกอบตัวอย่างของเรา เทมเพลต A จะมีโครงสร้างดังต่อไปนี้:

ขั้นตอนต่อมาเกี่ยวข้องกับการสร้าง<template>องค์ประกอบจากTemplateResultวัตถุ
ในองค์ประกอบตัวอย่างของเรา เทมเพลต A ซึ่งรวมถึงส่วนไดนามิกที่แสดงโดยเรา{name}กำลังสร้างตัวเลขเก้าหลักแบบสุ่มและเพิ่มเป็นโหนดความคิดเห็นแทน ดังนั้นองค์ประกอบจะปรากฏดังนี้:{name}
<template>