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

Question

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

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

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

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

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

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

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

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

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

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

Answer 1

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

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

HTML:

    { "title": "titel1", "detailurl": "article1.html" } 

Сценарий:

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

Вывод:

Answer 2

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

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

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

и имеют

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

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

Привет, Bart.

Answer 3

А как же jQuery.data?

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

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