Кэширование и обновление (JavaScript)
Поскольку у меня это спрашивали очень часто в аське, я решил сделать свой 1-й урок. Надеюсь, кому-то это будет нужно.
Описание приложения:
Приложение выводит список друзей пользователя. В оффлайне — красные, в онлайне — зеленые.
Каждые 10 секунд обновляются статусы друзей. Приложение минимизировано. Только все что нужно.
Цель урока: Научиться работать с кэшированием в JS.
Где можно использовать: В выборе противника в онлайн игре, в ленте друзей приложения.
1. Создаем приложение и разрешаем доступ к друзьям.
2. Создаем index.html с кодом:
3. Загружаем на сервер. Указываем ссылку на index.html и включаем приложение.
4. Должно получиться следующее:
5. Можно теперь попробовать добавить скроллинг, протестировать на большем количестве друзей. Заменить
Сравнить трафик и нагрузку.
Описание приложения:
Приложение выводит список друзей пользователя. В оффлайне — красные, в онлайне — зеленые.
Каждые 10 секунд обновляются статусы друзей. Приложение минимизировано. Только все что нужно.
Цель урока: Научиться работать с кэшированием в JS.
Где можно использовать: В выборе противника в онлайн игре, в ленте друзей приложения.
1. Создаем приложение и разрешаем доступ к друзьям.
2. Создаем index.html с кодом:
<!DOCTYPE html>
<html>
<head>
<title>Cache and Update</title>
<script type="text/javascript" src="http://vk.com/js/api/xd_connection.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
FriendsList();
setInterval("UpdateFriendList()", 10000); //обновляем раз в 10 секунд
});
var cache = []; //Кеш
function FriendsList() {
VK.api("friends.get", { fields: "online, photo" }, function (data) {
var tmp = '<table><tr>';
for (var i = 0; i < data.response.length; i++) {
var color = 'style="color:#A00"'; //оффлайн выделяем красным
if (data.response[i].online == 1) {
cache.push(data.response[i].uid); // добавляем ид пользователя, который в онлайне
color = 'style="color:#0A0"'; //онлайн выделяем зеленым
}
//Добавляем в переменную для последующего вывода (что-то вроде примитивной таблички)
if (i % 3 == 0 && i > 0) {
tmp += '</tr><tr>'
}
tmp += '<td><span ' + color + 'id="fr_' + data.response[i].uid + '"><img src="' + data.response[i].photo + '">' + data.response[i].first_name + data.response[i].last_name + '</span></td>';
}
tmp += '</tr><table>'
$("body").html(tmp); //Вывод
});
}
function UpdateFriendList() {
VK.api("friends.getOnline", function (data) {
var tmp_array = [];
for (var i = 0; i < data.response.length; i++) {
var key = $.inArray(data.response[i], cache) //был ли раньше в онлайне?
if (key == -1) { //не был в онлайне (изменение)
$("#fr_" + data.response[i]).css("color", "#0A0"); //Выделяем зеленым
// console.log("Пришел:" + data.response[i]); //для FireBug
} else {
cache.splice(key, 1); //удаляем из старого массива ид (key индекс в cache)
}
tmp_array.push(data.response[i]); //Добавляем в новый массив ид
}
//В cache остались пользователи, которые ушли в оффлайн
for (var i = 0; i < cache.length; i++) {
$("#fr_" + cache[i]).css("color", "#A00"); //делаем красными тех, кто ушел в оффлайн
// console.log("Ушел:" + cache[i]); //для FireBug
}
cache = tmp_array; //обновляем кеш
});
}
</script>
</head>
<body style="background: #FFF">
</body>
</html>3. Загружаем на сервер. Указываем ссылку на index.html и включаем приложение.
4. Должно получиться следующее:
5. Можно теперь попробовать добавить скроллинг, протестировать на большем количестве друзей. Заменить
setInterval("UpdateFriendList()", 10000); на setInterval("FriendsList();", 10000); Сравнить трафик и нагрузку.
Теги:
Похожие новости:
Комментарии:
Нету комментариев для вывода...