1

我正在尝试使用服务器端包含系统以模块化方式组织我的网站。这个想法是每个模块都将拥有自己的 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 次 - 我也会包含 20 次 css 和 js 文件。不好。
  2. 通常我已经看到 css 包含在 head 标签中，而 js 包含在 body 的末尾。在文档编制过程中让它们全部出现会导致任何问题吗？

这些包含可以与任何包含、php、asp 或 jsp 交换......这是使用 apaches SSI。

整个想法是否朝着错误的方向发展？我想这用于开发设置，但是有某种加载页面的智能 nodejs rhino 脚本 - 查找加载的脚本和 css，连接并缩小并添加为单个包含以用于生产。

4

2 回答 2

0

为了克服多次包含 js 或 css 的问题，您应该将该文件包含在您要包含的文件的顶部，而不是包含在该包含的文件中。意味着您的 product.css/js 应该从中删除，并且应该放置在您的 index.html 或 header .html 中一次

多次包含相同的 js 可能会停止您的 javascript，因此请确保它们不会相互冲突

于 2013-04-17T10:17:19.310 回答
0

使用 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 中。需要js优化器

于 2013-12-09T02:51:28.580 回答