Есть ли опасность создать файл js, который просто использует document.write() для объединения js и css-файлов?

Question

Я создаю интерфейсный интерфейс интерфейса для разработчиков в моей фирме, чтобы использовать для создания внутренних веб-приложений. Он состоит из настраиваемых Bootstrap, jQuery, других библиотек с открытым исходным кодом, внутренних модулей и таблиц стилей. Пользовательская среда полностью IE9, а мой сервер - .NET 3.5. Я размещаю общие файлы. Команды Dev в фирме будут размещать ссылки на своих страницах проекта и применять структуру на своих страницах.

Я хочу предложить им самый простой способ реализации этого, который будет одной строкой кода для вставки, которая строит для них библиотеку. Вырезание и склеивание 30 строк кода застопорилось момент Ctrl + V нажата, это не оставляет мне контроля и просто неэлегантно.

Неудачные эксперименты

Я попытался с помощью Head.js и LazyLoad оба из которых использовать лучшие практики для вставки скриптов. Но каждый из них вызвал либо отображение содержимого перед стилем, либо условия, когда методы вызывают до загрузки скриптов. Я отказываюсь от такого подхода. Это слишком изменчиво.

Простой document.write() решение

В выходные я подумал: почему бы мне не сделать файл с именем «JS рамки, JS», добавить скрипт и связать файлы в порядке с стопкой строк document.write(). Скажите разработчикам, чтобы он поместил это в голову, и все. Возможно, я мог бы добавить необходимые метатеги для IE9 и мобильных устройств. Это так противно и просто ... но это может сработать!

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

Зная это и предоставляя его на самом деле, есть ли причина, по которой я не должен этого делать?

Мое единственное, что можно изучить, это расслоение на сервер. Я надеюсь не прибегать к этому, так как сам не владею сервером, и я не являюсь разработчиком .NET.

Answer 1

Ваш предлагаемый подход является отличным для вашей ситуации. Он имеет ряд преимуществ перед более сложными решениями, включая полную простоту, полностью предсказуемый порядок выполнения и полную совместимость со сценариями, которые могут не поддаваться асинхронной загрузке. Я использовал его много раз в производственных приложениях, как и многие другие разработчики.

Конечно, у других решений есть свои преимущества, но для того, что вы делаете, нет ничего плохого в добром старом document.write().

Похоже, что у вас есть несколько сценариев и таблиц стилей и, вероятно, они загружаются из общего каталога (или общего корневого каталога). Чтобы уменьшить повторение в вашем файле framework.js, вам может понадобиться определить две функции: одну для записи тега <link> для CSS, а другую для записи тега <script> для JavaScript.Таким образом, файл скелет framework.js может выглядеть примерно так:

(function() { 
    var scriptBase = 'js/'; 
    var styleBase = 'css/'; 

    function writeStyle(name) { 
     document.write(
      '<link rel="stylesheet" href="', styleBase, name, '">', 
      '</link>' 
     ); 
    } 

    function writeScript(name) { 
     document.write(
      '<script src="', scriptBase, name, '">', 
      '</script>' 
     ); 
    } 

    writeStyle('one.css'); 
    writeStyle('two.css'); 

    writeScript('one.js'); 
    writeScript('two.js'); 
})(); 

Обратите внимание, что вы не должны делать какое-либо специальное вытекание из </script> текста, как вы можете видеть в коде, который использует document.write(). Это необходимо, только когда вы помещаете этот код непосредственно внутри тега <script> в файл HTML. Цель этого ускорения состоит в том, чтобы запретить закрывать тег <script> текстом </script> внутри вызова document.write(). Поскольку ваш код находится во внешнем файле .js, это не проблема: наличие в этом файле текста </script> не завершит файл .js.

Еще один момент, чтобы иметь в виду, что все document.write() звонки вы делаете внутри .js файла вставлены в документ после в .js файл, который записывает их. Так что не ожидайте, что сможете сделать document.write() внутри framework.js, затем добавьте другой код внутриframework.js, что зависит от файла .js, который вы только что написал. Все эти файлы .js (и .css) загружаются после framework.js, а не чередуются с ним.

Еще одно соображение, конечно, время загрузки. Ваша страница может загружаться быстрее, если вы объединяете и уменьшаете свои CSS и JS-файлы. Но если это внутренние веб-приложения, время загрузки страницы может быть наименьшим из ваших забот: надежность и ремонтопригодность могут быть более важными. И в любом случае вы всегда можете использовать решение document.write() для запуска и запуска прямо сейчас, а затем оптимизировать его только в маловероятном случае, которое вам нужно.