在dom元素中存储数据的最佳实践(1 json或多个数据属性)

I have a list of 4 articles (with small photo) and a place for 1 article with a bigger photo. When I click an article I will use javascript to display that small article in the big place.

我有一张四篇文章的列表(小照片)和一篇大照片的地方。当我点击一篇文章时，我将使用javascript在大地方显示那篇小文章。

To display the the article with bigger photo there are 3 things I have to know of the article: title, detailUrl and photoUrl (of the bigger photo), I want to catch this with javascript.

要显示带有大照片的文章，我必须了解文章的三个方面:标题、详细url和photoUrl(大照片)，我想用javascript捕捉到这一点。

Methode 1: using jQuery .find() to search the DOM

方法1:使用jQuery .find()搜索DOM

$("#small").find('img').attr('src');

Methode 2: storing everything in seperate data attributes:

方法2:将所有数据存储在分离的数据属性中:

data-title="titel1" data-detailurl="article1.html"

Methode 3: Storing a JSON string

方法3:存储JSON字符串

data-json="{ "title": "titel1", "detailurl": "article1.html" }"

I think the 3th methode is the best (fastest?). Is that right?

我认为第3种方法是最好的(最快的?)是这样吗?

Here the html: http://jsfiddle.net/kHbZU/

html:http://jsfiddle.net/kHbZU/

3 个解决方案

#1

Method three is easiest to work with of the ones you listed. Don't worry about the efficiency of string conversion. You'd have to have millions of articles for that to make a real difference. Keep in mind that if you are building this HTML on the server, the JSON will have to be encoded for the HTML to be valid. You can base-64 encode with .btoa()/.atob() to do this easily. If the .dataset property is used to set the data on the DOM, the DOM takes care of storing it properly as an object.

方法3是最容易使用的方法之一。不要担心字符串转换的效率。你必须要有上百万的文章才能产生真正的不同。请记住，如果您正在服务器上构建这个HTML，那么必须对JSON进行编码，使HTML有效。您可以使用.btoa()/.atob()对base-64进行编码，以轻松实现这一点。如果.dataset属性用于在DOM上设置数据，DOM就会负责将其正确地存储为对象。

A fourth option is to use a <pre> block with display: none;. This works well if you're building your list on the server. I use this method on the tumblr theme I wrote, http://stiff-theme.tumblr.com/, because I had very little control over the server output. You can leave your JSON unencoded and convert it to to an object easily with $.parseJSON().

第四个选项是使用

块并显示:none;。如果您正在服务器上构建列表，那么这将很好地工作。我在我写的tumblr主题http://stiff-theme.tumblr. tumblr.com/上使用了这个方法，因为我对服务器输出几乎没有控制。您可以不对JSON进行编码，并使用$. parsejson()轻松地将其转换为对象。

HTML:

HTML:

<pre>
    { "title": "titel1", "detailurl": "article1.html" } 
</pre>

Script:

脚本:

var articles = $.parseJSON( $( 'pre' ).text() );

A fifth method is to just use HTML markup and CSS to style. Create your markup of the large version of your article that contains everything. Then use a class to hide, resize, and position for your smaller list display. I like this method best for the problem you're trying to solve.

第五种方法是使用HTML标记和CSS样式。创建包含所有内容的大型文章版本的标记。然后使用一个类来隐藏、调整大小和定位较小的列表显示。我最喜欢这种方法来解决你要解决的问题。

Demo: http://jsfiddle.net/ThinkingStiff/ngE8s/

演示:http://jsfiddle.net/ThinkingStiff/ngE8s/

HTML:

HTML:

<ul id="articles">
    <li>
        <article>
            <img src="large-image-url.png">
            <h1>Title</h1>
            <section>
                <p>article body</p>
                ...

            </section>
        </article>
    </li>
    ...

</ul>

<div id="display"><div>

CSS:

CSS:

#articles {
    display: inline-block;
    list-style-type: none;
    padding: 0;
    margin: 0;
    vertical-align: top;
    width: 200px; 
}

#articles li {
    border-bottom: 1px solid lightgray;
    cursor: pointer;
    display: block;  
    height: 32px;
    overflow-y: hidden;
}

#articles img {
    float: left;
    height: 30px;
    margin-right: 4px;
    width: 30px;    
}

#articles h1 {
    font-size: 13px;
    margin: 0;
}

#display {
    display: inline-block;
    vertical-align: top;
    width: 400px;
}

#display img {
    float: left;
    height: 150px;
    margin-right: 8px;
    width: 150px;    
}

#display h1 {
    margin: 0;    
}

p {
    font-size: 18px;
}

Script:

脚本:

document.getElementById( 'articles' ).addEventListener( 'click', function( event ) {
    var article = event.target.closestByTagName( 'article' );

    if( article ) {
        var display = document.getElementById( 'display' ),
            large = article.cloneNode( true );
        display.removeChild( display.firstChild );
        display.appendChild( large );
    };
}, false );

Element.prototype.closestByTagName = function ( tagName ) {
    return this.tagName && this.tagName.toUpperCase() == tagName.toUpperCase()
        ? this
        : this.parentNode.closestByTagName && this.parentNode.closestByTagName( tagName );
};

Output:

输出:

#2

What about jQuery.data ?

jQuery是什么。数据?

I think it is better then all options.

我认为这比所有的选择都好。

    $.data(document.body, "sortElement", "0"); //set value
    $.data(document.body, "sortElement");        //read value

#3

Best way would be to use data-xxx attributes. That's what it's meant for.

最好的方法是使用data-xxx属性。这就是它的意义。

Just remember you can't use non-utf8 characters in data-xxx attributes. If it's too much data, or content data, I suggest to store an idreference like

请记住，在数据xxx属性中不能使用非utf8字符。如果有太多的数据或内容数据，我建议像idreference一样存储

<img data-content="#description"/>

and have a

和有一个

<p id="#description">some more content with &aacute;ccents</p>

Hope it adds to the question.

希望它能增加问题。

Greetings, Bart.

问候,巴特。