dynamically polyfill features for a script

Динамически многофильки для сценария

Небольшой скрипт, который позволяет вам только полифиль функции, если это абсолютно необходимо - не потраченные впустую запросы в браузерах, которые имеют нативную поддержку! ??

Этот сценарий состоит из ~ 4,2 КБ ООН (121 строки) (1,04 КБ ООН, заниженная и GZED) , ~ 8,37 КБ ООН, заниженная встроенными комментариями (121 строки) (2,12 КБ ООН и GZED) , или ~ 1,9 КБ, минимизированные (1 линия) (743B MINALID и GZED) , настолько прозрачно светло. ?

Начиная

См. Развертывание для заметок о том, как развернуть проект в живой системе.

Предварительные условия

Убедитесь, что вы знаете, на каких функциях зависит ваш сценарий, и полифиль тех, кто не поддерживается в поддерживаемых вами браузерах (вы можете проверить https://caniuse.com/).

Развертывание

Загрузка через NPM

1. Запустите npm i dynamic-polyfiller
2. Импорт в ваше приложение (пример ниже для 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. Примечание. Первый параметр - это полифиллы функции, которые вы хотите пройти. Это ожидается как массив.
   2. Примечание. Второй параметр - это URL -адрес сценария, который вы хотите использовать. Это ожидается как string или array , но может быть пустым ( '' ) или null если вы не загружаете сторонний сценарий.
   3. Примечание. Третий параметр - это функция, которую вы запустите после загрузки сценария. Это ожидается как string или array .
   4. Примечание: 4 -й параметр теперь устарел.

Загрузка из CDN (менее рекомендуется):

1. Добавить <script></script> Tag, ссылаясь на этот скрипт
   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. Примечание. Первый параметр - это полифиллы функции, которые вы хотите пройти. Это ожидается как массив.
   2. Примечание. Второй параметр - это 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>

Построен с

• Vanilla JavaScript - никакие зависимости от фреймворта вообще!
• Polyfill.io - для реальных полифиллов!

Версии

Для получения доступных версий ознакомьтесь с историей репо. Я рекомендую придерживаться «последнего релиза»!

Авторы

• Завещание акций - начальная работа - Willstocks -Tech

См. Также Список участников, которые участвовали в этом маленьком самородке!

Внося

Пожалуйста, прочитайте Anforming.md для получения подробной информации о кодексе поведения и процессе отправки запросов на притяжение.

Лицензия

Этот проект лицензирован по лицензии MIT - для получения подробной информации см.

Благодарности

• Purplebooth для этого удивительного шаблона Readme!
• Polyfill.io для удивительного полифильного обслуживания!