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

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

на обложку

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

Шрифт:

// все фреймы. Но мы предусматриваем отправку этого сообщения, чтобы известить

// вмещающий документ, что можно начать выполнять поиск еще до получения

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

// поэтому мы используем *, чтобы броузер доставил сообщение любому документу,

window.parent.postMessage("Twitter Search v0.1", "*");

});

</script>

</head>

<body>

</body>

</html>

В примере 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"; // Разместить справа

// Вставить фрейм в начало документа

document.body.insertBefore(iframe, document.body.firstChild);

// Отыскать все ссылки и связать их с модулем

var links = document.getElementsByTagName("а");

for(var і = 0; і < links.length; i++) {

// addEventListener не работает в версии ІЕ8 и ниже

links[i].addEventListener("mouseover", function {

// Отправить url как искомую фразу и доставлять его, только если

// фрейм все еще отображает документ с сайта

davidflanagan.com

iframe.contentWindow.postMessage(this.href, origin);

}, false);

}

}, false);

22.4. Фоновые потоки выполнения

Одна из основных особенностей клиентских сценариев на языке JavaScript заключается в том, что они выполняются в единственном потоке выполнения: броузер, к примеру, никогда не будет выполнять два обработчика событий одновременно, и таймер никогда не сработает, пока выполняется обработчик события. Параллельные обновления переменных приложения или документа просто невозможны, и программистам, разрабатывающим клиентские сценарии, не требуется задумываться или хотя бы понимать особенности параллельного программирования. Как следствие, функции в клиентских сценариях на языке JavaScript должны выполняться очень быстро, иначе они остановят работу цикла событий и веб-броузер перестанет откликаться на действия пользователя. Именно по этой причине прикладной интерфейс поддержки Ajax всегда действует асинхронно, и по этой же причине в клиентском JavaScript отсутствуют синхронные версии функций load или require для загрузки библиотек на языке JavaScript.

Спецификация «Web Workers» [58] со всеми мерами предосторожности ослабляет ограничение на единственный поток выполнения в клиентском JavaScript. «Фоновые потоки», определяемые спецификацией, фактически являются параллельными потоками выполнения. Однако эти потоки выполняются в изолированной среде, не имеют доступа к объектам

Window

Document

и могут взаимодействовать с основным потоком выполнения только посредством передачи асинхронных сообщений. Это означает, что параллельные изменения дерева DOM по-прежнему невозможны, но это также означает, что теперь имеется возможность использовать синхронные прикладные интерфейсы и писать функции, выполняющиеся длительное время, которые не будут останавливать работу цикла событий и подвешивать броузер. Создание нового фонового потока выполнения не является такой тяжеловесной операцией, как открытие нового окна броузера, но также не является легковесной операцией, вследствие чего нет смысла создавать новые фоновые потоки для выполнения тривиальных операций. В сложных веб-приложениях может оказаться полезным применение даже нескольких десятков фоновых потоков, но весьма маловероятно, что приложения с сотнями и тысячами таких потоков смогут иметь практическую ценность.

Спецификация «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-адрес, он должен иметь то же происхождение (протокол, имя хоста и порт), что и вмещающий документ.