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

Question

我有一个包含 4 篇文章(带有小照片)的列表和一个可以放置 1 篇带有较大照片的文章的位置。当我点击一篇文章时，我将使用 javascript 在大的​​地方显示那篇小文章。

要显示带有更大照片的文章，我必须知道文章的 3 件事:标题、detailUrl 和 photoUrl(大照片的)，我想用 javascript 捕捉它。

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

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

方法 2:将所有内容存储在单独的数据属性中:

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

方法三:存储一个JSON字符串

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

我认为第三种方法是最好的(最快的？)。是吗？

这里是 html:http://jsfiddle.net/kHbZU/

Answer 1

在您列出的方法中，方法三最容易使用。不用担心字符串转换的效率。您必须拥有数百万篇文章才能真正发挥作用。请记住，如果您在服务器上构建此 HTML，则必须对 JSON 进行编码以使 HTML 有效。您可以使用 .btoa()/.atob() 进行 base-64 编码轻松做到这一点。如果.dataset属性用于在 DOM 上设置数据，DOM 负责将其正确存储为对象。

第四种选择是使用 <pre>用 display: none; block .如果您在服务器上构建列表，这会很有效。我在我写的 tumblr 主题上使用了这个方法，http://stiff-theme.tumblr.com/ ，因为我几乎无法控制服务器输出。您可以不对 JSON 进行编码，并使用 $.parseJSON() 轻松将其转换为对象。 .

HTML:

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

脚本:

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

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

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

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:

#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;
}

脚本:

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 );
};

输出: