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

国庆将至,工作兴致全无,来总结点项目里平时不起眼干货。

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

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

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

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

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

<fnc: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 方法就足够了,实际项目场景涉及复杂,这里就不进行描述了。

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>JSTL functions core</display-name>
    <tlib-version>1.1</tlib-version>
    <short-name>fnc</short-name>
    <uri>http://com.rambo.spm/core/tags</uri>

    <tag>
        <description>简化css在页面的引入方式</description>
        <name>style</name>
        <tag-class>com.rambo.spm.core.tag.StyleTag</tag-class>
        <body-content>empty</body-content>
        <attribute>
            <description>css相对static的路径</description>
            <name>path</name>
            <required>true</required>
            <rtexprvalue>true</rtexprvalue>
        </attribute>
    </tag>
</taglib>

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

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

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

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

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

时间: 2024-10-24 07:29:55

怎样使用自定义标签简化 js、css 引入?的相关文章

【html】【2】html引入外部文件js css

1>引入js 我们只是写了简单必须的html标签,从未给标签添加点击事件,这次页面添加事件. >写入html页面,可以在<head>标签内  也可以在<body>标签内 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>小娜娜</title> 5 <script type="text/javascript"> 6 document.writ

css js 的引入方式和书写位置

css 的引入方式 1.行内样式 <div id="div1" style="width:100px; height:100px; background:red"></div> 2.内嵌(写在head标签内) <head>     <style>   #div1{ width:100px; height:100px; background:red; } </style> </head> 3.外联

iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项目,需要一个webView,同时这个webView会需要引入一些项目中的资源: 一个本地的html文件,作为webView的模板 两张loading图片,在图片未加载的时候进行占位 jquery.js,scrollLoading.js 也是本地的,实现滚动加载图片功能 然后就开始了漫长的Google历程. 在w

使用原生js创建自定义标签

使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA

[Yii2] 快速套模板,加载JS,CSS(HTML标签&lt;base&gt;)

刚开始学,弄了好久,不知道怎么加载JS.CSS,以及怎么不加载YII2自带的模板!其实真的好简单! 首先把模板放好位置, 加载JS,CSS,就在模板HTML页面加个标签:<base> base 标签的链接到JS,CSS的位置就好了,其他都不用动! <base>这个标签其实就是HTML默认打开方式与默认链接URL地址标签元素,详细了解base就在我文章里找吧! 上面弄完后,就差YII2自带的怎么去掉了,就是渲染的时候用renderPartial render和renderPartia

iOS项目中如何正确引入Html5文件(html/js/css)

iOS项目中使用项目中的html js css 文件时,有时会遇到引用路径出错的问题,导致html js css image文件无法加载的情况. 那么,引入H5相关文件的正确操作方式如下,这样就不会出现资源文件无法引入并正常使用的情况: 1 在项目目录下创建存放Html5文件文件夹:H5 2 将文件夹H5拖放至项目中对应的位置,此处注意要选择:Create groups 3 将各种Html5文件(html js css image等)拖放到H5文件夹中,此处注意选择:Create folder

xcode,在webView中引入本地html,image,js,css文件的方法

http://www.shuizhongyueming.com/2014/01/load-local-image-js-css-file-to-webview-in-xcode/ xcode,在webView中引入本地html,image,js,css文件的方法

ssm 整合中js,css 文件无法引入

问题:ssm 整合中第三方 js,css 文件无法引入 检查:ssm 整合配置完好 无拦截器拦截 spring mvc  静态资源已配置 编译时可以直接跳转到js  css 问题发现 js  css 文件放在WEB-INF 下,导致无法引入 解决 js  css 文件放在webapp 下,可以引入 原文地址:https://www.cnblogs.com/jsbk/p/9461374.html

web项目中关于引入JS/css文件, 浏览器console出现 net::ERR_ABORTED错误的解决方法

如图错误: 引入js/css后,控制台出现的错误! 我的错误则是因为在静态文件夹下的原因. 解决:如果要放在webRoot下的静态(static)文件夹下,需要在springMvc的配置文件中添加上注解(<mvc:default-servlet-handler/>)和(<context:annotation-config></context:annotation-config>),如果有(<context:component-scan />),则不需要第二条