dynamically polyfill features for a script

ميزات polyfill ديناميكيا للنص

البرنامج النصي الصغير الذي يسمح لك بإلغاء ميزة ما عندما يكون ذلك ضروريًا تمامًا - لا توجد طلبات ضائعة على المتصفحات التي لها دعم أصلي! ؟

هذا البرنامج النصي ~ 4.2 كيلو بايت غير مصقول (121 سطرًا) (1.04 كيلو بايت غير مصغرة و gzipped) ، ~ 8.37 كيلو بايت غير مصغرة مع تعليقات مضمنة (121 سطر) (2.12 كيلو بايت غير مصغرة و gzipped) ، أو ~ 1.9 كيلو بايت مصغرة (خط واحد) (743b minified و gzipped) ، لذلك هو الضوء . ؟

ابدء

راجع نشر ملاحظات حول كيفية نشر المشروع على نظام مباشر.

المتطلبات الأساسية

تأكد من أنك تعرف الميزات التي يعتمد عليها البرنامج النصي الخاص بك وإلغاء تلك التي لا يتم دعمها أصلاً على المتصفحات التي تدعمها (يمكنك التحقق من https://caniuse.com/).

النشر

التحميل عبر NPM

1. قم بتشغيل npm i dynamic-polyfiller
2. استيراد في تطبيقك (مثال أدناه للتفاعل):

 import React from 'react' ;  
import { render } from 'react-dom' ;  

//The import below is the bit you need!
import dynamicPolyfill from 'dynamic-polyfiller' ;

dynamicPolyfill (
  [ "IntersectionObserver" , "Object.assign" ] ,
  'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js' ,
  'quicklink();'
) ;

التحميل محليا (الموصى به كما هو أسهل):

1. انسخ محتويات dynamicpolyfill.js
2. الصق في ملف (ملفات) JS الحالية
3. أضف خطًا جديدًا بعد ذلك واتصل dynamicPolyfill(); ملاحظة: حساسة للحالة
   1. مثال:

    dynamicPolyfill( ["IntersectionObserver", "Object.assign"], 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();' )
   

4. أضف سمة onLoad إلى العلامة التي تستدعي وظيفة dynamicPolyfill() وتمرير المعلمات الخاصة بك
   1. ملاحظة: المعلمة الأولى هي ميزة Polyfills التي تريد تمريرها. هذا متوقع كصفيف.
   2. ملاحظة: المعلمة الثانية هي عنوان URL للنص الذي تريد استخدامه. من المتوقع أن يكون هذا إما string أو array ، ولكن يمكن أن يكون فارغًا ( '' ) أو null إذا كنت لا تقوم بتحميل نص طرف ثالث.
   3. ملاحظة: المعلمة الثالثة هي الوظيفة التي ستقوم بتشغيلها بمجرد تحميل البرنامج النصي. هذا متوقع string أو array .
   4. ملاحظة: تم الآن إهمال المعلمة الرابعة.

التحميل من CDN (موصى به أقل):

1. إضافة علامة <script></script> ربط علامة بهذا البرنامج النصي
   1. مثال:

    <script src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js'>
   </script>
   

2. أضف سمة onLoad إلى العلامة التي تستدعي وظيفة dynamicPolyfill() وتمرير المعلمات الخاصة بك
   1. ملاحظة: المعلمة الأولى هي ميزة Polyfills التي تريد تمريرها. هذا متوقع كصفيف.
   2. ملاحظة: المعلمة الثانية هي عنوان URL للنص الذي تريد استخدامه. من المتوقع أن يكون هذا إما string أو array ، ولكن يمكن أن يكون فارغًا ( '' ) أو null إذا كنت لا تقوم بتحميل نص طرف ثالث.
   3. ملاحظة: المعلمة الثالثة هي الوظيفة التي ستقوم بتشغيلها بمجرد تحميل البرنامج النصي. هذا متوقع string أو array .
   4. ملاحظة: تم الآن إهمال المعلمة الرابعة.

ملاحظة: لا يزال التحميل من CDN يؤدي إلى طلب يحتمل أن يضيع؟

مثال طريقة الاستخدام

محلي

متغيرات السلسلة

 dynamicPolyfill( 'IntersectionObserver', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();' );

متغيرات الصفيف

 dynamicPolyfill( ["IntersectionObserver", "Object.assign"], ['https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'https://other.cdn.net/script.js'], ['quicklink();', 'otherFunction();'] );

CDN

ملاحظة: تحتاج إلى التأكد من أنه قبل الاتصال بوظيفة dynamicPolyfill() التي تم تحميل البرنامج النصي الفعلي نفسه. إذا كنت ستستضيف البرنامج النصي بنفسك (بدلاً من الاتصال بـ CDN) ، فتأكد من تضمين رمز البرنامج النصي أولاً ، ثم اتصل بالوظيفة. يمكنك القيام بذلك بنفس الطريقة كما هو مذكور أعلاه ، ولكن استبدل عنوان URL CDN بالمسار إلى ملف JS الخاص بك ، إذا لم تكن ستتصل به من نفس الملف.

متغيرات السلسلة:

 <script
	src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js' 
	onload='dynamicPolyfill( ["IntersectionObserver", "Object.assign"], 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();')'>
</script>

متغيرات الصفيف:

 <script
	src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js' 
	onload='dynamicPolyfill(["IntersectionObserver", "Object.assign"], ['https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'https://other.cdn.net/script.js'], ['quicklink();', 'otherFunction();'])'>
</script>

بنيت مع

• الفانيليا جافا سكريبت - لا تبعيات إطار على الإطلاق!
• polyfill.io - ل polyfills الفعلية!

الإصدار

للإصدارات المتاحة ، تحقق من تاريخ إصدار الريبو. أوصي بالالتزام بـ "الإصدار الأخير"!

المؤلفون

• سوف الأسهم - العمل الأولي - Willstocks -Tech

انظر أيضًا قائمة المساهمين الذين شاركوا في هذه الكتلة الصغيرة!

المساهمة

يرجى قراءة المساهمة.

رخصة

تم ترخيص هذا المشروع بموجب ترخيص معهد ماساتشوستس للتكنولوجيا - راجع ملف الترخيص.

شكر وتقدير

• PurpleBooth لهذا القالب Readme رائع!
• polyfill.io لخدمة polyfill رهيبة!