RequireJS动态加载模块,无需导入所有模块

时间:2017-11-24 02:07:58

标签: javascript requirejs requirejs-optimizer

我尝试动态导入模块。要选择的模块应该取决于某些条件(对于此示例,我使用随机模式)。

需要-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);
});

输出: 图表()或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);
});

输出: 错误

请帮我正确地动态加载模块。

0 个答案:

没有答案