如何在其他站点中注入 Javascript（包括 Prototype.js）而不扰乱全局命名空间？

Question

我目前正在进行的一个项目是一个使用 Prototype 库的大型网站，并且已经有大量的 Javascript 代码。

我们现在正在编写一段代码，它将被“注入”到其他人的网站中（想象一下人们在他们的网站中添加一个

我遇到的问题是，仅仅添加一个

现在我正在考虑一些丑陋的选择，而且我不确定什么是最好的...

• 重写所有内容以使用 jQuery，并在各处重命名 $ 对象。
• 创建一个“新”原型库，仅包含我们在“注入”代码中使用的子集，并将 $ 重命名为其他名称。 然后我又必须调整我的代码中以某种方式共享的部分。
• 在注入的代码中根本不使用库，以使其尽可能干净，并重写共享代码以根本不使用库。 这显然会导致我们创建自己的弗兰肯斯坦图书馆，这可能是有史以来最糟糕的情况。

我想知道你们认为我能做什么，以及是否有一些神奇的选项可以解决我所有的问题...

例如，您认为我可以使用 Caja / Cajita 之类的东西来沙箱我自己的代码并隔离它来自网站的其余部分，并且里面有原型？ 还是我完全没有抓住重点？

我还读过一次有关小书签的技术，您是否像这样添加代码：

(function() {  /* your code */ })();

然后您的代码全部位于匿名函数内，并且您根本没有触及全局名称空间。 你认为我可以制作一个包含以下内容的文件：

(function() { 
   /* Full Code of the Prototype file here */
   /* All my code that will run in the "other" site */

   InitializeStuff_CreateDOMElements_AttachEventHandlers();
})();

这可行吗？ 例如，它是否能够实现不使全局命名空间混乱、不破坏使用 jQuery 的网站上的功能的目标？

或者原型是否太复杂而无法像这样隔离它？
（注意：我想我知道这会在各处创建闭包并且速度较慢，但​​我不太关心性能，我的代码没有做任何复杂的事情）

Answer 1

如果您要将代码注入其他站点，要么要求它们也包含原型，要么根本不使用库。

在我看来，任何其他选择都太具有侵入性。

Answer 2

丹尼尔，

由于某些相同的原因，我遇到了同样的问题。 值得庆幸的是，我能够使用jquery。 我想要做的是创建一个 js 文件，它将加载 jquery 实例和我需要的任何依赖库。 然后我想以同样的方式加载css。

我找到了一个脚本，可以将这些文件加载​​到 DOM 中，但它们似乎不起作用。 这是我正在使用的：

function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

我可以在 firebug 中看到 css 已加载，但我的 css 文件的内容未通过。 我本来希望能够根据这个WIDGET使用的工具动态加载我需要的库。 所以我想做一些编程逻辑来确定应该“导入”哪些库和CSS文件。

不确定这种思路是否会影响你的努力，但我很想了解你的想法，或者看看你最终会得到什么结果。