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

Question

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

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

Спасибо!

Answer 1

Там нет никаких проблем делать это, кроме 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); 
} 

Answer 2

общий принцип это хорошо, но, конечно, с помощью 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); 
});