我正在开发一个 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。
例如,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
的底部执行。
关于javascript - 将函数定义为对象参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25570590/