如何在不混淆全局名稱空間的情況下將Javascript（包括Prototype.js）注入其他站點？

我目前在一個使用Prototype庫的大型網站上，並且已經有大量的Javascript代碼。如何在不混淆全局名稱空間的情況下將Javascript（包括Prototype.js）注入其他站點？

我們現在正在開發的代碼，將獲得「注入」到別人的地盤（圖片的人加入他們的網站一個<腳本>標籤），然後將運行我們的代碼，並添加了一堆DOM元素和功能到他們的網站。這將會有新的代碼，並且還會重用我們在主站點上使用的很多代碼。

我遇到的問題是，僅僅添加一個<腳本>當然不是很酷，它將在人們的頁面中包含Prototype。如果我們在已經使用ANY框架的頁面中執行此操作，我們將保證將所有內容都搞定。
jQuery爲我們提供了「重命名」$對象的選項，所以它可以很好地處理這種情況，除非我們沒有使用jQuery，所以我們必須遷移所有東西。

現在我正在考慮一些選擇，醜的，我不知道什麼是最好的......

重寫一切到處使用jQuery，有一個重命名$對象。
創建一個「新」Prototype庫，僅包含我們在「注入」代碼中使用的子集，並將$重命名爲其他內容。然後，我不得不調整我的代碼將以某種方式共享的部分。
在注入的代碼中根本不使用庫，儘可能保持乾淨，並且重寫共享代碼以根本不使用庫。這顯然會墮落到我們創造我們自己的圖書館frankenstein，這可能是有史以來最糟糕的情況。

我想知道你們的想法我可以做，以及是否有一些神奇的選項，可以解決我的所有問題......

例如，你認爲我可以使用類似卡哈/ 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的站點上殺死功能，例如？

或者是原型太複雜，以某種方式孤立它呢？（注意：我想我知道那會在任何地方創建閉包，但速度較慢，但我不在乎性能太多，我的代碼沒有做任何複雜的事情）

來源

2009-08-05 Daniel Magliola

通常，當您在其他網站上注入代碼時，您只需從主應用程序中提供一小部分功能，因此只需在「本機」JavaScript中編寫所需功能即可。但是，您的項目似乎並非如此。我認爲它可以與匿名包裝函數一起使用。一些書籤包含動態加載所需庫的例程。執行一些測試以確認該技術實際工作，應該很快。 :) – Favio 2009-08-06 02:46:02

如果您要注入代碼到其他網站，要麼他們還包括原型，或根本不使用圖書館。

在我看來，任何其他的選擇都是非常具有侵擾性的。

來源

2009-08-05 03:40:11 Triptych

我會*愛*要求原型，但不幸的是，這應該是在地球上的每一個單一的網站上工作。事實上，我也期待着一些有趣的怪癖模式。我同意侵入性部分，這就是爲什麼我想盡可能減少它。如果將jQuery與其重命名的$對象相加也會太過侵擾？ – 2009-08-05 13:08:46

Daniel，

由於某些相同的原因，我遇到了同樣的問題。很高興，我可以使用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) 
}

我可以在CSS中加載螢火蟲看到，但我的CSS文件的內容不來通過。我希望能夠根據這個WIDGET使用的工具動態加載我需要的庫。所以我想要做一些編程邏輯來確定哪些庫和css文件應該被「導入」。

不知道這種思路是否會影響你的努力，但我很樂意得到你的想法，或者看看你最終會走到哪裏。

來源

2010-04-14 00:14:49 bking

如何在不混淆全局名稱空間的情況下將Javascript（包括Prototype.js）注入其他站點？

回答

相關問題