...

JS-модули в Виджетах

Тема в разделе "Примеры сценариев", создана пользователем ava_var, 4 апр 2022.

  1. ava_var

    ava_var Активный участник

    В кастомных виджетах есть возможность загружать любые файлы, в том числе и js-файлы.
    Если вы только начинаете создание своих виджетов - прочитайте в справке статью Дизайнер интерфейсов и Сценарии в виджетах.
    Модули в JavaScript появились уже давно, и сейчас я покажу пример того, как можно использовать модульность JS в системе ELMA365

    Первый подход - использовать модули в представлении
    Создаем файл файл mymath.js со следующим содержанием
    Код:
    
    export function mySum(xy) {
       return 
    y;
    };
    Загружаем его через вкладку Файлы
    Затем открываем раздел Шаблон, и добавляем на форму виджет Код
    там пишем следующее
    Код:
    
    <script type="module">
        
    import {mySumfrom '<%= UI.widget.filePath %>/mymath.js';
        const 
    test mySum(23);
        
    console.log(test)
    </script>
    Подробнее про export и import можно почитать в доке

    Второй подход - использование модулей в клиентских сценариях

    Для того, чтоб использовать файлы-модули в Клиентской части, нужно доработать наш код. Так как модульность в JavaScript была не сразу, а появилась позже - не было единого подхода к подключению динамических модулей. Выделяется несколько подходов, часть из них уже уходит в историю и вроде как появляется один метод, который поддерживается как браузерами, так и NodeJS. Можно про разные системы модулей почитать здесь, но в целом - можно не погружаться в данную тему, и просто обернуть js-код в следующую дополнительную инструкцию.

    Код:
    
    (function (rootfactory) {
        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(xy){ return y};
        
    // публичные методы
        
    function sum(xy){ return _sum(xy)};
     
        
    // экспортируем только то, что нужно
        
    return {
            
    mySumsum,
            
    name"math"
        
    }
    }));
    Сохраним этот код как файл mymath.js и добавим его в Файлы виджета.

    Затем в клиентских сценариях можно прописать следующее,

    Код:
    
    import * as MyMath from "mymath.js";

    // вызывается при клике по кнопке
    async function onSumClick(): Promise<void> {
        
    Context.data.result MyMath.mySum(Context.data.input1Context.data.input2);
    }
    Если вам не нужны все функции из модуля MyMath, вы можете указать только конкретные

    Код:
    
    import {mySumfrom "mymath.js";

    // вызывается при клике по кнопке
    async function onSumClick(): Promise<void> {
        
    Context.data.result mySum(Context.data.input1Context.data.input2);
    }
    Последнее редактирование: 4 апр 2022
  2. shevyekb

    shevyekb Новичок

    Спасибо за раскрытие темы! Есть задача - парсить HTML ответ от стороннего сервера. Пытаюсь подцепить библиотеки dom-parser.js, html-dom-parser.min.js - безуспешно(. Ошибка компиляции Cannot find module 'html-dom-parser.min.js' or its corresponding type declarations. (2:29).

    Вложения:

    • JS`s.zip
      Размер файла:
      6 КБ
      Просмотров:
      25
  3. khudiaev

    khudiaev Новичок

    Тестировал у себя. Перезашел в конструктор виджета после загрузки модуля - это помогло. Сразу после загрузки файла модуль не импортировался.