Question

我尝试提交一个简单的Firefox附加组件，并从AMO编辑器获取有关在JavaScript对象中包装变量和函数的消息，以防止与用户可能安装的其他附加组件发生冲突。工作代码非常简单，看起来：

function analyze() {
    var uri = document.getElementById('urlbar').value;
    var requrl="http://www.myanalyzingsiteaddress.com/" + (uri);
    gBrowser.selectedTab = gBrowser.addTab(requrl);
}

是否足以制作其他 var 名称以避免最终的冲突，或者您是否可以指向其他代码更改，这将完成AMO编辑器的指令？

提前谢谢！

Evgenij

Answer 1

您应该从XUL学校教程中指出Javascript Object Management。

analyze是通用名称。在覆盖中，只有一个范围/命名空间由浏览器代码本身和任何其他扩展代码共享。因此，浏览器或其他插件也可能使用analyze和热潮。

您需要通过尽可能使名称成为特定的名称来避免这种情况。 E.g。

function my_addon_id_analyze() ...

使用具有（伪）唯一名称的对象。

if (!("org" in this)) {
  this.org = {};
}
if (!("example" in org)) {
  org.example = {};
}
org.example.addonid = {
  analyze: function() ...
};
// call
org.example.addonid.analyze();

甚至可以在匿名函数中“隐藏”您的代码。然后，这也会从DOM中隐藏，因此不再需要<button id="example.org.addonid.mybutton" onclick="analyze()">个事件处理。但您可以随时使用addEventListener。
```
(function() {
"use strict";
function analyze() ...
// wire up an event handler instead of onlick
document.getElementById("example.org.addonid.mybutton").addEventListener("click", analyze);
})();
```

混合上述部分/全部内容，只要您避免使用简短/通用名称：

if (!("org" in this)) {
  this.org = {};
}
if (!("example" in org)) {
  org.example = {};
}
org.example.addonid = (function() {
  function analyze() ...
  function notvisibleoutside() ...

  // return object of "exported"/"visible" functions.
  return {
    analyze: analyze
  };
})();
// call
org.example.addonid.analyze()

另外，请记住，缺少var（或let / const）声明将隐式声明全局范围内的变量。例如：

function abc() {
  for (i = 0; i < 10; ++i) doSomething();
}

将在全局范围内隐式声明名为i的变量（在XUL窗口中，全局范围为window，因此这将创建window.i）。因此，隐式声明不仅可能导致冲突，还会造成准内存泄漏，例如

function call_me_to_leak_1MB() {
  hugeArray = new ArrayBuffer(1<<20);
}

只要浏览器窗口打开，

就会声明window.hugeArray生存，而不是使用一旦变量超出范围就会收集垃圾的局部变量（当然没有其他参考文献了））。

使用strict mode会使隐式声明成为错误，这有助于及早发现并避免此类错误。

对于Javascript部分来说太多了。还有其他东西可能会发生冲突。

DOM ID：使用唯一的<button id="example.org.addonid.mybutton">或更多CSS友好<button id="example-org-addonid-mybutton">（或至少类似于addonid-mybutton）而不是<button id="mybutton">
CSS：永远不要设置随机元素的样式。
- 否：button { color: green; }
- 是的#example-org-addonid-mybutton { color: green; }
chrome.manifest用于：
- 否：content generic content/
- 是的content example-org-addonid content/。

如何在JavaScript对象中包装松散的变量和函数

1 个答案: