使用jQuery的data讀取標簽緩存數據(二)

因為使用 jQuery-1.7.2.js 版本,強制轉成 number 後與原來的字符串在數值上存在誤差。本來想使用1.11.2 版本的,可是發現頁面中很多基於低版本 jQuery 擴展的插件會報錯,這就尷尬瞭。

之後仔細查瞭下API,想出瞭兩種解決方式:

1. 使用 attr(key) 方法直接獲取放入的值,返回結果是字符串類型;

2. 因為 data(key) 返回類型有好幾種,嘗試將要緩存的數據進行封裝,封裝成字符串格式、數組格式或者對象格式(json)。

第1種方法就不細說瞭,這裡詳細說一下第2種方法。

先看 API 說明:

.data( key )

返回: Object

描述: 返回匹配的元素集合中的第一個元素的給定名稱的數據存儲的值。

通過.data(name, value)或HTML5 data-* 屬性設置

返回值轉換的過程:

每次嘗試將字符串轉換為一個JavaScript值(包括佈爾值(booleans),數字(numbers),對象(objects),數組(arrays)和空(null))。尤其是純數字的字符串,如果不改變值的表示,那麼該值將轉換為一個數字(number)。

“1E02”和“100.000”是等同於數字(數字值100),但將轉換它們會改變表示,所以保留為字符串。而字符串值“100”被轉換為數字100。

查看API

經過嘗試後發現可以使用數組格式([、])或者對象格式({、})對數據進行封裝。

這裡的數據是 jsp 頁面中用 jstl 標簽放入的值。

這是測試用的 jsp 頁面, jQuery 版本是 1.7.2

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery data 測試</title>
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
</head>
<body>
<c:set var="uuid" value="201612121641078700726"></c:set>
<p class="container" style="width:80%;margin:40px;auto">
    <p data-resourceuuid="${uuid}" >
    <a href="javascript:void(0);" onclick="testStr(this,1)">點擊測試</a> data-resourceuuid='"201612121641078700726"'</p>
    <p class="result-str1"></p><br/>
    <p data-resourceuuid='"${uuid}"' >
    <a href="javascript:void(0);" onclick="testStr(this,2)">點擊測試</a> data-resourceuuid='"201612121641078700726"'</p>
    <p class="result-str2"></p><br/>
    <p data-resourceuuid='[ "${uuid}" ]' >
    <a href="javascript:void(0);" onclick="testArray(this, 1)">點擊測試</a> data-resourceuuid='["201612121641078700726"]'</p>
    <p class="result-array1"></p><br/>
    <p data-resourceuuid='[ "${uuid}" , "123"]' >
    <a href="javascript:void(0);" onclick="testArray(this, 2)">點擊測試</a> data-resourceuuid='["201612121641078700726","123"]'</p>
    <p class="result-array2"></p><br/>
    <p data-resourceuuid="[ '${uuid}' ]" >
    <a href="javascript:void(0);" onclick="testArray(this, 3)">點擊測試</a> data-resourceuuid="['201612121641078700726']"</p>
    <p class="result-array3"></p><br/>
    <p data-resourceuuid="[ '${uuid}' , '123']" >
    <a href="javascript:void(0);" onclick="testArray(this, 4)">點擊測試</a> data-resourceuuid="['201612121641078700726','123']"</p>
    <p class="result-array4"></p><br/>
    <p data-resourceuuid='{"uuid":"${uuid}"}' >
    <a href="javascript:void(0);" onclick="testObj(this,1)">點擊測試</a> data-resourceuuid='["uuid":"201612121641078700726"]'</p>
    <p class="result-obj1"></p><br/>
    <p data-resourceuuid='{uuid:"${uuid}"}' >
    <a href="javascript:void(0);" onclick="testObj(this,4)">點擊測試</a> data-resourceuuid='[uuid:"201612121641078700726"]'</p>
    <p class="result-obj4"></p><br/>
    <p data-resourceuuid="{'uuid':${uuid}}" >
    <a href="javascript:void(0);" onclick="testObj(this,2)">點擊測試</a> data-resourceuuid="{'uuid':201612121641078700726}"</p>
    <p class="result-obj2"></p><br/>
    <p data-resourceuuid="{uuid:${uuid}}" >
    <a href="javascript:void(0);" onclick="testObj(this,3)">點擊測試</a> data-resourceuuid="{uuid:201612121641078700726}"</p>
    <p class="result-obj3"></p><br/>
</p>
        <script type="text/javascript">
            function testStr(obj,index){
                var resourceid = $(obj).parent().data("resourceuuid");
                $("p.result-str"+index).text("resourceuuid="+resourceid+", type ="+ typeof resourceid);
            };
            function testArray(obj,index){
                var resourceid = $(obj).parent().data("resourceuuid");
                var msg = "resourceuuid="+resourceid+", type ="+ typeof resourceid;
                if(Array.isArray(resourceid))
                msg="resourceuuid="+resourceid+", type ="+Object.prototype.toString.call(resourceid) +", resourceuuid[0]="+resourceid[0];
                $("p.result-array"+index).text(msg);
            };
            function testObj(obj,index){
                var resourceid = $(obj).parent().data("resourceuuid");
                var msg = "resourceuuid="+resourceid+", type ="+ typeof resourceid;
                if(typeof resourceid === "object")
                msg="resourceuuid="+resourceid+", type ="+ typeof resourceid+", resourceuuid.uuid="+resourceid.uuid;
                $("p.result-obj"+index).text(msg);
            };
        </script>
</body>
</html>

點擊後,頁面顯示內容:

點擊測試 data-resourceuuid=‘“201612121641078700726”’
resourceuuid=201612121641078700000, type =number

點擊測試 data-resourceuuid=‘“201612121641078700726”’
resourceuuid=”201612121641078700726”, type =string

點擊測試 data-resourceuuid=’[“201612121641078700726”]’
resourceuuid=201612121641078700726, type =[object Array], resourceuuid[0]=201612121641078700726

點擊測試 data-resourceuuid=’[“201612121641078700726”,”123”]’
resourceuuid=201612121641078700726,123, type =[object Array], resourceuuid[0]=201612121641078700726

點擊測試 data-resourceuuid=”[‘201612121641078700726’]”
resourceuuid=[ ‘201612121641078700726’ ], type =string

點擊測試 data-resourceuuid=”[‘201612121641078700726’,’123’]”
resourceuuid=[ ‘201612121641078700726’ , ‘123’], type =string

點擊測試 data-resourceuuid=’[“uuid”:”201612121641078700726”]’
resourceuuid=[object Object], type =object, resourceuuid.uuid=201612121641078700726

點擊測試 data-resourceuuid=’[uuid:”201612121641078700726”]’
resourceuuid={uuid:”201612121641078700726”}, type =string

點擊測試 data-resourceuuid=”{‘uuid’:201612121641078700726}”
resourceuuid={‘uuid’:201612121641078700726}, type =string

點擊測試 data-resourceuuid=”{uuid:201612121641078700726}”
resourceuuid={uuid:201612121641078700726}, type =string

註意:

使用 data-* 緩存數據,並將數據賦值時:

在進行數組格式賦值,最外層用單引號 (”) 包裹,數組元素應雙引號 (“”) 包裹字符串;

在進行對象格式賦值時,外層用單引號 (”) 包裹,裡面的key應用雙引號 (“”) 包裹,value 為 string 類型是用雙引號包裹;

在進行字符串格式賦值時,1.7.2 版本能轉換 number 時會強制轉換 number,可能會出現誤差,用高版本(1.11.2)則沒問題。低版本參照上面兩條進行轉換或使用 attr 獲取 string 類型數據。

發佈留言