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

Question

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

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

我遇到的问题是，在人们的页面中添加一个包含 Prototype 的

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

• 重写所有内容以使用 jQuery，并在任何地方使用重命名的 $ 对象。
• 创建一个“新”原型库，其中仅包含我们将在“注入”代码中使用的子集，并将 $ 重命名为其他名称。再说一次，我必须调整我的代码中会以某种方式共享的部分。
• 在注入代码中根本不使用库，以使其尽可能干净，并重写共享代码以完全不使用库。这显然会退化为我们创建自己的图书馆科学怪人，这可能是有史以来最糟糕的情况。

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

例如，您是否认为我可以使用 Caja / Cajita 之类的东西来沙箱化我自己的代码并将其与网站的其他部分隔离，并在其中放置 Prototype？还是我完全忽略了这一点？

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

(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

丹尼尔，

由于某些相同的原因，我遇到了同样的问题。谢天谢地，我能够使用 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 文件。

不确定这种思路是否会影响您的努力，但我很想听听您的想法，或者看看您最终会去哪里。

Answer 2

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

在我看来，任何其他选项都过于侵扰。