Использование CDN вместе с резервной локальной копией
Обычно библиотеки(jQuery, reactJS) и фреймворки(AngularJS, Bootstrap) предлагают загружать себя через CDN, что имеет множество плюсов по сравнению с корявеньким локальным сервером.
Это быстро и эффективно, однако теперь работа сайта будет зависеть сразу от 2 удаленных ресурсов (минимум). Поэтому хорошо бы продумать пути отхода, если CDN умер или недоступен.
Общая схема работы: загрузить с CDN, проверить — загрузилось ли, если нет — поднять местную копию. Несложно, надежно, берет только плюсы от обоих решений.
В этом посте буду складывать примеры такой подгрузки для разных библиотек.
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> if (typeof(jQuery) === "undefined") { document.write("<script src='/lib/jquery-3.1.1.min.js'><\/script>"); } </script>
Bootstrap
В базовой поставке включает в себя набор javascript плагинов к jquery (bootstrap.min.js) и bootstrap.min.css. Оба файла нужно проверять и подгружать отдельно.
Жаваскрипт подгружается так же как и жквери, только проверять другой объект:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script> if (typeof($.fn.modal) === "undefined") { document.write("<script src='/lib/bootstrap-3.3.7.min.js'><\/script>"); } </script>
С ксс немного сложнее, нужно сначала поглядеть список уже загруженных файлов со стилями, и если стилей бустрапа нет, то запихнуть link с локальным файлом в head, и не перепутать с порядком включаемых файлов.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script> var cssHref = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; var needLocalCss = true; for (var i = 0; i < document.styleSheets.length; i++) { if (document.styleSheets[i].href === cssHref && document.styleSheets[i].cssRules.length > 0) { needLocalCss = false; } } if (needLocalCss === true) { var cssLinkNode = document.createElement("link"); cssLinkNode.href = "/lib/bootstrap-3.3.7.min.css"; cssLinkNode.rel = "stylesheet"; document.head.insertBefore(cssLinkNode, document.head.firstChild); } </script>
AngularJS
Этот включается точно так же как и jQuery, только проверять наличие: typeof(angular) === "undefined"
ReactJS
Как и жквери и ангуляр, только он состоит из двух библиотек, которые проверять отдельно: typeof(React) === "undefined"
typeof(ReactDOM) === "undefined"
.
Ближайшие сообщения:
Похожие сообщения:
- Как отключить поиск в WordPress
- PCSX – эмулятор PlayStation One
- “Ошибка: запрещено” при загрузке файлов с Google Диск
- Corratec X-Vert Mayon Disc 2009. Краткий отзыв. Часть II
- Gnuplot
Комментарии к этой записи отключены.