1

私はすでに、JSP ファイルから約 3500 行の JS および CSS コードを分解しました。

現在、1500 行を超えるコードを含む大きな html ファイルをクリーンアップして、機能を強化できるようにしています。このファイルをさらに分割して管理しやすくし、Web ページの構造を 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

タグをコントロールとテンプレートとして使用します。例：

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>

commentList.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ブロックメイクインコントロールを試してみましたが、このコントロールは他のページで使用できます
  • コントロール自体に他のコントロールがある場合があります
于 2012-08-07T01:59:39.847 に答える