ホームページ > ウェブフロントエンド > htmlチュートリアル > JSPテンプレート継承機能実装_html/css_WEB-ITnose

JSPテンプレート継承機能実装_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:42:27
オリジナル
1164 人が閲覧しました

背景

私は最近新しい会社に入社したばかりで、その新しい会社のプロジェクトを閲覧したところ、プロジェクト内の JSP ページのほとんどが独立した完全なページであることがわかり、多くのページに次のコードが繰り返されています。新しいページを追加するたびに、上記のコードをコピーする必要があり、また、各ページに共通のヘッダー ファイルとテール ファイル (header.jsp、footer.jsp など) を繰り返し導入する必要があります。 。 。

この開発方法については、反復的な作業負荷については詳しく説明しません。より重要な問題は、このアーキテクチャ方法が将来的にはメンテナンスの作業負荷が増加し、さらにはバグのリスクが発生する可能性があるということです。

2 つの「栗」:

将来の開発プロセスで一部のパブリック スクリプト (オンライン カスタマー サービス アイコン、GA 分析スクリプトなど) をグローバルに導入または削除する必要がある場合は、jQuery バージョンを変更し、DocType タイプを次のように変更します。 HTML5タイプなどはお待ちください。同様の要件を完了するには、JSP ファイルを 1 つずつ変更する必要があり、作業負荷はプロジェクト内の JSP ファイルの数に比例します。


さらに厄介な問題は、上記のグローバル操作の場合、コードがすべてのページで有効であるかどうかを手動検査で保証できないことです。ハハ...
解決策

実際、中心的な問題は、すべての JSP ページが独立して動作し、一部のグローバル情報を維持するための統一されたパブリック テンプレートがないことです。そこで、以前の実装を紹介します。計画:
  • JSP ファイルのテンプレート機能を実装し、全ページに共通のテンプレートを導入します。
  • パブリック パーツの情報はテンプレート内で直接維持され、変数パーツはテンプレート内でプレースホルダーを定義し、さまざまなページの多様性を維持するためにページによって書き換えられます。

    1. テンプレートを用意したら、次のようにページを書くことができます:
    この書き方の利点は明白です:

    まず、ページの構造が一目でわかります。ページを作成すると、コンテンツ以外の公開部分に注意を払う必要がなくなり、コピーコードの作業負荷が大幅に軽減され、エラー率も削減されます

    次に、公開スタイル、スクリプトなどがテンプレートに導入され、統合調整を容易にする

    テンプレートの内容はおそらく次のようになります:
  • 実装原則
  • 実装原則は実際には非常に単純で、テンプレート関数です。実装は主に 2 つのカスタム タグです (カスタム タグの開発手順についてはここでは説明しません)。

    BlockTag

    このタグは主に、テンプレート ファイル内の対応するモジュールを定義するために使用されます (プレースホルダーと見なすことができます)。JSP ページをレンダリングするときに、タグで定義された位置は、ページの書き換えられたコンテンツに置き換えられます。置換中、タグの name 属性とキー値としての特定のプレフィックスに基づいて、コンテンツがリクエストの属性から読み取られます。

    <%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.Calendar"    pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %><%@ taglib uri="/common-tags" prefix="m"%><c:set var="ctx" value="${pageContext.request.contextPath}"></c:set><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"/><title>${webModule.module.name} ---xxxx</title><meta name="keywords" content="xxxx"/><meta name="description" content="xxxx"/><link rel="stylesheet" href="${ctx}/css/web-bbs.css"/><link rel="stylesheet" href="${ctx}/css/page.css"/><script type="text/javascript" src="${ctx}/js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="${ctx}/js/bbs.js"></script><script type="text/javascript" src="${ctx}/js/webUtil.js"></script><script type="text/javascript" src="${ctx}/js/index.js"></script><script type="text/javascript" src="${ctx}/js/faces.js"></script>
    ログイン後にコピー

    OverwriteTag

    このタグは主に、最終ページのテンプレート内の対応するモジュールを書き換えるために使用され、ページがレンダリングされるときに、タグ内のコンテンツが現在のリクエストの属性に書き込まれます。タグには、必須パラメータの name 属性がコンテンツのキー値として使用されます。この name 属性は、テンプレート内で書き換えられる対応するブロックの name 値と同じである必要があります。

    /** * 自定义标签,用于在Jsp模板中占位 *  * @author 逆风之羽 * */public class BlockTag extends BodyTagSupport {    /**     * 占位模块名称     */    private String name;    private static final long serialVersionUID = 1425068108614007667L;        @Override    public int doStartTag() throws JspException{        return super.doStartTag();                    }        @Override    public int doEndTag() throws JspException {        ServletRequest request = pageContext.getRequest();        //block标签中的默认值        String defaultContent = (getBodyContent() == null)?"":getBodyContent().getString();                String bodyContent = (String) request.getAttribute(OverwriteTag.PREFIX+ name);        //如果页面没有重写该模块则显示默认内容        bodyContent = StringUtils.isEmpty(bodyContent)?defaultContent:bodyContent;        try {            pageContext.getOut().write(bodyContent);        } catch (IOException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }                // TODO Auto-generated method stub        return super.doEndTag();    }     public String getName() {        return name;    }    public void setName(String name) {        this.name = name;    }}
    ログイン後にコピー

    概要と展開

    すべてのページでテンプレートを使用すると、多くのページの公開情報がブロックされるため、日々のページ開発がより効率的になり、エラー率が減ります。

    JSP はネイティブではテンプレート メカニズムをサポートしていませんが、いくつかのトリックと 2 つのカスタム タグを使用するだけでテンプレート機能を実現でき、多くの繰り返し作業を軽減できます。したがって、仕事のプロセスにおける問題点は、多くの場合、個人の成長の機会でもあります。
      上記のデモでは、base_template.jsp テンプレートを定義しただけですが、実際のシナリオでは、Web サイトにはさまざまなレイアウト スタイルのページが多数ある可能性があるため、現時点では 1 つのテンプレートでは明らかに多様なレイアウト要件を満たすことができません。テンプレートをベース、コモン、チャネルの 3 つのレベルに定義します。抽象化レベルは、チャネル -> コモン -> ベースの継承関係を実現するために、対応するチャネルを導入するだけで済みます。テンプレートで十分ですが、特定の抽象化は実際のシナリオに応じて異なる方法で処理する必要があります。

    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート