1

我已经从一个 JSP 文件中提取了大约 3500 行 JS 和 CSS 代码。

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

4

2 回答 2

1

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

<?(some jsp tag to include that file here because I do not know jsp);
 ?>
于 2012-08-06T17:52:14.967 回答
0

i use my tags as controls and templates, for example:

masterPage.tag file - general site template

<%@ 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 - page with comments list(used masterPage.tag as template and commentsList.tag as controls)

<%@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> will be replaced in master page with content in <utd:masterPage>

commentsList.tag - control, rendering comments, used in several places

<%@ 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>
  • i try logic html block make in control, this control may be used in other page
  • controls may in itself have other controls
于 2012-08-07T01:59:39.847 回答