Question

我已经考虑了大约3500行JS＆amp;来自JSP文件的CSS代码。

我目前正在清理一个包含超过1500行代码的大型html文件，以便我可以对该功能进行一些增强。如何进一步分解此文件以使其易于管理并使网页结构在jsp文件中可见？

Answer 1

使用您正在使用的任何IDE的“源代码格式化”功能。几乎所有IDE都具有此功能。它将为您提供结构，因为它会根据元素的嵌套方式缩进源代码。你提到你有1500行代码。我猜你有很多样式是为每个元素内联定义的。在css文件中创建新类并将它们分配给元素以将样式与页面结构分开。在浏览器中启动页面并使用firebug或chromes开发人员工具来“挖掘”主要结构，如导航，版权信息，联系人通知，等等等等。如果您使用任何后端技术（如jsp），请将站点的常用元素的HTML保存为单独的文件。例如，您的导航部分可能会另存为navigation.html，并将其包含在所需文件中，例如：

<?(some jsp tag to include that file here because I do not know jsp);
 ?>

Answer 2

我使用我的标签作为控件和模板，例如：

masterPage.tag 文件 - 一般网站模板

<%@ tag description="page template" pageEncoding="utf-8" %>    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title>${title} | ${app.servName}</title>

        <link href="${app.staticUrl}/css/general.css${v}"     rel="stylesheet"     type="text/css" />
    </head>
    <body>  
        <jsp:doBody />
    </body>
</html>

comments.jsp - 包含评论列表的页面（使用masterPage.tag作为模板，使用commentsList.tag作为控件）

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="utd" tagdir="/WEB-INF/tags/templates/default" %>
<%@ taglib prefix="uc" tagdir="/WEB-INF/tags/controls/" %>

<utd:masterPage>
    <div class="post-comments">
        <uc:commentsList comments="${post.comments}" />
    </div>
</utd:masterPage>

<jsp:doBody>将在主页中替换为<utd:masterPage>

中的内容

commentsList.tag - 控制，呈现评论，在多个地方使用

<%@ tag description="render comments" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ attribute name="comments" required="true" type="java.util.List" description="comments list" %>

<c:if test="${not empty comments}">
    <ul class="comments">
        <c:forEach items="${comments}" var="comment" varStatus="i">
            <li>
                <div class="comments-text">
                    ${comment.friendlyCreateDate} 
                    <p>
                        ${comment.text}
                    </p>
                </div>
            </li>
        </c:forEach>
    </ul>
</c:if>

我尝试使用逻辑html块make in control，此控件可用于其他页面
控件本身可能有其他控件

你如何组织一个大的html文件？

2 个答案: