كانت إحدى أفضل التحسينات التي تم إدخالها على لغة HTML خلال السنوات الأخيرة هي سمة التحميل = "lazy" التي يمكنك إضافتها إلى الصور (أيضًا إطارات iframe) والتي ستخبر المتصفحات بعدم تحميل الصورة حتى تكون في إطار العرض.

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

حسنًا، هناك ميزة أخرى يمتلكها عنصر ، وهي القدرة على تشغيل برنامج نصي بعد تحميل الصورة (أو عدم تحميلها) باستخدام سمات onload وonerror.

لن يتم إطلاق "رد الاتصال" هذا إلا عند تحميل تلك الصورة، وإذا تم تحميل الصورة بتكاسل، فسيتم إطلاقها فقط عندما تكون الصورة في إطار العرض. وها هو! برنامج نصي محمل بتكاسل.

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

الصورة نفسها يمكن أن تكون أي شيء، أو الأهم من ذلك، لا شيء. كما ذكرت سابقًا، هناك رد اتصال onerror، والذي - كما يوحي الاسم - سيتم تشغيله عندما لا يتم تحميل الصورة .

هذا لا يعني أنك بحاجة إلى توجيه src إلى صورة غير موجودة، مما قد يؤدي إلى وحدة تحكم مليئة بأخطاء 404 الحمراء حول الصور المفقودة، ولا أحد يريد ذلك.

يتم تشغيل رد الاتصال onerror أيضًا إذا كانت صورة src ليست في الواقع صورة، وأسهل طريقة للقيام بذلك هي "ترميز الصورة بشكل سيئ" باستخدام البيانات: التنسيق. وهذا أيضًا له فائدة عدم ملء وحدة التحكم بتحذيرات الصور المفقودة؟

سيظل هذا يؤدي إلى احتواء الصفحة على الصورة المصغرة "الصورة المعطلة"، لكننا سنصل إلى ذلك.

حسنًا، ولكننا ما زلنا بحاجة إلى تضمين جافا سكريبت الذي نريد تشغيله، فكيف يمكننا إصلاح ذلك؟

حسنًا، الآن بعد أن أصبح دعم وحدة ES عالميًا تقريبًا، يمكننا استخدام تقنية تحميل جافا سكريبت event-import-then-default القوية جدًا لتحميل البرنامج النصي بعد إطلاق حدث ما، كما يلي:

ملاحظة: يعمل هذا أيضًا مع أحداث onclick وonchange وما إلى ذلك
ملاحظة: الشرطات السفلية هي مجرد طريقة مختصرة للوصول إلى الوحدة، ويمكنك أيضًا كتابة .then(Module => Module.default(this))

حسنا، ما الذي يحدث هنا!؟

أولاً دعونا نلقي نظرة على الشكل الذي قد يبدو عليه بعض المكونات:

// some-component.js

export default element => {
    element.outerHTML = `
        

            
Hello world!
        
    `;
}

لذلك، ربما لاحظت أنه في رد الاتصال onerror، قمت بتمرير هذا كوسيطة إلى التصدير الافتراضي. السبب وراء قيامي بـ هذا (معذرة التورية؟) هو إعطاء النص اسم الذي أطلق عليه، لأنه في سياق هذا (لقد فعلت ذلك مرة أخرى؟) this = .

الآن يمكنك ببساطة element.outerHTML لاستبدال الصورة المعطلة بترميز html الخاص بك، وها هو ذا، نصوص برمجية محملة بشكل بطيء! ?

التخزين المؤقت، وتمرير الحجج

إذا كنت تستخدم هذه التقنية أكثر من مرة على الصفحة، فسوف تحتاج إلى تمرير فهرس "خرق ذاكرة التخزين المؤقت"، أو رقم عشوائي للبيانات:، على سبيل المثال، شيء مثل:

السلسلة التي بعد ":،" يمكن أن تكون أي شيء، طالما أنها مختلفة.

هناك طريقة بسيطة جدًا لتمرير المعلمات إلى الوظيفة وهي استخدام سمة data-something في HTML مثل:

بما أننا نقوم بتمرير هذا إلى الوظيفة، يمكنك الوصول إلى سمات البيانات مثل:

export default element => {
    const { message } = element.dataset
    element.outerHTML = `
        

            
${message}
        
    `;
}

يرجى إخباري برأيك في التعليقات! ❤️