Включение фрагментов html в качестве модулей

Я пытаюсь организовать свой веб-сайт модульным способом, используя систему включения на стороне сервера. Идея состоит в том, что каждый модуль будет иметь свой собственный css и собственный javascript и будет загружаться только после включения на страницу, поэтому любая страница, не имеющая модуля, также не будет загружать эти модули css/js.

Я сделал это так:

header.html
-----------

<!-- header start -->
<link rel="stylesheet" href="css/header.css">
<header class="module-header">
    <div class="links">
       links...
    </div>
</header>
<script src="js/header.js"></script>
<!-- header end -->


footer.html
-----------

<!-- footer start -->
<link rel="stylesheet" href="css/footer.css">
<header class="module-footer">
    <div class="links">
       links...
    </div>
</header>
<script src="js/footer.js"></script>
<!-- footer end -->

а затем в index.html:

<!DOCTYPE html>
    <head>
        <title>Modular page</title>
    </head>

    <body>
        <!--#include virtual="html/header.html" -->
        <!--#include virtual="html/footer.html" -->
    </body>
</html>

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

Однако у меня возникли некоторые проблемы с моим решением:

  1. Если бы мне пришлось включать модуль несколько раз, например, product.html, который будет повторяться, скажем, 20 раз, я бы включил файлы css и js также 20 раз. Нехорошо.
  2. Обычно я видел, как css включается в тег head, а js — в конец body. Не вызовет ли появление каких-либо проблем их появление во время создания документа?

Эти включения могут быть заменены любым включением, php, asp или jsp... это использует apache SSI.

Вся идея идет в неправильном направлении? Я бы представил это для настройки разработки, но имея какой-то интеллектуальный скрипт nodejs rhino, который загружает страницу - находит загруженные скрипты и css, объединяет и минимизирует и добавляет как отдельные включения для производства.


module javascript html css code-organization
person Yonder    schedule 17.04.2013    source источник
comment
просто идея ... может быть, иметь некоторую логическую переменную ProductResourcesLoaded, для которой вы установили значение true после первой загрузки этого модуля? поэтому, если у вас есть 30 модулей, вы сначала загружаете ресурс...   -  person Davor Mlinaric    schedule 17.04.2013

Ответы (2)


arrow_upward
0
arrow_downward

Чтобы решить проблему включения js или css в разы, вы должны включать эти файлы в начало файла, в который вы собираетесь включать, а не внутри этого включенного файла. Означает, что ваш product.css/js должен быть удален из этого и должен быть помещен в ваш index.html или заголовок .html на один раз.

включение одного и того же js может остановить ваш javascript, поэтому убедитесь, что они не конфликтуют друг с другом.

person mukund    schedule 17.04.2013
comment
Да, это был бы традиционный способ, но я потерял бы модульную систему. Это означало бы, что каждая страница, которую я разрабатываю, потребует ручной работы по размещению на ней всех ресурсов. Что мне действительно нужно, так это иметь базовую html-страницу - она ​​одинакова для всех, которая может иметь некоторые базовые CSS и JS - и тогда все, что мне нужно сделать, это включить сам модуль. Конечно, должен быть какой-то способ сделать это? - person Yonder; 17.04.2013

arrow_upward
0
arrow_downward

Используйте систему модулей javascript. Модули Javascript AMD требуют js для постепенной загрузки javascript — очень хороший вариант. requirejs.org — это очень хороший место для начала.

Для вашего контекста используйте

//inside header.html
require(['header.js'], function(){
   //call this require() multiple times it will load the javascript only once.

   //user header.js ... once this line is require() line is executed the
   //header.js will be loaded forever

});

нижний колонтитул

//inside footer.html
require(['footer.js'], function(){
   //call this require() multiple times it will load the javascript only once.

   //user header.js ... once this line is require() line is executed the
   //header.js will be loaded forever

});

Теперь возникает проблема модульной загрузки CSS. Также доступен плагин Requirejs CSS.

Теперь, когда вы начинаете использовать такую ​​систему, загрузка скрипта происходит асинхронно с использованием javascript. Таким образом, сценарии появляются на экране немного позже. Даже css прибывает немного поздно. Поэтому, если вы пишете глобальный обработчик событий, такой как window.onload= func(){}, это приведет к сбою, поскольку большая часть вашего javascript еще не загружена. Если вы выполняете стилизацию поверх CSS, который был загружен динамически, это также необходимо сделать после завершения загрузки CSS. Использование !DomReader в requirejs — хороший вариант. Когда-нибудь я напишу блог, в котором буду подробно обсуждать это.

Интеллектуальность минимизации присутствует и в requirejs. оптимизатор requirejs

person samarjit samanta    schedule 09.12.2013