Javascript: внешний скрипт Eval в определенном пространстве имен

Извините за эссе, не смог найти короткий способ объяснить это :(

Контекст

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

WebPart отображает некоторый контент, и я хотел бы, чтобы пользователи могли предоставить внешний скрипт, который мог бы выполняться ПОСЛЕ процесса рендеринга. Пока это легко, я мог бы просто сделать что-то подобное в коде WebPart:

// Render the WebPart
this.render();

// Load external script
this.loadExternalScript(this.props.externalScriptUrl);

Проблема в том, что я хотел бы, чтобы внешний скрипт действовал как обратный вызов, который моя веб-часть могла бы вызвать, чтобы предоставить ему некоторый контекст.

Решение 1

Первое решение, которое я нашел, состояло в том, чтобы предоставить пользователям руководство по созданию внешнего сценария с использованием определенного пространства имен на основе имени файла и точной функции, чтобы моя веб-часть могла:

• Оказывать
• Загрузите внешний скрипт (который будет заполнять это конкретное пространство имен)
• Получить пространство имен внешнего скрипта (на основе имени файла)
• Вызовите обратный вызов внешнего скрипта, используя пространство имен, и укажите контекст

Это работает хорошо, и это выглядит так:

MyExternalScript.js

MyNamespace.ExternalScripts.MyExternalScript = {

    onPostRender: function(wpContext) {
        console.info(wpContext);
    }
}

Веб-часть

// Render the WebPart
this.render();

// Load external script
this.loadExternalScript(this.props.externalScriptUrl);

// Calls the script callback if available
var scriptNamespace = MyNamespace.ExternalScripts.MyExternalScript;
var scriptCallback = scriptNamespace  ? scriptNamespace.onPostRender : null;

if (scriptCallback) {
    scriptCallback(this.wpContext);
}

Это прекрасно работает, но построение пространства имен на основе имени файла — довольно схематичная вещь, чтобы просить пользователей сделать ее, и я хотел бы найти что-то более прямолинейное, чем это хакерское решение.

Решение 2

Другое решение, о котором я думал, состояло в том, чтобы сделать следующее:

• Удалите странное пространство имен из внешнего скрипта и оставьте определенную сигнатуру функции.
• Загрузить содержимое скрипта в виде строки
• Разрешить веб-части динамически создавать уникальное имя пространства имен для этого конкретного скрипта.
• Добавьте содержимое скрипта к пространству имен
• eval() все это
• Обратный вызов

Это выглядело бы следующим образом:

MyExternalScript.js

onPostRender: function(wpContext) {
    console.info(wpContext);
}

Веб-часть

// Render the WebPart
this.render();

// Load external script content
$scriptContent = this.readExternalScript(this.props.externalScriptUrl);

// Append unique namespace
$scriptContent = "MyNamespace.ExternalScripts.MyExternalScript = {" + $scriptContent + "}";

// Eval everything within that namespace
eval($scriptContent);

// Calls the script callback if available
var scriptNamespace = MyNamespace.ExternalScripts.MyExternalScript;
var scriptCallback = scriptNamespace  ? scriptNamespace.onPostRender : null;

if (scriptCallback) {
    scriptCallback(this.wpContext);
}

Я провел быстрое тестирование, и похоже, что оно работает, тот факт, что веб-часть динамически генерирует пространство имен, намного лучше, чем просить пользователя соблюдать сложное пространство имен, однако я не уверен, что есть лучшее решение, чем использование eval( ).

Все, что мне нужно в конце дня, — это найти способ заставить мою веб-часть «осведомляться» о обратном вызове, который ей нужно вызвать. Я также должен убедиться, что пространство имен является уникальным для WebPart и уникально для сценария, поскольку на одной странице может быть 4 веб-части, загружающих разные сценарии, поэтому я должен любой ценой избегать конфликтов пространств имен.

У кого-нибудь есть идея получше?

Спасибо!