RequireJS:如何从一个模块加载多个功能?

时间:2014-04-15 10:51:59

标签: javascript requirejs

我有一个需要返回3个函数的模块,我写了这样的模块(抱歉所有的return,我直接从coffeescript翻译过来):

(function() {
  define("inColor", [], function() {
    var init;
    init = function(value, obj) {
      var foundVal;
      foundVal = void 0;
      $.each(obj, function(key, val) {
        if (value === key) {
          foundVal = val;
        }
      });
      return foundVal;
    };
    return init;
  });

  define("fillColor", ['inColor'], function(inColor) {
    var capletColor, init;
    capletColor = {
      primary: "#3DA0DB",
      info: "#B5D1D8",
      success: "#2ECC71",
      warning: "#FFCC33",
      danger: "#E15258",
      inverse: "#62707D",
      theme: "#f37864",
      "theme-inverse": "#6CC3A0",
      palevioletred: "#913B53",
      green: "#99CC00",
      lightseagreen: "#1ABC9B"
    };
    init = function(obj) {
      var codeColor;
      inColor = inColor(obj.data("color") || obj.data("toolscolor"), capletColor);
      codeColor = inColor || obj.data("color") || obj.data("toolscolor");
      return codeColor;
    };
    return init;
  });

  define("rgbaColor", [], function() {
    var init;
    init = function(hex, opacity) {
      var b, bigint, g, r;
      bigint = parseInt(hex.replace("#", ""), 16);
      r = (bigint >> 16) & 255;
      g = (bigint >> 8) & 255;
      b = bigint & 255;
      if (opacity || opacity <= 1) {
        return "rgba(" + r + "," + g + "," + b + "," + (opacity || 1) + ")";
      } else {
        return "rgb(" + r + "," + g + "," + b + ")";
      }
    };
    return init;
  });

  define('colorModuleLoader', ['inColor', 'fillColor', 'rgbaColor'], function(inColor, fillColor, rgbaColor) {
    return {
      inColor: inColor,
      fillColor: fillColor,
      rgbaColor: rgbaColor
    };
  });

}).call(this);

现在我加载我的模块:

require(['tmp/assets/scripts/admin/modules/caplet.color'], function(colorModuleLoader) {
    return window.alert(colorModuleLoader.rgbaColor("#F37864", 0.1));
  });

模块已加载,但当我尝试提醒值时,错误显示colorModuleLoaderundefined,是否可以解释原因?

2 个答案:

答案 0 :(得分:7)

就RequireJS而言,那里有四个模块,它们都在一个文件中。 (与define调用的模块数量相同。)RequireJS正常运行的基本规则是每个文件应该有一个模块,而define调用不应该命名模块。 (优化程序r.js添加了模块名称。)这些规则有一些例外但你真的需要知道你在做什么才能使用这些例外(并且能够解释你需要的原因)做一些不同于基本规则的事情。

您可以做的是让您的tmp/assets/scripts/admin/modules/caplet.color.js文件包含一个导出所需功能的模块:

define(function() {

    function inColor() {...}

    function fillColor() {...}

    function rgbaColor() {...}

    return {
      inColor: inColor,
      fillColor: fillColor,
      rgbaColor: rgbaColor
    };    

});

答案 1 :(得分:1)

如果您必须从一个文件中提取多个模块,可以使用requirejs.config({})声明中的bundles来执行此操作。

requirejs.config({
  bundles: {
    'tmp/assets/scripts/admin/modules/caplet.color':['inColor', 'fillColor', 'rgbaColor', 'colorModuleLoader']
  }
});

require(['inColor', 'fillColor', 'rgbaColor', 'colorModuleLoader'], function(inColor, fillColor, rgbaColor, colorModuleLoader){
  // write code here
})