dynamically polyfill features for a script - dynamically polyfill features for a script

dynamically polyfill features for a script

ซอร์สโค้ดอื่น ๆ

v0.0.9

ดาวน์โหลด

คุณสมบัติ polyfill แบบไดนามิกสำหรับสคริปต์

สคริปต์เล็ก ๆ น้อย ๆ ที่ช่วยให้คุณสามารถใช้ฟีเจอร์โพลีฟิลด์เมื่อจำเป็นอย่างยิ่ง - ไม่มีคำขอที่สูญเปล่ากับเบราว์เซอร์ที่มีการสนับสนุนพื้นเมือง! -

สคริปต์นี้คือ ~ 4.2KB Minified (121 บรรทัด) (1.04KB Minified และ GZIpped) , ~ 8.37KB UN minified ด้วยความคิดเห็นแบบอินไลน์ (121 บรรทัด) (2.12KB Minified และ Gzipped) หรือ ~ 1.9KB minified (1 บรรทัด) ( 743B minified -

เริ่มต้น

ดูการปรับใช้สำหรับหมายเหตุเกี่ยวกับวิธีการปรับใช้โครงการในระบบสด

ข้อกำหนดเบื้องต้น

ตรวจสอบให้แน่ใจว่าคุณรู้ว่าฟีเจอร์สคริปต์ของคุณพึ่งพาและ polyfill ที่ไม่ได้รับการสนับสนุนในเบราว์เซอร์ที่คุณสนับสนุน (คุณสามารถตรวจสอบ https://caniuse.com/) ได้อย่างไร

การปรับใช้

กำลังโหลดผ่าน NPM

เรียกใช้ npm i dynamic-polyfiller
นำเข้าในแอพของคุณ (ตัวอย่างด้านล่างสำหรับ React):

 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();'
) ;

กำลังโหลดในพื้นที่ (แนะนำให้ง่ายที่สุด):

คัดลอกเนื้อหาของ DynamicPolyFill.js
วางลงในไฟล์ JS ที่มีอยู่ของคุณ
เพิ่มบรรทัดใหม่หลังจากนั้นและเรียก dynamicPolyfill(); หมายเหตุ: กรณีไว
1. ตัวอย่าง:
```
 dynamicPolyfill( ["IntersectionObserver", "Object.assign"], 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();' )
```
เพิ่มแอตทริบิวต์ onLoad ลงในแท็กที่เรียกฟังก์ชัน dynamicPolyfill() และส่งผ่านพารามิเตอร์ของคุณ
1. หมายเหตุ: พารามิเตอร์แรกคือฟีเจอร์โพลีฟิลด์ที่คุณต้องการผ่าน คาดว่าจะเป็นอาร์เรย์
2. หมายเหตุ: Paramter ที่สองคือ URL ของสคริปต์ที่คุณต้องการใช้ สิ่งนี้คาดว่าจะเป็น string หรือ array แต่สามารถว่างเปล่า ( '' ) หรือ null หากคุณไม่ได้โหลดสคริปต์ของบุคคลที่สาม
3. หมายเหตุ: พารามิเตอร์ที่สามคือฟังก์ชั่นที่คุณจะเรียกใช้เมื่อสคริปต์โหลดแล้ว สิ่งนี้คาดว่าจะเป็น string หรือ array
4. หมายเหตุ: ตอนนี้พารามิเตอร์ที่ 4 เลิกใช้แล้ว

โหลดจาก CDN (แนะนำน้อยกว่า):

เพิ่ม <script></script> แท็กที่เชื่อมโยงกับสคริปต์นี้

ตัวอย่าง:

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

เพิ่มแอตทริบิวต์ onLoad ลงในแท็กที่เรียกฟังก์ชัน dynamicPolyfill() และส่งผ่านพารามิเตอร์ของคุณ
1. หมายเหตุ: พารามิเตอร์แรกคือฟีเจอร์โพลีฟิลด์ที่คุณต้องการผ่าน คาดว่าจะเป็นอาร์เรย์
2. หมายเหตุ: Paramter ที่สองคือ URL ของสคริปต์ที่คุณต้องการใช้ สิ่งนี้คาดว่าจะเป็น string หรือ array แต่สามารถว่างเปล่า ( '' ) หรือ null หากคุณไม่ได้โหลดสคริปต์ของบุคคลที่สาม
3. หมายเหตุ: พารามิเตอร์ที่สามคือฟังก์ชั่นที่คุณจะเรียกใช้เมื่อสคริปต์โหลดแล้ว สิ่งนี้คาดว่าจะเป็น string หรือ array
4. หมายเหตุ: ตอนนี้พารามิเตอร์ที่ 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>