数据属性检索和解析javascript

Question

我是JavaScript编程新手，我坚持数据属性检索。

以下链接是使用jQuery

store and retrieve javascript arrays into and from HTML5 data attributes

的人，我希望做同样的香草JS有点有用。借助自定义数据属性，我想创建对象&数组。

<div id="getAnimation" 
data-r="564" 
data-c="96" 
data-custom="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75; skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" 
data-s="700" 
data-st="1400" 
</div> 

Do HTML5 custom data attributes “work” in IE 6?

上面的链接有助于获取数据的属性非常好，但怎么能过滤数据，自定义字符串或直创建数据的自定义的对象。

如果有人知道一个图书馆要做到这一点，请让我知道

Answer 1

这个特别的例子是相当简单：它是一个系列名称：用分号分隔值对。因此，您可以使用split获得一组数字对，然后再次使用split获取名称和有效分隔符。如果你想创建一个使用这些名称和值的对象的属性，你可以做，用括号注释：

// Get the value 
var val = theElement.getAttribute("data-custom"); 

// Split it into fields on `;` (with optional whitespace on either side) 
var fields = val.split(/\s*;\s*/); 

// Create a blank object 
var obj = {}; 

// Loop through the fields, creating object properties: 
fields.forEach(function(field) { 
    // Split the field on :, again with optional whitespace either side 
    var parts = field.split(/\s*:\s*/); 

    // Create a property on the object using the name, and assigning the value 
    obj[parts[0]] = parts[1]; 
}); 

我使用String#split那里，给它一个正则表达式来告诉它的分裂的串。

在生成的对象中，仅使用上面的代码，属性值将全部为字符串。例如，obj.scaleX将是字符串"0.75"。如果你需要他们的号码，你可以将它们转换为数字的任何几种方式：

• parseFloat，将尽可能多的字符转换，因为它可以，但忽略尾随字符。所以parseFloat("0.75foo")是0.75，不是错误。

• Number，这将不耐受样parseFloat，Number("0.75foo")是NaN，不0.75。

• 应用任何数学运算符，一元+是常见的：+"0.75"是0.75。

因此而不是仅仅抓住值作为字符串，我们可以检查，看他们的样子，他们可能是数字，如果是将它们转换：

// Loop through the fields, creating object properties: 
fields.forEach(function(field) { 
    // Split the field on :, again with optional whitespace either side 
    var parts = field.split(/\s*:\s*/); 

    // Does the value look like a number? 
    if (/(?:^\d+$)|(?:^\d+\.\d+$)/.test(parts[1])) { 
     // Yes 
     obj[parts[0]] = +parts[1]; 
    } 
    else { 
     // No 
     obj[parts[0]] = parts[1]; 
    } 
}); 

，它假定.作为小数点分隔符，并假设不会有千位分隔符。

---

边注：上面我用Array#forEach，这是一个ES5功能，不存在对旧的浏览器。尽管如此，forEach可以在旧版浏览器上“闪光”。你可以看到通过数组循环的各种方法in this answer here on SO。

Answer 2

这里有几个快捷功能可以让您存储，检索和任何JSON-能够数据删除对数据属性

function setData(node, data_name, data_value) { 
    node.dataset[data_name] = JSON.stringify(data_value); 
} 

function getData(node, data_name) { 
    return JSON.parse(node.dataset[data_name]); 
} 

function delData(node, data_name) { 
    return delete node.dataset[data_name]; 
} 

然后写一个阵列到#getAnimation在数据香味

// variables to use 
var elm = document.getElementById('getAnimation'), 
    foo = [1, 2, 3, 'a', 'b', 'c']; 
// store it 
setData(elm, 'fizz', foo); 
// retrieve it 
var bar = getData(elm, 'fizz'); 
// look what we have 
console.log(bar); // [1, 2, 3, "a", "b", "c"] 

需要IE 11+因为我用node.dataset，如果你改变这方法node.setAttribute，node.getAttribute和node.removeAttribute所使用的需求降到IE 8+因为JSON.stringify和JSON.parse