В примере 22.5 представлен простой сценарий на языке JavaScript, который может быть вставлен в любую веб-страницу, где требуется использовать модуль поиска по сайту Twitter. Он вставляет модуль в документ и затем устанавливает обработчики событий во все ссылки в документе, чтобы при наведении указателя мыши на ссылку производился вызов метода
postMessage
модуля, заставляющий его выполнить поиск по строке URL ссылки. Это позволит узнать, что говорят люди о веб-сайте перед тем, как перейти к нему.
Пример 22.5. Использование модуля поиска по сайту Twitter с помощью метода
postMessage
// Этот сценарий JS вставляет Twitter Search Gadget в документ и добавляет обработчик
// событий ко всем ссылкам в документе, чтобы при наведении указателя мыши на них
// с помощью модуля поиска отыскать упоминания URL-адресов в ссылках.
// Это позволяет узнать, что говорят другие о сайтах, прежде чем щелкнуть на ссылке,
window.addEventListener("load", function { // He работает в IE < 9
var origin = "http://davidflanagan.com”; // Происхождение модуля
var gadget = "/demos/TwitterSearch.html"; // Путь к модулю
var ifгате = document.createElement("ifгате"); // Создать iframe
iframe.src = origin + gadget; // Установить его URL
iframe.width = "250"; // Ширина 250 пикселов
iframe.height = ”100%"; // Во всю высоту документа
iframe.style.cssFloat = "right"; // Разместить справа
Одна из основных особенностей клиентских сценариев на языке JavaScript заключается в том, что они выполняются в единственном потоке выполнения: броузер, к примеру, никогда не будет выполнять два обработчика событий одновременно, и таймер никогда не сработает, пока выполняется обработчик события. Параллельные обновления переменных приложения или документа просто невозможны, и программистам, разрабатывающим клиентские сценарии, не требуется задумываться или хотя бы понимать особенности параллельного программирования. Как следствие, функции в клиентских сценариях на языке JavaScript должны выполняться очень быстро, иначе они остановят работу цикла событий и веб-броузер перестанет откликаться на действия пользователя. Именно по этой причине прикладной интерфейс поддержки Ajax всегда действует асинхронно, и по этой же причине в клиентском JavaScript отсутствуют синхронные версии функций load или require для загрузки библиотек на языке JavaScript.
Спецификация «Web Workers» [58] со всеми мерами предосторожности ослабляет ограничение на единственный поток выполнения в клиентском JavaScript. «Фоновые потоки», определяемые спецификацией, фактически являются параллельными потоками выполнения. Однако эти потоки выполняются в изолированной среде, не имеют доступа к объектам
Window
и
Document
и могут взаимодействовать с основным потоком выполнения только посредством передачи асинхронных сообщений. Это означает, что параллельные изменения дерева DOM по-прежнему невозможны, но это также означает, что теперь имеется возможность использовать синхронные прикладные интерфейсы и писать функции, выполняющиеся длительное время, которые не будут останавливать работу цикла событий и подвешивать броузер. Создание нового фонового потока выполнения не является такой тяжеловесной операцией, как открытие нового окна броузера, но также не является легковесной операцией, вследствие чего нет смысла создавать новые фоновые потоки для выполнения тривиальных операций. В сложных веб-приложениях может оказаться полезным применение даже нескольких десятков фоновых потоков, но весьма маловероятно, что приложения с сотнями и тысячами таких потоков смогут иметь практическую ценность.
58
Спецификация «Web Workers» изначально была частью спецификации HTML5, но затем была выделена в отдельный, независимый, хотя и тесно связанный со стандартом, документ. На момент написания этих строк проект спецификации был доступен по адресами http://whatwg.org/ww.
Как и любой прикладной интерфейс поддержки многопоточных приложений, спецификация «Web Workers» определяет две различные части. Первая - объект
Worker
, который представляет фоновый поток выполнения в программе, создавшей его. Вторая - объект
WorkerGlobalScope
, глобальный объект нового фонового потока выполнения, который представляет фоновый поток выполнения внутри него самого. Оба объекта описываются в следующих подразделах. За ними следует раздел с примерами.
22.4.1. Объект Worker
Чтобы создать новый фоновый поток, достаточно просто вызвать конструктор
Worker,
передав ему URL-адрес, определяющий программный код на языке JavaScript, который должен выполняться в фоновом потоке:
var loader = new Worker("utils/loader.js");
Если указать относительный URL-адрес, он будет интерпретироваться относительно URL-адреса документа, содержащего сценарий, который вызвал конструктор
Worker
. Если указать абсолютный URL-адрес, он должен иметь то же происхождение (протокол, имя хоста и порт), что и вмещающий документ.