Доброго времени суток и давайте посмотрим поддерживается ли данная технология в вашем браузере. Сделать это можно предварительно выполнив следующий код:
if(window.Worker){
alert('Технология webWorker поддерживается вашим браузером');
}else{
alert('Технология webWorker не поддерживается вашим браузером');
}Если данная технология поддерживается вашим браузером, то поздравляю и мы идем дальше, если нет, то обновите браузер. В более современных браузерах эта технология поддерживается.
И так, что же она делает? По сути с помощью технологии web Worker мы можем создавать подобие мультипоточности работы со скриптами javaScript, то есть скрипты у нас выполняются в так называемом фоновом режиме.
Допустим у нас есть страница и в ней мы подключаем javaScript файл index.js:
<!DOCTYPE >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Выполнение скриптов в фоновом режиме в HTML5.</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>Помимо этого мы создаем два дополнительных js файла user.js и user2.js.
В самом javaScript файле index.js у нас следующий код:
if (window.Worker){
var worker = new Worker('user.js'),
worker2 = new Worker('user2.js');
worker.postMessage('message');
worker.onmessage = function (e){
alert(e.data);
};
worker2.onmessage = function (e){
alert(e.data);
};
}здесь в самом начале мы создали условие на проверку поддержки в браузере, затем в самом условии создали два объекта worker и worker2. При создании данных объектов мы в качестве аргумента указали путь к файлу, которому хотим отправить или получить данные. Затем с помощью метода postMessage() мы по сути обращаемся через объект worker к странице user.js и отправляем ей сообщение с текстом 'message'.
Смотрим что разворачивается на странице user.js которой мы отправили сообщение:
var message = "Файл user";
onmessage = function(event)
{
if(event.data == "message") {
postMessage(message);
}
};здесь у нас содержится переменная с текстом 'Файл user', c помощью метода onmessage объекта window, сам объект можно не указывать(window.onmessage), мы принимаем сообщение. Само сообщение находится в свойстве data объекта события (event). Мы в условии проверяем является ли содержание сообщения 'message', если да, то мы отправляем обратное сообщение на страницу index.js. В качестве сообщения у нас выступает переменная message, то есть ее содержимое.
Теперь возвращаясь на страницу index.js смотрим дальше:
worker.onmessage = function (e){
alert(e.data);
};С помощью данного метода onmessage() как вы уже знаете мы принимаем сообщения, но уже не через объект window, а через worker. То есть мы с помощью объекта worker как бы указываем с какой страницы принимается сообщение. В нашем случае с user.js(var worker = new Worker('user.js')). И опять же через объект события e и его свойство data получаем сообщение и выводим в модальном окне.
Помимо объекта worker, мы создали объект worker2 который ссылается на страницу user2.js. По сути мы на страницу user2.js никаких сообщений не отправляем. Но с помощью метода onmessage() мы установили прослушку на прием сообщений с страницы user2.js:
worker2.onmessage = function (e){
alert(e.data);
};Файл user2.js:
var message = "файл user2";
postMessage(message);здесь мы просто отправляем сообщение, которое при помощи объекта worker2 на странице index.js будет принято и обработано.
В результате всех определенных действий, при обращении к странице к которой мы подключили файл index.js у нас появятся, поочередно, два модальных окна со значениями переменных файлов user.js и user2.js.
Что вам здесь следует понимать. index.js по сути является связующей страницей между user.js и user2.js, так как в ней мы используем объект worker(new Worker()) и через него работаем с отправкой сообщений (worker.postMessage()) и приемом (worker2.onmessage) . Причем мы выбираем файлы которым будем отправлять и принимать с них сообщения.
Страницы user.js и user2.js можно так сказать являются дочерними, то есть мы также можем отправлять и принимать сообщения, но делаем это через объект window. Здесь отправка сообщений и их прием осуществляются на страницы где объект worker ссылается на данный файл который отправляет сообщение через объект window.
Всего нам нужно запомнить три основных метода:
postMessage(a) - с помощью данного метода осуществляется отправка сообщений, в качестве аргумента 'a' можем приниматься текст сообщения, переменная, функция, объект и т.п.
onmessage - данный метод или событие служит для приема сообщений
onerror() - с помощью этого метода или события мы можем отлавливать ошибки
Вот в принципе и все что я хотел вам рассказать о данной технологии. И давайте подведем итоги. Используя данную технологию мы по сути можем обмениваться данными между js файлами не подключая их все на страницу, то есть осуществлять импорт и экспорт данных между скриптами js. Что в значительной мере можем ускорить загрузку страницы и сделать ваш код более гибким.
Надеюсь данная статья была для вас полезна и вы узнали что то новое. Ну ,а я же с вами прощаюсь и желаю успехов.
