组件的html怎么进行管理

最新推荐文章于 2024-07-28 23:00:22 发布

melody_day

最新推荐文章于 2024-07-28 23:00:22 发布

阅读量723

点赞数

Web组件化中HTML、CSS和JS资源的管理

(2010-03-14 14:06:24)

转载▼

标签：

杂谈

　　有时个为了提高设计的重用性，我们会把一些页面内容(如个人信息、好友列表、文章列表，订阅信息等)设计成组件的形式，这样在不同的页面添加这些资源的时候就非常简单了，只需要做简单的include就行了。例如：
<%@ includefile=”xxx.jsp”%>
<jsp:include page=”yyy.jsp”flush=”true”/>
其中xxx.jsp文件通常是静态文件，也即内容是固定的；yyy.jsp通常是动态文件，内容通常是动态生成的。

　　但是通常这个web组件又依赖于特定的.js文件和.css文件。对于.js文件倒还好说，因为它可以出现在web页面的任意标签之中。因此你可以在xxx.jsp或者yyy.jsp中加入
<script type="text/javascript"src="zzz.js"></script>
来导入JS文件。

　　但对于.css文件就没有那么简单了，因为XHTML标准规定
<link href="CSS/zzz.css"rel="stylesheet" type="text/css" />
必须出现在<head>标签之中，而通常情况下xxx.jsp和yyy.jsp是没有<head>标签的。一个解决方案就是没整站创建一个包含所有样式的.css文件，但这样就会导致超量定义，使该文件过大，浪费用户带宽和浏览器资源。

　　我们这里推荐使用另一个解决方案，即通过Javascript操作DOM的方法动态往<head>标签中添加样式表文件。在xxx.jsp或者yyy.jsp中添加如下内容：
<script type="text/javascript">
function addStylesheet(href, rel, type) {
    rel = "stylesheet";
    type = "text/css";
    var link = document.createElement("link");
    link.href = href;
    link.rel = rel;
    link.type = type;
   document.getElementsByTagName_r("head")[0].appendChild(link);
}
addStylesheet("xxx.css");
<script>

　　这样你就可以在主页面中能过一行include就可以加入你的web组件内容了，这也算是一种web widget技术吧。

　　当然，对于多个组件可能会重复使用的CSS或者JS资源，建议在调用页面只include一次，这样会减少资源的浪费和重复定义。另外，通过分解后，虽然资源的可定制化程度提高了，但会引入更多的文件，而每个文件又会引入一个HTTP请求，实际中应当酌情权衡。通常情况下是这样处理，一个站点通常会有一些common的.css文件和.js库文件，在所有页面中都会include这些通用的资源。然后，每个组件再在这个基础上定义自己特殊的CSS样式和JS脚本。