将函数定义为对象参数

define a function as an object parameter

本文关键字：对象 参数 定义 函数      更新时间：2023-09-26

我正在开发一个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()）。。。

我拿到了。

根据其名称，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。例如，the 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的底部执行。

相关文章：