包括html片段作為模塊

Question

我正在嘗試使用服務器端包含系統以模塊化方式組織網站。 這個想法是，每個模塊都將擁有自己的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剛好加載，並確保它具有良好的布局。

但是-我的解決方案遇到了一些問題：

如果我要多次包含一個模塊，例如product.html，它會被重復說20次-我將同時包含20次css和js文件。 不好。
通常，我已經看到css包含在head標簽中，而js包含在正文末尾。 在構建文檔時讓它們全部出現會引起任何問題嗎？

這些include可以與任何include，php，asp或jsp交換...這是使用apache SSI。

整個想法是否朝錯誤的方向發展？ 我可以想象這是用於開發設置的，但是有某種智能的nodejs rhino腳本可以加載頁面-查找加載的腳本和css，concats並最小化並添加為單個包含以用於生產。

Answer 1

為了克服多次包含js或css的問題，您應該將該文件包含在要包含的文件的頂部，而不要包含在包含的文件中。 意味着應從其中刪除product.css / js，並一次將其放置在index.html或header.html中

多次包含相同的js可能會使您的JavaScript停止運行，因此請確保它們不會相互沖突

Answer 2

使用javascript模塊系統。 Javascript AMD模塊requirejs可以無縫加載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加載完成后也需要進行樣式設置。 在requirejs中使用！DomReader是一個不錯的選擇。 有一天，我將寫一個博客，深入討論這些問題。

最小化的智能性也存在於requirejs中。 requirejs優化器

包括html片段作為模塊

問題描述

2 個解決方案

解決方案1
0 2013-04-17 10:17:19

解決方案2
0 2013-12-09 02:51:28

包括html片段作為模塊

問題描述

2 個解決方案

解決方案1 0 2013-04-17 10:17:19

解決方案2 0 2013-12-09 02:51:28

解決方案1
0 2013-04-17 10:17:19

解決方案2
0 2013-12-09 02:51:28