فهم دورة حياة كائن DOM

مطور
1

مرحباً يا رفاق. أحاول حل مشكلة أعتقد أنها تتعلق بدورة حياة كائن DOM. لقد قرأت هذا الموضوع A tour of how the Widget (Virtual DOM) code in Discourse works ولكنه لا يزال لا يساعد في الإجابة على سؤالي، أو على الأقل يوجهني في اتجاه لمحاولة حل مشكلتي. أواجه صعوبة في استيعاب الأمر.

لقد كتبت إضافة بسيطة كغلاف لخدمة خارجية (محرك دردشة Rumbletalk، على وجه الدقة). تعمل الإضافة كما أرغب، والدردشة تعمل، وما إلى ذلك، باستثناء إذا انتقلت بعيدًا عن الدردشة إلى جزء آخر من موقعي، ثم عدت إلى الدردشة. أحصل على خطأ من جافا سكريبت المضمن لديهم أحاول فيه إنشاء دردشة مكررة.

الإضافة هي مجرد hbs/widget بسيطة تنشئ HTML التالي:

<div style="height: 500px;">
  <div id="$MY_ID"></div>
  <script src="https://rumbletalk.com/client/?$MY_OTHER_ID"></script>
</div>

ولديها بعض أكواد تسجيل الدخول جافا سكريبت أيضًا.

أفترض أنه في مكان ما في DOM، لا يزال HTML المعروض موجودًا، وعندما يتم تحميل علامة النص البرمجي هذه وتشغيلها مرة أخرى، فإنها تكتشف ذلك. عندما أقوم بتصحيح الأخطاء في وحدة التحكم، أرى الخطأ يحدث من جافا سكريبت من علامة النص البرمجي، وليس من كود تسجيل الدخول.

لقد تواصلت مع موظفي Rumbletalk، ولكن لم أتلق ردًا حتى الآن. هل لدى أي شخص اقتراح بشأن ما يمكنني النظر فيه بعد ذلك؟ الشيء الوحيد الذي تمكنت من فعله هو إضافة معالج window.onerror ثم إجراء location.reload(). من الواضح أن هذا ليس حلاً جيدًا. هل هناك طريقة لـ “مسح” كائنات DOM لمحرك الدردشة عندما تفقد الصفحة التركيز؟

شكرًا على أي مساعدة
-=بوب

2

مرحباً بوب :wave:

مشكلتك تتجاوز HTML قليلاً

<script src="https://rumbletalk.com/client/?$MY_OTHER_ID"></script>

يقوم هذا السكربت بتشغيل IIFE، ويهيئ مثيلاً، ويخزن المثيل في النطاق العام. النطاق العام هو نفسه للجلسة بأكملها في Discourse لأنه تطبيق أحادي الصفحة. يمكنك التحقق من ذلك باستخدام

console.log(RumbleTalkChat)

بعد تحميل السكربت للمرة الأولى. لذلك، RumbleTalkChat["$MY_OTHER_ID"] هو ما يشتكي منه السكربت

if (e.RumbleTalkChat[a.hash]) {
  throw new Error("Trying to create a duplicate chat with code: " + a.hash);
}

يمكنك محاولة إزالة هذا المثيل قبل تحميل السكربت مرة أخرى باستخدام شيء مثل هذا

delete RumbleTalkChat["$MY_OTHER_ID"]

لاحظ أنه لا يحتوي على حرف ?.

ومع ذلك، من الأفضل لك أن تكتشف سبب تحميل السكربت عدة مرات في المقام الأول. أرى أن السكربت يحتوي على طريقة openChat() يمكنك استدعاؤها. لذلك قد لا يكون تحميل السكربت عدة مرات ضرورياً.

للأسف، ستحتاج إلى تقديم المزيد من التفاصيل حول مكان تضمين الكود وكيفية إضافة العلامات قبل أن نتمكن من تحديد السبب.

4 إعجابات
3

مرحباً جو
شكراً على شرح IIFE، لقد افترضت أنه شيء من هذا القبيل، أو، كما ذكر العنوان، كان كائنًا نطاقيًا DOM. لقد رأيت التحقق أيضًا

if (e.RumbleTalkChat[a.hash]) {
  throw new Error("Trying to create a duplicate chat with code: " + a.hash);
}

في الوحدة النمطية أيضًا. يتم تحميل تلك الوحدة النمطية مع بقية الصفحة عند عرض الأداة. سأرى ما إذا كان بإمكاني نقل ذلك ربما إلى المُهيئ، ثم فقط عرض النموذج.

شكراً مرة أخرى، إلى الأمام وإلى الأعلى!

إعجابَين (2)