Лучшая практика хранения данных в элементе dom (1 json или несколько атрибутов данных)

У меня есть список из 4 статей (с маленькой фотографией) и место для 1 статьи с большей фотографией. Когда я нажимаю на статью, я буду использовать javascript для отображения этой маленькой статьи на большом месте.

Чтобы отобразить статью с большей фотографией, есть 3 вещи, которые мне нужно знать о статье: title, detailUrl и photoUrl (из большей фотографии), я хочу поймать это с помощью javascript.

Метод 1: использование jQuery.find() для поиска DOM

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

Methode 2: сохранение всего в отдельных атрибутах данных:

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

Метод 3: Сохранение строки JSON

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

Я думаю, что 3-й метод - лучший (самый быстрый?). Правильно ли это?

Здесь html: http://jsfiddle.net/kHbZU/

Ответ 1

Метод три проще всего работать с теми, которые вы указали. Не беспокойтесь об эффективности преобразования строк. Для этого вам придется иметь миллионы статей, чтобы иметь реальное значение. Имейте в виду, что если вы создаете этот HTML-код на сервере, JSON должен быть закодирован, чтобы HTML был действительным. Вы можете использовать base-64 с .btoa()/.atob(), чтобы сделать это легко. Если свойство .dataset используется для установки данных в DOM, DOM позаботится об их правильном хранении в качестве объекта.

Четвертый вариант - использовать блок <pre> с display: none;. Это хорошо работает, если вы создаете свой список на сервере. Я использую этот метод в теме tumblr, которую я написал, http://stiff-theme.tumblr.com/, потому что у меня был очень небольшой контроль над выходом сервера. Вы можете оставить свой JSON незакодированным и легко преобразовать его в объект с помощью $.parseJSON().

HTML:

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

Script:

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

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

Вывод:

Ответ 2

Как насчет jQuery.data?

Я думаю, что лучше, чем все варианты.

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

Ответ 3

Лучший способ - использовать атрибуты data-xxx. Для чего это важно.

Просто помните, что вы не можете использовать символы не-utf8 в атрибутах data-xxx. Если это слишком много данных или данных контента, я предлагаю хранить idreference, например

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

и иметь

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

Надеюсь, что это добавит к вопросу.

Привет, Барт.