В этой статье будет использоваться ГРЯЗНЫЙ, небезопасный, "костыльный", страшный и т. д. метод eval. Слабонервным не читать!

Сразу скажу, что некоторые проблемы удобства использования решить не удалось: в коде, который будет передан в worker, нельзя использовать замыкание.

Всем нам нравятся новые технологии, и нравится, когда этими технологиями удобно пользоваться. Но в случае с worker это не совсем так. Worker работает с файлом или ссылкой на файл, но это неудобно. Хочется иметь возможность засунуть в worker любую задачу, а не только специально запланированный код.

Что нужно, чтобы сделать работу с worker удобнее? На мой взгляд, следующее:

• Возможность запускать в worker произвольный код в произвольный момент времени
• Возможность передавать в worker сложные данные (экземпляры классов, функции)
• Возможность получения Promise с ответом из worker.

Для начала нам понадобится протокол общения между worker и основным окном. В целом протокол — это просто структура и типы данных, с помощью которых будут общаться окно браузера и worker. Тут нет ничего сложного. Можно использовать что-то типа этого или написать свою версию. В каждом сообщении у нас будет ID, и данные, характерные для конкретного типа сообщения. Для начала у нас будет два типа сообщений для worker:

• добавление библиотек/файлов в worker
• запуск работы

Файл внутри worker

Перед тем как приступить к созданию worker, нужно описать файл, который будет работать в worker и поддерживать описанный нами протокол. Я люблю ООП, поэтому это будет класс с названием WorkerBody. Этот класс должен подписаться на событие от родительского окна.

self.onmessage = (message) => {
    this.onMessage(message.data);
};

Теперь мы можем слушать события от родительского окна. События у нас есть двух видов: те, на которые подразумевается ответ, и все остальные. Обработаем события.
Добавление библиотек и файлов в worker делается при помощи API importScripts.

И самое страшное: для запуска произвольной функции мы будем использовать eval.

...

onMessage(message) {
  switch (message.type) {
    case MESSAGE_TYPE.ADD_LIBS:
        this.addLibs(message.libs);
        break;
    case MESSAGE_TYPE.WORK:
        this.doWork(message);
        break;
    }
}

doWork(message) {
    try {
        const processor = eval(message.job);
        const params = this._parser.parse(message.params);
        const result = processor(params);
        if (result && result.then && typeof result.then === 'function') {
             result.then((data) => {
                 this.send({ id: message.id, state: true, body: data });
             }, (error) => {
                 if (error instanceof Error) {
                      error = String(error);
                 }
                 this.send({ id: message.id, state: false, body: error });
             });
        } else {
           this.send({ id: message.id, state: true, body: result });
        }
    } catch (e) {
       this.send({ id: message.id, state: false, body: String(e) });
    }
}

send(data) {
    data.body = this._serializer.serialize(data.body);
    try {
        self.postMessage(data);
    } catch (e) {
        const toSet = {
          id: data.id,
          state: false,
          body: String(e)
        };
        self.postMessage(toSet);
    }
}

Метод onMessage отвечает за получение сообщения и выбор обработчика, doWork — запускает переданную функцию, а send отправляет ответ в родительское окно.

Парсер и сериализатор

Теперь, когда у нас есть содержимое worker, надо научиться сериализовать и парсить любые данные, чтобы передавать их в worker. Начнем с сериализатора. Мы хотим иметь возможность передавать в worker любые данные, в том числе — экземпляры классов, классы и функции. Но с помощью нативных возможностей worker мы можем передать только JSON-like данные. Чтобы обойти этот запрет, нам понадобится eval. Все, что не может принять JSON, мы обернем в соответствующие строковые конструкции и запустим на другой стороне. Чтобы сохранить иммутабельность, полученные данные клонируются на лету, и то, что не может быть сериализовано обычными способами, заменяется служебными объектами, а они в свою очередь заменяются обратно парсером на другой стороне. На первый взгляд может показаться, что эта задача несложная, но существует множество подводных камней. Самое страшное ограничение такого подхода — невозможность использовать замыкание, что несет в себе несколько иной стиль написания кода. Начнем с самого простого, с функции. Для начала надо научиться отличать функцию от конструктора класса.

Попробуем отличить:

static isFunction(Factory){

        if (!Factory.prototype) {
            // Arrow function has no prototype
            return true;
        }

        const prototypePropsLength = Object.getOwnPropertyNames(Factory.prototype)
                    .filter(item => item !== 'constructor')
                    .length;

        return prototypePropsLength === 0 && Serializer.getClassParents(Factory).length === 1;
}

static getClassParents(Factory) {
        const result = [Factory];
        let tmp = Factory;
        let item = Object.getPrototypeOf(tmp);

        while (item.prototype) {
            result.push(item);
            tmp = item;
            item = Object.getPrototypeOf(tmp);
        }

        return result.reverse();
    }

Первым делом мы выясним, есть ли у функции прототип. Если его нет — это точно функция. Затем мы смотрим на количество свойств в прототипе, и, если в прототипе только конструктор и функция не является наследником другого класса, мы считаем, что это — функция.

Обнаружив функцию, мы просто заменяем ее служебным объектом с полями __type = "serialized-function" и template, который равен шаблону данной функции (func.toString()).

Пока что пропустим класс и разберем экземпляр класса. Далее в данных нам необходимо отличать обычные объекты от экземпляров классов.

static isInstance(some) {
        const constructor = some.constructor;
        if (!constructor) {
            return false;
        }
        return !Serializer.isNative(constructor);
    }

static isNative(data) {
        return /function .*?\(\) \{ \[native code\] \}/.test(data.toString());
}

Мы считаем что объект является обычным, если у него нет конструктора или его конструктор — нативная функция. Опознав экземпляр класса, мы заменяем его служебным объектом с полями:

• __type — 'serialized-instance'
• data — данные, которые были в экземпляре
• index — индекс класса этого экземпляра в служебном списке классов.

Чтобы передать данные, нам необходимо сделать дополнительное поле: в нем мы будем хранить список всех уникальных классов, которые мы передаем. Самое сложное заключается в том, чтобы при обнаружении класса брать не только его шаблон, но и шаблон всех родительских классов и сохранять их как самостоятельные классы — чтобы каждый "родитель" был передан не более одного раза, — и сохранить проверку на instanceof. Определить класс несложно: это — функция, которая не прошла нашу проверку Serializer.isFunction. При добавлении класса мы проверяем наличие такого класса в списке сериализованных данных и добавляем только уникальные. Код, который собирает класс в шаблон, — довольно большой и лежит тут.

В парсере мы сначала обходим все переданные нам классы и компилируем их, если ранее они не были переданы. Затем мы рекурсивно обходим каждое поле данных и заменяем служебные объекты на скомпилированные данные. Самое интересное — в экземпляре класса. У нас есть класс и есть данные, которые были в его экземпляре, но мы не можем просто так создать экземпляр, ведь вызов конструктора может иметь параметры, которых у нас нет. На помощь нам приходит почти забытый метод Object.create, который возвращает объект с заданным прототипом. Так мы избегаем вызова конструктора и получаем экземпляр класса, а затем просто переписываем в экземпляр свойства.

Создание worker

Для успешной работы worker нам необходимо иметь парсер и сериализатор внутри worker и снаружи, поэтому мы берем сериализатор, и превращаем в шаблон сериализатор, парсер и тело worker. Из шаблона делаем блоб и создаем ссылку на скачивание через URL.createObjectURL (данный способ может не работать при некоторых "Content-Security-Policy"). Данный способ также подходит для запуска произвольного кода из строки.

_createWorker(customWorker) {
    const template = `var MyWorker = ${this._createTemplate(customWorker)};`;
    const blob = new Blob([template], { type: 'application/javascript' });
    return new Worker(URL.createObjectURL(blob));
}

_createTemplate(WorkerBody) {
    const Name = Serializer.getFnName(WorkerBody);
    if (!Name) {
      throw new Error('Unnamed Worker Body class! Please add name to Worker Body class!');
    }

    return [
      '(function () {',
      this._getFullClassTemplate(Serializer, 'Serializer'),
      this._getFullClassTemplate(Parser, 'Parser'),
      this._getFullClassTemplate(WorkerBody, 'WorkerBody'),
      `return new WorkerBody(Serializer, Parser)})();`
    ].join('\n');
}

Результат

Таким образом, у нас получилась простая в использовании библиотека, которая может запустить произвольный код в worker. Она поддерживает классы из TypeScript. Например:

const wrapper = workerWrapper.create();

wrapper.process((params) => {
    // This code in worker. Cannot use closure!
    // do some hard work
    return 100; // or return Promise.resolve(100)
}, params).then((result) => {
    // result = 100;
});

wrapper.terminate() // terminate for kill worker process

Дальнейшие планы

Данная библиотека, к сожалению, далека от идеала. Необходимо добавить поддержку сеттеров и геттеров на классах, объектах, прототипах, статичных свойствах. Мы также хотели бы добавить кэширование, сделать альтернативный запуск скриптов без eval через URL.createObjectURL и добавить в сборку файл с содержимым worker (если недоступно создание "на лету"). Приходите в репозиторий!