怎样使用自定义标签简化 js、css 引入?

简介:

 前端引入 js 、css 一般是这样:

<script type="text/javascript" src="webContent 相对路径"></script>

<link type="text/css" href="webContent 相对路径" rel="stylesheet"/>  

   简化后的 js 、css 引入姿势:

<ct:script path="静态资源相对路径"/>

<ct:style path="静态资源相对路径"/>

   看起来是不是顺眼多了,自定义标签引入文件的方式,好处和扩展点还有很多,且听我慢慢道来。

   该自定义标签基于 jsp-api,要没使用过 jsp 的同学,其实也没必要往下翻了,都挺忙的对吧。

1. 继承 TagSupport 设计标签处理类

   

   javax.servlet.jsp.tagext.TagSupport  作为自定义标签核心关注类,实现了 IterationTag、Tag、JspTag 接口。

   在实现的这些接口中,有些表示状态的常量需要介绍一下,这样你的理解会更明亮。

int SKIP_BODY = 0; //跳过了开始和结束标签之间的代码
int EVAL_BODY_INCLUDE = 1;//需要处理标签体
int SKIP_PAGE = 5;//忽略剩下的页面
int EVAL_PAGE = 6;//继续输出下面的页面
int EVAL_BODY_AGAIN = 2;//反复执行所处的方法 

   配上我这活动图、接口方法、接口状态码,应该大体上明白 sun 底层对 jsp 标签整个处理流程了吧。

   像 struts 的 <s:> 标签系列、webwork 的<ww:> 标签系列、JSTL 的 <s:> 标签系列等等...都是在上述流程下做的扩展。

   好了,底层机制剖析结束,还是回归主题,继承 TagSupport 的自定义标签处理类如下。

复制代码
public class StyleTag extends TagSupport {
    private String path;

    public StyleTag() {
    }

    public int doEndTag() throws JspException {
        JspWriter writer = this.pageContext.getOut();
        String contextPath = this.pageContext.getRequest().getServletContext().getContextPath();
        try {
            if (StrUtil.isNotBlank(path)) {
                if (this.path.startsWith("/")) {
                    writer.write("<link rel='stylesheet' type='text/css' href='" + contextPath + "/static" + this.path + "'/>");
                } else
                    writer.write("<link rel='stylesheet' type='text/css' href='" + this.path + "'/>");
            }
        } catch (Throwable var9) {
            System.out.println("Output style Error:" + var9.getMessage());
        } finally {
            this.path = null;
        }
        return TagSupport.EVAL_PAGE;
    }

   //....getter/setter
}
复制代码

   我想做的事情比较简单,这里重写 doEndTag 方法就足够了,实际项目场景涉及复杂,这里就不进行描述了。

本文转自Orson博客园博客,原文链接:http://www.cnblogs.com/java-class/p/7615296.html,如需转载请自行联系原作者

2. 编写 tld 标签库定义

   当你想在 jsp 页面使用时还需要编写与后端处理类对应的 xml 标签定义。

复制代码
<?xml version="1.0" encoding="UTF-8"?>
<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
                            http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd" version="2.0">
    <description>核心标签库</description>
    <display-name>Core Tags</display-name>
    <tlib-version>1.1</tlib-version>
    <short-name>ct</short-name>
    <uri>http://com.rambo.spm/core/tags</uri>

    <tag>
        <description>简化js在页面的引入方式</description>
        <name>script</name>
        <tag-class>com.rambo.spm.core.tag.ScriptTag</tag-class>
        <body-content>JSP</body-content>
        <attribute>
            <description>js相对static的路径</description>
            <name>path</name>
            <required>true</required>
        </attribute>
    </tag>
    <tag>
        <description>简化css在页面的引入方式</description>
        <name>style</name>
        <tag-class>com.rambo.spm.core.tag.StyleTag</tag-class>
        <body-content>JSP</body-content>
        <attribute>
            <description>css相对static的路径</description>
            <name>path</name>
            <required>true</required>
        </attribute>
    </tag>
</taglib>
复制代码

   JSP 中引入方式:(上述标签详细属性和使用方法:http://blog.sina.com.cn/s/blog_76b2c4810101a8so.html)

<!-- 相对路径引入 -->
<%@ taglib prefix="ct" uri="/WEB-INF/tlds/core.tld" %>

<!-- 唯一 url 引入 -->
<%@ taglib prefix="ct" uri="http://com.rambo.spm/core/tags" %>

   OK,在理解底层的处理流程的前提下,具体项目具体场景都可以进行自定义标签的设计。

   设计标签的目的当然是简化前端、整合共有功能、加快项目推进,当然设计的好坏需要项目去沉淀和积累。

相关文章
|
8天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
16 4
|
6天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
11天前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
24 0
JS配合CSS3实现动画和拖动小星星小Demo
|
17天前
|
前端开发 JavaScript
uniapp动态修改css样式(通过js来修改css样式)
uniapp动态修改css样式(通过js来修改css样式)
|
25天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
22天前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
JavaWeb基础4——HTML,JavaScript&CSS
|
8天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
1月前
|
前端开发 JavaScript
JavaScript 动态更新 CSS
【9月更文挑战第01天】
16 2
|
2月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML、CSS与JavaScript之旅
在这个数字时代,拥有一个个性化的网络空间已成为许多人的梦想。本文将引导你了解如何从零开始,使用HTML、CSS和JavaScript创建属于自己的博客网站。我们将探索这些技术的基础概念,并通过实际代码示例展示如何将静态页面转变为动态交互式网站。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。【8月更文挑战第31天】