Jak mogę wstrzyknąć JavaScript (w tym Prototype.js) w inne strony bez zaśmiecania globalnej przestrzeni nazw?

Question

Obecnie pracuję nad projektem, który jest dużą witryną, która korzysta z biblioteki Prototype i istnieje już ogromna ilość kodu JavaScript.

Pracujemy teraz nad kawałkiem kodu, który zostanie "wtryśnięty" w strony innych osób (osoby z obrazkami dodające w swoich witrynach znacznik < >), który uruchomi nasz kod i doda kilka elementów DOM i funkcjonalność ich witryny. Będzie to miało nowe fragmenty kodu, a także wielokrotnie użyje kodu, którego używamy w naszej głównej witrynie.

Problem polega na tym, że dodanie do skryptu < >, który będzie zawierał prototyp na stronach innych osób, jest problematyczne. Jeśli zrobimy to na stronie, która już korzysta z architektury ANY, mamy gwarancję, że wszystko spieprzymy.
jQuery daje nam opcję "zmiany nazwy" obiektu $, dzięki czemu może przyzwoicie sobie poradzić z tą sytuacją, z wyjątkiem oczywiście tego, że nie używamy jQuery, więc musielibyśmy przeprowadzić migrację wszystkiego.

Teraz jestem rozważa szereg brzydkich wyborów, a nie jestem pewien, co jest najlepsze ...

• Przepisz wszystko użyć jQuery, z przemianowany $ object wszędzie.
• Tworzenie "nowej" biblioteki prototypowej z podzbiorem używanym przez nas w "wstrzykniętym" kodzie i zmienianie nazwy $ na coś innego. Potem znowu będę musiał dostosować części mojego kodu, które zostaną w jakiś sposób udostępnione.
• Nie używanie biblioteki w wstrzykniętym kodzie, aby zachować ją tak czystą, jak to możliwe, i przepisywanie udostępnionego kodu, aby w ogóle nie używać biblioteki. To oczywiście przerodziłoby się w tworzenie własnego frankensteina biblioteki, która jest prawdopodobnie najgorszym scenariuszem w historii.

Zastanawiam się co myślicie mogę zrobić, a także, czy istnieje jakaś magiczna opcja, która rozwiąże wszystkie moje problemy ...

Na przykład, czy myślisz, że mogę używać coś takiego Caja/Cajita, żeby piaskować mój własny kod i odizolować go od reszty strony, i mieć tam prototyp? Czy też zupełnie nie rozumiem tego?

Czytałem również kiedyś o technikę skryptozakładki, ty dodaj swój kod tak:

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

A potem kod jest wszystko wewnątrz anonimowej funkcji i nie dotknął globalną przestrzeń nazw w ogóle . Myślisz, że mógłbym zrobić jeden plik zawierający:

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

    InitializeStuff_CreateDOMElements_AttachEventHandlers(); 
})(); 

Czy to działa? Czy osiągnąłby on cel, jakim jest nie zaśmiecanie globalnej przestrzeni nazw, a nie zabijanie funkcjonalności strony, która używa jQuery?

Czy prototyp jest zbyt skomplikowany, aby go tak wyizolować?
(UWAGA: Wydaje mi się, że wiem, że tworzyłoby to zamknięcie wszędzie, a to wolniej, ale nie dbam zbytnio o wydajność, mój kod nie robi nic tak skomplikowanego)

Answer 1

Jeśli wstrzykujesz swój kod do innych witryn, albo wymagają one prototypu, albo w ogóle nie korzystają z biblioteki.

Każda inna opcja jest, moim zdaniem, zdecydowanie zbyt nachalna.

Answer 2

Daniel,

Z tych samych powodów napotykam na ten sam problem. Dzięki temu mogę używać jquery. Co chcę zrobić, to utworzyć pojedynczy plik js, który załaduje wystąpienie jquery i wszelkich zależnych bibliotek, których potrzebuję. Następnie chcę załadować css w ten sam sposób.

Znalazłem skrypt, który załaduje te pliki do DOM, ale nie wydają się działać. Oto czego używam:

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) 
} 

widzę w Firebug, że CSS jest załadowany, ale zawartość mojego pliku css nie nadchodzi. Miałem nadzieję, że będę mógł dynamicznie ładować potrzebne biblioteki w oparciu o narzędzia, z których korzystał ten WIDŻET. Tak więc chciałbym zrobić programową logikę, która określałaby, które biblioteki i pliki css powinny być "importowane".

Nie jestem pewien, czy ten sposób myślenia wpływa na twoje wysiłki, ale chciałbym poznać twoje myśli i zobaczyć, co z tego wyniknie.