Использование CDN вместе с резервной локальной копией

Написал Зеленая Буковка 2016-10-25 в раздел JavaScript

Обновлено: 2017-06-11

Обычно библиотеки(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".

Ярлыки: AngularJS, Bootstrap, CDN, jQuery, ReactJS

Использование CDN вместе с резервной локальной копией

jQuery

Bootstrap

AngularJS

ReactJS

Ближайшие сообщения:

Похожие сообщения:

Свежие записи