Les meilleures pratiques pour le Stockage de JSON dans le DOM

Pourquoi ne pas le stocker comme prévu par la nature: comme un objet javascript? Le DOM est une horrible endroit.

Cela dit, jQuery a la méthode de données qui permet tout cela.

OriginalL'auteur graphicdivine

Je l'ai fait dans le passé aussi bien dans un couple de différentes manières.

La $('selector').data idée est probablement l'un des plus techniques utiles. J'aime cette façon de stocker des données, parce que je peux stocker les données dans une logique, intuitive et de façon ordonnée.

Disons que vous avez un appel ajax qui récupère les 3 articles sur le chargement de la page. Les articles peuvent contenir des données concernant le titre, la date, l'heure, la source etc. Nous allons supposons que vous vouliez afficher les titres, et quand un titre est cliqué, vous voulez montrer l'intégralité de l'article et de ses détails.

Pour illustrer le concept un peu disons-nous récupérer json à la recherche de quelque chose comme:

{
    articles: [
        {
            headline: 'headline 1 text',
            article: 'article 1 text ...',
            source: 'source of the article, where it came from',
            date: 'date of the article'
        },
        {
            headline: 'headline 2 text',
            article: 'article 2 text ...',
            source: 'source of the article, where it came from',
            date: 'date of the article'
        },
        {
            headline: 'headline 3 text',
            article: 'article 3 text ...',
            source: 'source of the article, where it came from',
            date: 'date of the article'
        }
    ]
}

À partir d'un appel ajax comme ça . . .

$.ajax({
    url: "news/getArticles",
    data: { count: 3, filter: "popular" }, 
    success: function(data){

        //check for successful data call
        if(data.success) {

            //iterate the retrieved data
            for(var i = 0; i < data.articles.length; i++) {
                var article = data.articles[i];

                //create the headline link with the text on the headline
                var $headline = $('<a class="headline">' + article.headline + '</a>');

                //assign the data for this article's headline to the `data` property
                //of the new headline link
                $headline.data.article = article;

                //add a click event to the headline link
                $headline.click(function() {
                    var article = $(this).data.article;

                    //do something with this article data
                });

                //add the headline to the page
                $('#headlines').append($headline);
            }
        } else {
            console.error('getHeadlines failed: ', data);
        }
    }
});

L'idée étant, nous pouvons stocker des données associées à un élément du dom et de l'accès/manipuler/supprimer que les données à une date ultérieure en cas de besoin. Cette coupe vers le bas sur les appels de données et efficacement les caches de données à un élément du dom.

à tout moment après le lien du titre est ajouté au document les données peuvent être accessibles par le biais d'un sélecteur jquery. Pour accéder à l'article de données pour la première fois en tête:

$('#headlines .headline:first()').data.article.headline
$('#headlines .headline:first()').data.article.article
$('#headlines .headline:first()').data.article.source
$('#headlines .headline:first()').data.article.date

L'accès à vos données par le biais d'un sélecteur et un objet jquery est sorta soigné.

OriginalL'auteur Allen Tellez