包括html片段作为模块

Question

I'm trying to organize my website in a modular way using a server side include system. 我正在尝试使用服务器端包含系统以模块化方式组织网站。 The idea is that every module will have it's own css and own javascript and will only be loaded once included on the page - so any page not having the module wont load that modules css/js either. 这个想法是，每个模块都将拥有自己的CSS和javascript，并且仅在页面中包含一次后才被加载-因此，没有模块的任何页面也不会加载该模块css / js。

I've done it like this: 我这样做是这样的：

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 -->

and then on the index.html: 然后在index.html上：

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

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

This works fine, and since the scripts are loaded after each module the content is guaranteed to exist before running the scripts. 这可以正常工作，并且由于脚本是在每个模块之后加载的，因此在运行脚本之前，保证内容存在。 Css is loaded just before and makes sure it will have a nice layout. CSS刚好加载，并确保它具有良好的布局。

However - I've run into some issues with my solution: 但是-我的解决方案遇到了一些问题：

In case I were to include a module several times, like for example a product.html, which will be repeated say 20 times - I would have the css and js files included also 20 times. 如果我要多次包含一个模块，例如product.html，它会被重复说20次-我将同时包含20次css和js文件。 Not good. 不好。
Generally I've seen css being included in the head tag, and js in the end of the body. 通常，我已经看到css包含在head标签中，而js包含在正文末尾。 Will having them all coming as the document is being built up induce any issues? 在构建文档时让它们全部出现会引起任何问题吗？

Those includes can be exchanged with any include, php, asp or jsp... this is using apaches SSI. 这些include可以与任何include，php，asp或jsp交换...这是使用apache SSI。

Is the whole idea going in the wrong direction? 整个想法是否朝错误的方向发展？ I'd imagine this for development setup, but having some kind of smart nodejs rhino script that loads the page - finds the loaded scripts and css, concats and minifies and adds as single includes for production. 我可以想象这是用于开发设置的，但是有某种智能的nodejs rhino脚本可以加载页面-查找加载的脚本和css，concats并最小化并添加为单个包含以用于生产。

Answer 1

To overcome issue of including js or css for times, you should include that files in top of the file in which you gonna include and not inside that included file. 为了克服多次包含js或css的问题，您应该将该文件包含在要包含的文件的顶部，而不要包含在包含的文件中。 Means your product.css/js should be removed from that and should be placed in your index.html or header .html for once 意味着应从其中删除product.css / js，并一次将其放置在index.html或header.html中

including same js for times may stop your javascript so make sure that they are not conflicting each other 多次包含相同的js可能会使您的JavaScript停止运行，因此请确保它们不会相互冲突

Answer 2

Use a javascript module system. 使用javascript模块系统。 Javascript AMD modules requirejs to load javascript increamently is a very good option. Javascript AMD模块requirejs可以无缝加载JavaScript是一个很好的选择。 requirejs.org is a very good place to start. requirejs.org是一个很好的起点。

For your context use 供您使用

//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

});

footer 页脚

//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

});

Now comes the problem of CSS loading in a modular way. 现在出现了以模块化方式加载CSS的问题。 Requirejs CSS plugin is also available. 也可以使用Requirejs CSS插件。

Now once you start using this kind of system, the script loading happens asynchronously using javascript. 现在，一旦您开始使用这种系统，就可以使用javascript异步进行脚本加载。 So the scripts arrive a little late in the screen. 因此脚本到达屏幕的时间稍晚。 Even the css arrives a little late. 甚至CSS都迟到了。 So if you are writing global event handler like window.onload= func(){} , these are going to fail as most of your javascript would not have loaded yet. 因此，如果您正在编写诸如window.onload= func(){}类的全局事件处理程序，则这些操作将失败，因为大多数JavaScript尚未加载。 If you are doing styling on top of CSS which was dynamically loaded that too requires to be done after CSS loading completes. 如果要在动态加载的CSS上进行样式设置，则在CSS加载完成后也需要进行样式设置。 Using !DomReader in requirejs is a good option. 在requirejs中使用！DomReader是一个不错的选择。 Someday I will write a blog which will discuss these in depth. 有一天，我将写一个博客，深入讨论这些问题。

The smartness of minifying is there in requirejs as well. 最小化的智能性也存在于requirejs中。 requirejs optimizer 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