前端开发记录小记

Dear 丶 2022-04-10 02:23 255阅读 0赞

**目录**

1.自定义jstl标签

问题描述：

1.1 编写tld文件

1.2 配置web.xml

1.3 具体使用

2.html的自定义属性

问题描述

2.1 任意自定义

2.2 绑定对象

--------------------

# 1.自定义jstl标签 #

## 问题描述： ##

在使用jsp进行开发的时候，jstl标签的使用可以极大的提升开发效率。有一个需求是需要在<c:forEach>中对每一个循环的结果记录进行java对象转换成json字符串。然后将字符串复制给一个a标签的自定义属性上，然后再在js中获取并操作。这个对象是一个java对象，不能直接在js中操作，也无法通过JSON.stringify进行转换，因为目标参数要求的是js对象。这种情况下，我们就可以使用自定义jstl标签。我们的目标是将对象转换成json字符串。

## 1.1 编写tld文件 ##

文件名为：mobai-el-common.tld

<?xml version="1.0" encoding="UTF-8"?>
    <taglib xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd" version="2.1">
    
        <tlib-version>1.0</tlib-version>
        <short-name>el</short-name>
        
        <function>
            <name>toJsonString</name>
    
            <function-class>com.tydic.emoitor.utils.CommTool</function-class>
            <function-signature>String toJsonString(java.lang.Object)</function-signature>
    
            <description>将对象format成json字符串</description>
            <example>${el:toJsonString(value)}</example>
        </function>
    </taglib>

将tld文件放置到WEB-INF/tld目录下，CommTool中的toJsonString方法就不再写了，就是java把对象转换为json的普通代码。

## 1.2 配置web.xml ##

web.xml中，在和filter同级下新增taglib的配置说明，代码如下：

<jsp-config>
    		<taglib>
    			
    			<taglib-uri>mobai.com/el-common</taglib-uri>
    			
    			<taglib-location>/WEB-INF/tld/mobai-el-common.tld</taglib-location>
    		</taglib>
    </jsp-config>

## 1.3 具体使用 ##

在需要用的地方，直接使用：

${el:toJsonString(item.sub_list)}

这就搞定了。

# 2.html的自定义属性 #

## 问题描述 ##

有时候，我会想把更多的数据捆绑到dom元素上，当进行其他操作时候，不用重新请求后端接口，而是直接使用这些元素，例如：查询列表的以及详情展示，我希望在列表中的一个记录，点击详情的时候，直接展示详情，而不用再重新请求接口。这时候就可以使用html的自定义属性。

## 2.1 任意自定义 ##

给a标签添加aflag的标签

当点击a标签的时候，我们使用如下代码获取aflag里的内容：

$(this).attr('aflag');

获取到的内容是字符串，转换成js对象尽情的使用吧。

## 2.2 绑定对象 ##

我们想绑定复杂对象怎么办？我们可以在js中直接拼接html代码，对a标签的aflag让其直接等于js对象，但是你会发现通过attr取出来的内容是不能用的。这时候就涉及到对象、字符串的互转了。

通过下面方式进行将js对象转换给json字符串。

var str = JSON.stringify(data) ;//对象json字符串
    var data = eval('(' + str + ')');//字符串转对象
    var data = JSON.parse(data); //字符串转对象

将js对象转换成json字符串，切记：

在给a标签拼接aflag的时候，要注意双引号和单引号，默认情况下，属性都是双引号，但是aflag要使用单引号，例如：

function getAdom(data){
        var str = JSON.JSON.stringify(data);
        var rstr = '<a href="xxx.html" class="dem" aflag='+"'"+str+"'"+'></a>';
        return rstr;
    }

这里进行拼接时候，很容易出错，要注意。