Including html fragments as modules
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.
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:
<!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.
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. Not good.
- Generally I've seen css being included in the head tag, and js in the end of the body. 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.
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.
2 answers
solution1
0 2013-04-17 10:17:19
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. Means your product.css/js should be removed from that and should be placed in your index.html or header .html for once
including same js for times may stop your javascript so make sure that they are not conflicting each other
solution2
0 2013-12-09 02:51:28
Use a javascript module system. Javascript AMD modules requirejs to load javascript increamently is a very good option. requirejs.org is a very good place to start.
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. Requirejs CSS plugin is also available.
Now once you start using this kind of system, the script loading happens asynchronously using javascript. So the scripts arrive a little late in the screen. Even the css arrives a little late. 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. If you are doing styling on top of CSS which was dynamically loaded that too requires to be done after CSS loading completes. Using !DomReader in requirejs is a good option. Someday I will write a blog which will discuss these in depth.
The smartness of minifying is there in requirejs as well. requirejs optimizer
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.