createElement orqali yaratilgan elementlar global serverda qayta yuklanganda ko‘rinmaslik muammosi

Muammo: createElement orqali yaratilgan elementlar sahifani qayta yuklaganda yo'qoladi

Agar siz JavaScript orqali document.createElement funksiyasidan foydalangan bo‘lsangiz, ba’zan lokal muhitda kodingiz yaxshi ishlaydi, lekin serverga yuklanganingizda, sahifani qayta yuklaganingizda yoki dinamik kontent qo‘shganingizda, bu elementlar ko‘rinmasligi mumkin.

Ushbu muammo odatda server tarafidan render qilish (SSR) va DOM manipulatsiyasi bilan bog‘liq.

Nega bu sodir bo‘ladi?

1. Server tarafidan render (SSR): Ko‘p frameworklar, masalan, Nuxt.js, dastlab sahifani serverda yuklaydi va foydalanuvchiga statik HTML yuboradi.
2. DOM o‘zgarishi: onMounted kabi lifecycle metodlar faqat dastlabki yuklash vaqtida ishlaydi va agar sahifada yangi kontent dinamik ravishda yuklansa, eski manipulyatsiyalar yo‘qoladi.
3. Dinamik kontent: Dinamik tarkibni, masalan, <ContentDoc> komponentidan kelayotgan ma’lumotlarni qayta yuklaganda DOM’da sizning qo‘shimcha yaratilgan elementlaringiz yo‘qoladi.

Oddiy misol: Copy tugmasi

Quyida createElement orqali dinamik yaratilgan elementlar misoli keltirilgan:

onMounted(() => {
  document.querySelectorAll("pre").forEach((block) => {
    const button = document.createElement("button")
    button.innerText = "Copy"
    button.className = "copy-btn"
    block.appendChild(button)

    button.addEventListener("click", () => {
      const code = block.querySelector("code")?.innerText || ""
      navigator.clipboard.writeText(code).then(() => {
        button.innerText = "Copied!"
        setTimeout(() => (button.innerText = "Copy"), 2000)
      })
    })
  })
})

Lokal muhitda ushbu kod muvaffaqiyatli ishlaydi. Ammo, sahifani qayta yuklaganingizda, bu tugmalar yo‘q bo‘lib qoladi.

Yechim: MutationObserver’dan foydalanish

Dinamik DOM o‘zgarishlarini kuzatib borish uchun MutationObserver eng yaxshi yechimlardan biri hisoblanadi. Quyida to‘liq yechim keltirilgan:

onMounted(() => {
  const observer = new MutationObserver(() => {
    document.querySelectorAll("pre").forEach((block) => {
      if (!block.querySelector(".copy-btn")) {
        const button = document.createElement("button")
        button.innerText = "Copy"
        button.className = "copy-btn"
        block.appendChild(button)

        button.addEventListener("click", () => {
          const code = block.querySelector("code")?.innerText || ""
          navigator.clipboard.writeText(code).then(() => {
            button.innerText = "Copied!"
            setTimeout(() => (button.innerText = "Copy"), 2000)
          })
        })
      }
    })
  })

  observer.observe(document.body, { childList: true, subtree: true })
})

Nega bu kod ishlaydi?

1. MutationObserver: DOM’da har qanday yangi o‘zgarishlarni kuzatadi.
2. Dinamik elementlarni qo‘shish: Agar pre elementi ichida Copy tugmasi bo‘lmasa, u avtomatik ravishda qo‘shiladi.
3. Qo‘shimcha elementlarning ko‘rinishi: Sahifani qayta yuklaganingizda yoki dinamik tarkib qo‘shilganda, yangi elementlar o‘z vaqtida qo‘shiladi.

Boshqa qo‘llanishlar

Yuqoridagi yechim faqat Copy tugmasi bilan cheklanib qolmaydi. Siz ushbu metodni quyidagi holatlarda ham qo‘llashingiz mumkin:

• Dinamik modal yoki tooltip yaratishda.
• Foydalanuvchi tugmachasini (button) avtomatik qo‘shishda.
• Kod yoki matn snippetlarini avtomatik o‘zgartirishda.

Xulosa

createElement orqali yaratilgan elementlarning ko‘rinmay qolishi muammosi server tarafidan render qilish jarayoni va dinamik DOM manipulyatsiyalari bilan bog‘liq. MutationObserver ushbu muammoni hal qilish uchun eng samarali usullardan biridir.

Agar sizning loyihangizda shu kabi muammo yuzaga kelsa, ushbu maqola yordamida muammoni hal qilishingiz mumkin. Fikrlaringizni yoki savollaringizni izohlarda qoldiring!