Как именно работать с объектом JSON и jQuery, добавив информацию для постов


Я работаю с AJAX и JSON в течение нескольких лет теперь, но если честно я до сих пор не знаю точно, что все функции, и как создать оптимизированный код для jQuery.

Итак, мой первый вопрос: кто-нибудь знает хороший учебник, или лучше даже шпаргалка где функциональные объяснил. Я погуглил и посмотрел на нормальных и jQuery документацию в течение многих лет теперь, но я все еще не могу управлять, чтобы думать оптимизирован узоров, если это делает никакого смысла вообще.

Теперь, чтобы проиллюстрировать это актуальная проблема. В настоящее время я занимаюсь разработкой небольшой плагин, который добавляет различные счетчики на должности, ничего особенного.

<ul id="container-60">
  <li class="counter-x">&nbsp;</li>
  <li class="counter-y">&nbsp;</li>
  <li class="counter-z">&nbsp;</li>
</ul>

<ul id="count-container-64">
  <li class="counter-x">&nbsp;</li>
  <li class="counter-y">&nbsp;</li>
  <li class="counter-z">&nbsp;</li>
</ul>

Теперь это должно быть заполнено. Лучший способ я могу сделать эту работу с следующий JSON Стинг:

{ "posts" : 
    { "60" : 
        { "x" : "100", "y" : "200" , "z" : "300" }
    },
    { "64" : 
        { "x" : "400", "y" : "500" , "z" : "560" }
    }
}

Теперь что касается "Аякса" есть двойной цикл:

    // AJAX blah blah blah above
success : function( data ){
    posts = data.posts;
    jQuery.each( posts, function( post_id, post_counts ) {
        jQuery.each( post_counts, function( item_name, item_count ) {
            jQuery( '#container-' + post_id + ' .counter-' + item_name ).text( item_count );
        });
    });
}

Сейчас это прекрасно работает, но держу пари, что есть лучший способ делать это. Может быть, изменить строку JSON для более оптимизированную версию для делать вещи быстрее.

jQuery имеет много специальных функций.

У кого есть какие-либо предложения.



10319
3
задан 14 ноября 2011 в 04:11 Источник Поделиться
Комментарии
1 ответ

Я не думаю, что я могу дать причин, почему это лучше (т. е. быстрее). Только я чувствую, что это более читабельным и масштабируемой.

Мне нравится использовать атрибуты данных для информации, как идентификаторы. В течение длительного времени, занятия были путь, но нам пришлось иметь дело с захламленной классы :(. Атрибуты данных держать вещи чище, на мой взгляд–плюс это делает его легче иметь несколько счетчиков на странице.

<ul class="container">
<li class="counter" data-counter="60-x">x</li>
<li class="counter" data-counter="60-y">y</li>
<li class="counter" data-counter="60-z">z</li>
</ul>

<ul class="container">
<li class="counter" data-counter="64-x">x</li>
<li class="counter" data-counter="64-y">y</li>
<li class="counter" data-counter="64-z">z</li>
</ul>

Используя те же данные:

var data = {
"posts": {
"60": { "x" : "100", "y" : "200" , "z" : "300" },
"64": { "x" : "400", "y" : "500" , "z" : "560" }
}
};

А затем, используя JavaScript для-в:

var posts = data.posts;

for(var item in posts) {
for(var counter in posts[item]) {
var selector = "[data-counter=" + item + "-" + counter + "]",
count = posts[item][counter];

$(selector).text(count);
}
}

2
ответ дан 15 ноября 2011 в 02:11 Источник Поделиться