Требуются модули динамической загрузки JS без импорта всех модулей

Я попытался импортировать модуль динамически. Выбор модуля должен зависеть от некоторых условий (для этого примера я использовал случайный режим).

требуют-conf.js

requirejs.config({
    paths: {                
        'test': 'test/'

    }
});

тест /chart.js

define([], function() {

  function Chart(id, data) {    
    if (!(this instanceof Chart)) {
      throw new TypeError("Chart constructor cannot be called as a function.");
    }
    console.log("chart");
  };

  return (Chart);
});

тест /chart2.js

define([], function() {

  function Chart2(id, data) {    
    if (!(this instanceof Chart2)) {
      throw new TypeError("Chart constructor cannot be called as a function.");
    }
    console.log("chart2");
  };

  return (Chart2);
});

Опция 1

Эта опция работает, но необходимо импортировать оба сценария. Так что это не оптимально.

require(['test/chart','test/chart2'], function () {
    var id = Math.floor(Math.random() * 2);
    var modules = ['chart','chart2'];
    var chart = require('test/' + modules[id]);
    console.log(chart);
});

Вывод: Chart() или Chart2()

Вариант 2

Эта опция асинхронная. Напечатайте объект перед загрузкой модуля.

require([], function () {
    var chart = null;
    var id = Math.floor(Math.random() * 2);
    var modules = ['chart','chart2'];
    require(['test/' + modules[id]], function (Chart) {
      chart = new Chart();
    });
    console.log(chart);
});

Выход: ноль

Вариант 3

эта опция выдает ошибку загрузки.

require([], function () {
    var id = Math.floor(Math.random() * 2);
    var modules = ['chart','chart2'];
    var chart = require('test/' + modules[id]);
    console.log(chart);
});

Выход: ошибка

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

1 ответ

RequireJS является асинхронным, кроме случаев, когда модуль был загружен ранее, так что это ваш единственный вариант

var id = Math.floor(Math.random() * 2);
var modules = ['chart','chart2'];

require(['test/' + modules[id]], function (Chart) {
    var chart = new Chart();

    console.log(chart); // add your logic here
});

Если вы хотите иметь логику вне require Обратный звонок, используйте function

var id = Math.floor(Math.random() * 2);
var modules = ['chart','chart2'];

require(['test/' + modules[id]], function (Chart) {
    var chart = new Chart();

    myLogic(chart); // call function and pass "chart"
});


function myLogic(chart) {
    console.log(chart); // add your logic here
}

Пожалуйста, обратите внимание, я добавил функцию с именем myLogic которые получают chart в качестве аргумента.

Надеюсь, поможет.

Другие вопросы по тегам