前端开发记录小记

目录

 

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>
    <!-- 将对象format成json字符串 -->
    <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>
			<!-- 配置标签的引用地址 JSP页面中引用时使用-->
			<taglib-uri>mobai.com/el-common</taglib-uri>
			<!-- 配置标签的TLD文件地址 -->
			<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 href="javascript:toDetail();" aflag=''></a>

当点击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;
}

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