dynamically polyfill features for a script

動態多填充腳本功能

一個小腳本，可以在絕對必要的情況下只能在功能時進行多填充 - 在具有本機支持的瀏覽器上沒有浪費的請求！ ？

該腳本是〜4.2kb UN縮小（121行） （1.04KB UN縮小且GZPECT） ，〜8.37KB UN用內聯註釋（121行） （2.12kb Un縮小且GZPERCEND）或〜1.9Kb縮小（1行）（1行）（1 Line ）（743b andified and Gzpiffect） 。 ？

入門

有關如何在實時系統上部署項目的註釋，請參見部署。

先決條件

確保您知道您的腳本依賴於哪些功能，並將不在您支持的瀏覽器上的未本地支持的內容歸功於（您可以檢查https://caniuse.com/）。

部署

通過NPM加載

1. 運行npm i dynamic-polyfiller
2. 在您的應用程序中導入（以下示例for 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();'
) ;

在本地加載（最簡單推薦）：

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），請確保首先包含腳本代碼，然後調用該函數。您可以以與上面相同的方式執行此操作，但是如果您不打算從同一文件調用它，則可以將CDN URL替換為通往自己的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>

建立

• Vanilla JavaScript-沒有任何框架依賴性！
• polyfill.io-對於實際的polyfills！

版本控制

對於可用的版本，請查看回購版本歷史記錄。不過，我建議您堅持“最新版本”！

作者

• 會庫存-初始工作- Willstocks -Tech

另請參閱參與這個小掘金的貢獻者列表！

貢獻

請閱讀有關行為準則的詳細信息以及提交拉的請求的過程。

執照

該項目已根據MIT許可證獲得許可 - 有關詳細信息，請參見許可證文件。

致謝

• 這個很棒的讀書模板的紫色！
• polyfill.io提供令人敬畏的多填充服務！