javascript - 将函数定义为对象参数

Question

我正在开发一个 Firefox 插件，我尝试剪切不同的文件，而不是将整个脚本放在 main.js 中。

现在，我有一个 utils.js，如下所示:

'use strict';

module.exports.utils = function() {
  return {
    _           : require('sdk/l10n').get,
    self        : require('sdk/self'),
    sStorage    : require('sdk/simple-storage'),
    tabs        : require('sdk/tabs'),
    pageMod     : require('sdk/page-mod'),
    toggleButton: require('sdk/ui/button/toggle'),
    panel       : require('sdk/panel'),
    hotkey      : require('sdk/hotkeys'),
    displayPanel: function(mainPanel, qwantButton) {
      if (mainPanel.isShowing) {
        mainPanel.hide();
        qwantButton.state('window', {
          checked: false
        });
      } else {
        mainPanel.show({
          position: qwantButton
        });
      }
    }
  };
}();

我将 utils.js 导入到 main.js 中: var utils = require(utils); 两个文件都在相同位置:[ROOT]/lib。

但是由于这一行，我遇到了错误:_ : require('sdk/l10n').get, 因为 _ 不是函数。我尝试这样写: _ : require('sdk/l10n').get(), 或使用 get(str) ，但它们都失败了，第一个一次是因为 get 需要参数，第二次是因为 str 未定义。有没有办法定义这个项目？

[编辑]:经过几次尝试，我发现以这种方式编写 utils.js 可以使 _ 工作:

'use strict';

var _           = require('sdk/l10n').get,
  self          = require('sdk/self'),
  sStorage      = require('sdk/simple-storage'),
  tabs          = require('sdk/tabs'),
  {PageMode}    = require('sdk/page-mod'),
  {ToggleButton}= require('sdk/ui/button/toggle'),
  {Panel}       = require('sdk/panel'),
  {Hotkey}      = require('sdk/hotkeys');

var qwantButton = new ToggleButton({
  id: 'toolbar_button_id',
  label: _('toolbar_button_label'),
  icon: {
    '16': './img/logo-16.png',
    '32': './img/logo-32.png',
    '64': './img/logo-64.png'
  },
  onClick: displayMainPanel
});

var mainPanel = new Panel({
  width: 525,
  height: 175,
  contentURL: self.data.url('./panel.html'),
  contentScriptFile: self.data.url('./js/panelScript.js')
});

var hotkey = new Hotkey({
  combo: 'alt-Q',
  onPress: displayMainPanel(qwantButton, mainPanel)
});

function displayMainPanel(mainPanel, qwantButton) {
  if (mainPanel.isShowing) {
    mainPanel.hide();
    qwantButton.state('window', {
        checked: false
    });
  } else {
    mainPanel.show({
      position: qwantButton
    });
  }
}

module.exports = function utils() {
  return {
    _           : _,
    self        : self,
    sStorage    : sStorage,
    tabs        : tabs,
    hotkey      : hotkey,
    qwantButton : qwantButton,
    mainPanel   : mainPanel,
    displayMainPanel: displayMainPanel
  };
}();

但是现在，所需元素的方法不起作用(例如 mainPanel.show())...

Answer 1

我明白了。

main.js - 正如它的名称一样 - 主要元素，因此外部完成的任何操作都必须在内部完成。对于SDK的功能，我是这样做的:

main.js:

'use strict';

var Core = function() {
  var _         = require('sdk/l10n'),
    self        = require('sdk/self'),
    sPrefs      = require('sdk/simple-prefs'),
    sStorage    = require('sdk/simple-storage'),
    tabs        = require('sdk/tabs'),
    hotkey      = require('sdk/hotkeys'),
    pageMod     = require('sdk/page-mod'),
    panel       = require('sdk/panel'),
    toggleButton= require('sdk/ui/button/toggle');

  return {
    _               : _,
    self            : self,
    sPrefs          : sPrefs,
    sStorage        : sStorage,
    tabs            : tabs,
    hotkey          : hotkey,
    pageMod         : pageMod,
    panel           : panel,
    toggleButton    : toggleButton
  };
};

module.exports = Core;

var Interface = require('interface');

var qwantInterface = new Interface();

因此整个 SDK 都封装在我导出的 Core 函数中。现在，所有其他文件都需要 main.js 并获取 Core。例如，interface.js:

'use strict';

var Core = require('main');

var core = new Core();

var Interface = function() {
  var   qButton = core.toggleButton.ToggleButton({
    id: 'toolbar_button_id',
    label: core._.get('toolbar_button_label'),
    icon: {
      '16': './img/logo-16.png',
      '32': './img/logo-32.png',
      '64': './img/logo-64.png'
    },
    onClick: displayPanel
  }),
  qPopup        = core.panel.Panel({
    width: 525,
    height: 175,
    contentURL: core.self.data.url('popup.html'),
    contentScriptFile: core.self.data.url('./js/popupScript.js')
  }),
  qHotkey       = core.hotkey.Hotkey({
    combo: 'alt-Q',
    onPress: displayPanel
  });

  function displayPanel() {
    if (qPopup.isShowing) {
      qPopup.hide();
      qButton.state('window', {
        checked: false
      });
    } else {
      qPopup.show({
        position: qButton
      });
    }
  }
};

module.exports = Interface;

现在，导出的 Interface 是必需的，并按预期在 main.js 的底部执行。