В кастомных виджетах есть возможность загружать любые файлы, в том числе и js-файлы.
Если вы только начинаете создание своих виджетов - прочитайте в справке статью Дизайнер интерфейсов и Сценарии в виджетах.
Модули в JavaScript появились уже давно, и сейчас я покажу пример того, как можно использовать модульность JS в системе ELMA365
Первый подход - использовать модули в представлении
Создаем файл файл mymath.js со следующим содержанием
Код:
export function mySum(x, y) {
return x + y;
};
Загружаем его через вкладку Файлы
Затем открываем раздел Шаблон, и добавляем на форму виджет Код
там пишем следующее
Код:
<script type="module">
import {mySum} from '<%= UI.widget.filePath %>/mymath.js';
const test = mySum(2, 3);
console.log(test)
</script>
Подробнее про export и import можно почитать в доке
Второй подход - использование модулей в клиентских сценариях
Для того, чтоб использовать файлы-модули в Клиентской части, нужно доработать наш код. Так как модульность в JavaScript была не сразу, а появилась позже - не было единого подхода к подключению динамических модулей. Выделяется несколько подходов, часть из них уже уходит в историю и вроде как появляется один метод, который поддерживается как браузерами, так и NodeJS. Можно про разные системы модулей почитать здесь, но в целом - можно не погружаться в данную тему, и просто обернуть js-код в следующую дополнительную инструкцию.
Код:
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define([], factory);
} else if (typeof module === 'object' && module.exports) {
module.exports = factory();
} else {
root.returnExports = factory(root.b);
}
}(this, function (b) {
// приватные методы
function _sum(x, y){ return x + y};
// публичные методы
function sum(x, y){ return _sum(x, y)};
// экспортируем только то, что нужно
return {
mySum: sum,
name: "math"
}
}));
Сохраним этот код как файл mymath.js и добавим его в Файлы виджета.
Затем в клиентских сценариях можно прописать следующее,
Код:
import * as MyMath from "mymath.js";
// вызывается при клике по кнопке
async function onSumClick(): Promise<void> {
Context.data.result = MyMath.mySum(Context.data.input1, Context.data.input2);
}
Если вам не нужны все функции из модуля MyMath, вы можете указать только конкретные
Код:
import {mySum} from "mymath.js";
// вызывается при клике по кнопке
async function onSumClick(): Promise<void> {
Context.data.result = mySum(Context.data.input1, Context.data.input2);
}
