AJAX для загрузки кода

Question

Несколько дней назад я столкнулся с проектом Polymer и веб-компонентами. Говорят, что это будущее Интернета. Я не знаю много об этом. Но если я правильно понял, идея состоит в том, чтобы улучшить модульность веб-кода. Я хотел бы задать простой вопрос, в этом отношении.

Есть ли какой-либо недостаток или возражение против использования AJAX для того, чтобы читать предварительно "обычный текстовый" файл (но с HTML, CSS и JS) и использовать функцию JavaScript "document.write" для вставки этого кода в другой файл? Я удивился этому, потому что это, кажется, решает модульность веб-кода очень простым и быстрым способом. Есть ли проблема в этом?

Спасибо!

Answer 1

Общий принцип в порядке, но, конечно, используя document.write это ужасно document.write не может быть безопасно использован после полного анализа документа. Поэтому после асинхронной загрузки ресурса будет небезопасно его использовать.

Гораздо лучший подход - создать узел DOM, загрузить извлеченный ресурс в узел, а затем загрузить узел в DOM. Например, асинхронная загрузка скрипта (но общий принцип распространяется и на другие ресурсы):

var xhr = new XMLHttpRequest();
xhr.open("GET", "somescript.js");
xhr.send();

xhr.addEventListener("load", function(e) {
    var fetchedScriptContent = e.target.responseText

    var s = document.createElement("script");
    s.textContent = fetchedScriptContent;
    // s.innerText = fetchedScriptContent; // for older browsers
    document.body.appendChild(s);
});

Answer 2

Это не проблема, за исключением того, что document.write не будет работать после загрузки страницы, но обычно это делается для загрузки скриптов во время выполнения:

function addScript(anUrl) {
    var aScript = document.createElement( 'script' );
    aScript.type = 'text/javascript';
    aScript.src = anUrl;
    $("head").append( aScript );
}

Браузер позаботится о загрузке и запуске скрипта с URL-адреса, поэтому вам не нужно вставлять исходный код вручную, но при необходимости вы можете сделать это следующим образом:

function addScriptSource(sourceText) {
    var aScript = document.createElement( 'script' );
    aScript.type = 'text/javascript';
    aScript.textContent = sourceText;
    $("head").append( aScript );
}