JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

Шрифт:

Приложение PermaNote дает пользователю создать единственную заметку и игнорирует проблемы аутентификации и авторизации - предполагается, что сервер обладает некоторым механизмом, позволяющим ему отличать одного пользователя от другого без использования какой-либо страницы входа. Реализация приложения PermaNote состоит из трех файлов. В примере 20.5 приводится содержимое файла объявления. В нем перечислены остальные два файла и указывается, что URL «note» не должен кэшироваться: этот URL-адрес используется для чтения и записи заметки на сервере.

Пример 20.5. permanote.appcache

CACHE MANIFEST

# PermaNote v8

permanote.html

permanote.js

NETWORK:

note

В примере 20.6 приводится второй файл приложения PermaNote: это HTML-файл, который реализует пользовательский интерфейс простого редактора. Он отображает элемент <textarea> с панелью инструментов вдоль верхнего края и строкой состояния для сообщений вдоль нижнего края. Обратите внимание, что тег <html> имеет атрибут manifest.

Пример 20.6. permanote.html

<!DOCTYPE HTML>

<html manifest="permanote.appcache">

<head>

<title>PeflaKTop PermaNote</title>

<script src=”permanote. js"x/script>

<style>

#editor { width: 100%: height: 250px; }

#statusline { width: 100%: }

</style>

</head>

<body>

<div id="toolbar">

<button id="savebutton" onclick="save">Сохранить</button>

<button onclick="sync">Синхронизировать</button>

<button onclick="applicationCache.update">0бновить пpилoжeниe</button>

</div>

<textarea id="editor"></textarea>

<div id="statusline"></div>

</body>

</html>

Наконец, в примере 20.7 приводится сценарий на языке JavaScript, который обеспечивает работу веб-приложения PermaNote. Он определяет функцию

status

для отображения сообщений в строке состояния, функцию

save

– для сохранения текущей версии заметки на сервере и функцию

sync

– для синхронизации серверной и локальной копии заметки. Функции

save

sync

используют приемы управления протоколом HTTP, описанные в главе 18. (Интересно отметить, что функция

save

использует HTTP-метод «PUT» вместо более типичного для таких случаев метода «POST».)

Помимо этих трех основных функций в примере 20.7 определяются также обработчики событий. Чтобы обеспечить синхронизацию локальной и серверной копий заметки, приложению требуется довольно много обработчиков событий:

onload

Пытается загрузить заметку с сервера, если там хранится более новая ее версия, и по завершении синхронизации разрешает доступ к окну редактора. Функции

save

sync

выполняют HTTP-запросы и регистрируют обработчик события «onload» в объекте

XMLHttpRequest

, чтобы определить момент, когда выгрузка или загрузка будут завершены.

onbeforeunload

Сохраняет текущую версию заметки на сервере, если она еще не была выгружена.

oninput

Всякий раз, когда текст в элементе

<textarea>

изменяется, он сохраняется в объекте

localStorage

, и запускается таймер. Если пользователь не продолжит редактирование в течение 5 секунд, заметка будет выгружена на сервер.

onoffline

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

ononline

Когда броузер подключается к сети, выполняется проверка наличия на сервере более новой версии заметки и выполняется сохранение текущей версии.

onupdateready

Если появилась новая версия приложения, выводится сообщение в строке состояния, сообщающее об этом пользователю.

onnoupdate

Если приложение не изменилось, сообщает пользователю, что он или она работает с текущей версией.

А теперь, после краткого обзора логики работы приложения PermaNote, в примере 20.7 приводится ее реализация.

Пример 20.7'. permanote.js

// Некоторые необходимые переменные

var editor, statusline, savebutton, idletimer;

// При первой загрузке приложения

window.onload = function {

// Инициализировать локальное хранилище, если это первый запуск

if (localStorage.note == null)

localStorage.note = "";

if (localStorage.lastModified == null) localStorage.lastModified = 0;

if (localStorage.lastSaved == null) localStorage.lastSaved = 0;

1-285 286 287 288 289 290 291 292 293 294 295 296 297 298 299-468

Поделиться с друзьями:

Чтение онлайн

КНИГИ

АВТОРЫ

ЖАНРЫ

Деловая литература

Детективы

Детские

Документальная литература

Дом и Семья

Драматургия

Жанр не определен

Компьютеры и Интернет

Любовные романы

Научно-образовательная

Поэзия

Приключения

Проза

Прочее

Религия и эзотерика

Справочная литература

Старинная литература

Техника

Фантастика

Фольклор

Юмор

JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

Шрифт: