Всем привет.
Иногда на клиентской стороне необходимо выполнять фоновые задачи. Главное требование чтобы они не прерывали работу всего веб-приложения а, спокойно в фоновом режиме общались между собой, завершались и добавлялись. Цель предложенного планировщика снять с разработчика головную боль о таких задачах и свести к общему интерфейсу, с помощью которого можно постепенно расширять спектр решаемых задач.
Можно спросить, а что за задачи и нафига это нужно? Задач на самом деле на клиенте много: это и периодическая смена идентификатора сессии (например почтовый клиент обновляющий в фоновом режиме идентификатор), и автоматическая прокрутка (например, скроллинг карты), перемещение объекта в графическом интерфейсе, это и обработка множества запросов с клиента на сервер (например, запрашивается информация с сервера через XHR, много таких запросов, следовательно много объектов XHR, а это уже сильная нагрузка на браузер), это и выборка данных из iframe в случае реализации JSRS на его базе. Основа предложенного планировщика это функции setInterval и clearInterval. Именно вокруг них все и будет крутиться. Но просто самих функций недостаточно, необходимо абстрагировать само понятие задачи и предложить интерфейс. И сделать планировщик, который будет управлять задачами.
Для реализации класса задач нам необходимо ввести понятие флагов, в них мы будем хранить состояния задачи.
HClass.Define("HFlag", { extend : HCore.Object, static : {
MAX_FLAG_VALUE : 65535
}, props: {
dwFlag : null,
construct : function(dwFlag) { this.Add(dwFlag); return this; },
Set : function(dwFlag) { this.dwFlag = dwFlag; },
Get : function() { return this.dwFlag; },
Add : function(dwFlag) { this.dwFlag |= dwFlag; },
Zero : function(dwFlag) { this.dwFlag &= (HFlag.MAX_FLAG_VALUE - dwFlag); },
Check : function(dwFlag) { return !!(this.dwFlag & dwFlag); },
Swap : function(dwNew, dwOld) { this.Zero(dwOld); this.Add(dwNew); },
Clear : function() { this.Set(0); }
}});
* This source code was highlighted with Source Code Highlighter.
В этом классе стандартный набор методов для работы с флагами.
Далее пойдут выдержки из класса HSheduler, а именно методы добавления задачи и удаления RunTask - запуск задачи через setInterval, RemoveTask - удаление через clearInterval:
RunTask : function(pTask) {
pTask.nTaskId = this.nTotalTasks;
this.aTaskHeap[this.nTotalTasks++] = pTask;
pTask.nTimerId = setInterval("HSheduler.aTaskHeap[" + pTask.nTaskId + "].Cycle()", pTask.nCycleTimeout);
},
RemoveTask : function(pTask) {
clearInterval(pTask.nTimerId);
delete this.aTaskHeap[pTask.nTaskId];
}
* This source code was highlighted with Source Code Highlighter.
Основное здесь именно работа с функциями setInterval и clearInterval.
В функции RunTask есть строка
setInterval("HSheduler.aTaskHeap[" + pTask.nTaskId + "].Cycle()", pTask.nCycleTimeout); где мы устанавливаем что будет вызываться задача (точнее метод Cycle, текущей задачи) со своим идентификатором из кучи задач, с интервалом указанным в задаче. Это базовые методы планировщика. Перейдем к задаче и посмотрим что должна делать задача вообще:
1. Она должна иметь какие то входные данные.
2. Задачи имеют алгоритмы решения.
3. Задачи выдают результат (также можно реализовать возможность получения промежуточных результатов).
Кроме того необходимо добавить состояния задачи. Задачу можно:
1. Инициализировать (предварительный расчет производных параметров, создание объектов если нужно) - состояние
SF_Ready.
2. Выполнять (расчет результата по заданным входным и производным параметрам) - состояние
SF_Process.
3. Завершить (по условию получения или невозможности получения результата) - состояние
SF_Remove.
4. Приостановить -
SF_Wait (использовать можно если не нужны промежуточные результаты и есть событие из вне, которое сбросит данное состояние, например ожидание ответа от сервера).
5. Пропустить один цикл -
SF_SkipCycle (аналог SF_Wait, но состояние сбрасывается автоматически).
Используя данный набор состояний можно реализовать множество задач, а какие нельзя, то никто не мешает добавить дополнительно новые состояния. Ниже пойдут выдержки из класса HBaseTask. Главный метод из этого класса Cycle, он и вызывается через setInterval:
Cycle : function() {
if(!this.pStaticAddress) return;
if(this.oStateFlags.Check(HBaseTask.SF_Remove)) {
this.Remove();
return;
}
if(!this.oStateFlags.Check(HBaseTask.SF_Wait)) {
if(!this.oStateFlags.Check(HBaseTask.SF_SkipCycle)) {
this.pStaticAddress.apply(this, this.oTaskParams);
this.nCyclesCount++;
} else this.oStateFlags.Zero(HBaseTask.SF_SkipCycle);
}
this.oStateFlags.Zero(HBaseTask.SF_SetParams);
}
* This source code was highlighted with Source Code Highlighter.
В переменной this.pStaticAddress содержится алгоритм задачи, банально функция, она и вызывается каждый новый цикл. Самое важное здесь это то что алгоритм нужно выполнять в контексте объекта задачи чтобы из него был доступ к методам класса HBaseTask:
this.pStaticAddress.apply(this, this.oTaskParams);Теперь из алгоритма задачи можно получить доступ к состояниям задачи (запись, чтение и проверка состояний). Кроме того через apply в алгоритм передаются параметры задачи. Параметры устанавливаются через метод Params. Ниже полная реализация планировщика HSheduler и базового класса задачи HBaseTask:
//
// Sheduler.
//
HClass.Define("HSheduler", { static : {
nTotalTasks : 0,
aTaskHeap : [],
RunTask : function(pTask) {
pTask.nTaskId = this.nTotalTasks;
this.aTaskHeap[this.nTotalTasks++] = pTask;
pTask.nTimerId = setInterval("HSheduler.aTaskHeap[" + pTask.nTaskId + "].Cycle()", pTask.nCycleTimeout);
},
RemoveTask : function(pTask) {
clearInterval(pTask.nTimerId);
delete this.aTaskHeap[pTask.nTaskId];
},
//
// Base Task.
//
HBaseTask : HClass.Define("HBaseTask", { extend : HProcess, static : {
TF_Nothing : 0,
TF_FireRun : 1,
SF_Null : 0,
SF_Ready : 1,
SF_Process : 2,
SF_SetParams : 4,
SF_SkipCycle : 8,
SF_Remove : 16,
SF_Wait : 32
}, props : {
oTaskFlags : null,
oStateFlags : null,
oTaskParams : null,
nTaskId : null,
nTimerId : null,
nCycleTimeout : 1000,
nCyclesCount : 0,
nCyclesLimit : 0,
construct : function(fCode) {
this.oTaskFlags = new HFlag(HBaseTask.TF_Nothing);
this.oStateFlags = new HFlag(HBaseTask.SF_Ready);
this.nCycleTimeout = 1000; // ms.
this.nCyclesCount = 0;
this.nCyclesLimit = 0;
if(fCode) this.Create(fCode);
return this;
},
Run : function() { HSheduler.RunTask(this); },
Remove : function() { HSheduler.RemoveTask(this); },
Params : function() {
this.oTaskParams = arguments;
this.oStateFlags.Add(HBaseTask.SF_SetParams);
},
CycleTimeout : function(nCycleTimeout) { this.nCycleTimeout = nCycleTimeout; },
Cycle : function() {
if(!this.pStaticAddress) return;
if(this.oStateFlags.Check(HBaseTask.SF_Remove)) {
this.Remove();
return;
}
if(!this.oStateFlags.Check(HBaseTask.SF_Wait)) {
if(!this.oStateFlags.Check(HBaseTask.SF_SkipCycle)) {
this.pStaticAddress.apply(this, this.oTaskParams);
this.nCyclesCount++;
} else this.oStateFlags.Zero(HBaseTask.SF_SkipCycle);
}
this.oStateFlags.Zero(HBaseTask.SF_SetParams);
},
AddState : function(dwFlag) { this.oStateFlags.Add(dwFlag); },
SwapState : function(dwNew, dwOld) { this.oStateFlags.Swap(dwNew, dwOld); },
GetState : function() { return this.oStateFlags; }
}})
}});
* This source code was highlighted with Source Code Highlighter.
С помощью это класса можно очень просто создавать задачи работающие в фоновом режиме и что то делающие. Вот несколько простых примеров:
// Пример простой задачи она будет работать в цикле.
var pTask = HBaseTask(function() { alert("Hello world!"); });
pTask.Run();
// Пример задачи получающей параметры.
var pTask = HBaseTask(function(a, b) { alert(a + " " + b); });
pTask.Params(32, 128);
pTask.Run();
// Пример задачи управляющей соcтояниями.
var pTask = HBaseTask(function() {
var oState = this.GetState(); // Берем текущее состояние.
if(oState.Check(HBaseTask.SF_Ready)) {
// Тут подготавливаем производные переменные или создаем нужные объекты, например XHR.
this.SwapState(HBaseTask.SF_Process, HBaseTask.SF_Ready);
} else if(oState.Check(HBaseTask.SF_Process)) {
// Здесь что то считаем и если получаем результат переходим с состояние завершения
this.SwapState(HBaseTask.SF_Remove, HBaseTask.SF_Process);
}
});
pTask.Run();
* This source code was highlighted with Source Code Highlighter.
Но самое главное в том что появилось абстрактное понятие задачи, и можно делать производные, узкоспециализированные задачи. Ниже приведу пример реализации вычисления линейной интерполяции (можно использовать для перемещения вдоль линии какого-либо объекта, к примеру скроллировать карту из точки А в точку Б). Формула вычисления F(t) = t1 + t * (t2 - t1). Для скроллинга необходимо получение промежуточного результата, поэтому нужно будет добавить callback функцию. Вот сам класс, он наследуется от HBaseTask:
HClass.Define("HLerpTask", { extend : HBaseTask, props : {
fStart : 0, fEnd : 0,
fStep : 0, fT : 0,
fRange : 0,
fCallback : null,
EvalLerp : function() { return this.fStart + this.fT * this.fRange; },
construct : function(fStart, fEnd, fStep, fCallback) {
this.fStart = fStart;
this.fEnd = fEnd;
this.fStep = fStep;
this.fCallback = fCallback;
this.CycleTimeout(10);
this.Create(function() {
var oState = this.GetState();
if(oState.Check(HBaseTask.SF_Ready)) {
this.fT = 0;
this.fRange = this.fEnd - this.fStart;
this.SwapState(HBaseTask.SF_Process, HBaseTask.SF_Ready);
} else if(oState.Check(HBaseTask.SF_Process)) {
this.fT += this.fStep;
if(this.fT >= 1.0) {
this.fT = 1.0;
this.SwapState(HBaseTask.SF_Remove, HBaseTask.SF_Process);
}
if(this.fCallback) this.fCallback(this.EvalLerp());
}
});
}
}});
* This source code was highlighted with Source Code Highlighter.
А вот пример использования, создается два вычислителя и промежуточные результаты пишутся в дивы, при этом само приложение доступно т.е. пользователь может взаимодействовать с другим функционалом:
function GE(sId) { return document.getElementById(sId); }
var pTask = new HLerpTask(0, 100, 0.001, function(fRet) { GE("counter1").innerHTML = fRet; });
var pTask2 = new HLerpTask(0, 1000, 0.0005, function(fRet) { GE("counter2").innerHTML = fRet; });
pTask.Run();
pTask2.Run();
* This source code was highlighted with Source Code Highlighter.
Также можно делать другие типы задач, реализуя в производных классах уникальную логику необходимую для работы специализированной задачи, но в тоже время не уходя от интерфейса базовой задачи, что очень важно когда другой разработчик начинает работать с твоим модулем, ему уже по сути все известно, только необходимо узнать какие входные и выходные параметры.
Нестоит пренебрегать вроде бы неприметными на первый взгляд функциями типа setInterval и clearInterval, ведь на их базе можно делать действительно интересные решения.
P.S. Решения предложенные в данной статье и в предыдущей касающейся динамической загрузки скриптов реализованы в проекте
http://www.okarta.ru, это по сути экспериментальный проект, вся логика вынесена на клиента, сервер ничего не генерирует из интерфейса совершенно, есть только запросы данных с клиента на сервер (SOAP), кстати для запросов отлично юзается планировщик задач. Для загрузки карт и блогов юзается сборщик приложений.
P.P.S. Если где-то неработает, то это не в предложеных реализациях проблема, моя задача предложить сущности, они на другом уровне это не уровень браузера, если где ошибки и возникают, то только там где вызываются нативные функции для работы с XML или элементами документа, стилями и т.д. Надо всетаки понимать что есть разные уровни абстракции чем ниже уровень (т.е. ближе к нативным функциям), тем выше вероятность ошибки по причине что стандарты никто не любит, и наоборот чем выше уровень абстракции тем вероятность ошибок связаных с нативными функциями ниже или вообще исключается.
Распечатать статью