Как я могу внедрить Javascript (включая Prototype.js) в другие сайты, не загромождая глобальное пространство имен?

Question

В настоящее время я работаю над проектом, который представляет собой большой сайт, использующий библиотеку Prototype, и уже существует огромное количество кода Javascript.

Сейчас мы работаем над фрагментом кода, который будет «внедрен» в сайты других людей (представьте себе людей, добавляющих тег на свои сайты), который затем запустит наш код и добавит несколько элементов DOM и функциональность их сайта. В нем будут новые фрагменты кода, а также много кода, который мы используем на нашем главном сайте.

У меня проблема в том, что, конечно, не круто просто добавить , который будет включать Prototype на страницах людей. Если мы сделаем это на странице, которая уже использует ANY framework, мы гарантированно все испортим.
jQuery дает нам возможность «переименовать» объект $, чтобы он мог справиться с этой ситуацией прилично, за исключением того факта, что мы не используем jQuery, поэтому нам пришлось бы перенести все .

Прямо сейчас я обдумываю несколько ужасных вариантов, и я не уверен, что лучше ...

• Перепишите все, чтобы использовать 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?

Или Prototype слишком сложен, чтобы так его изолировать?
(ПРИМЕЧАНИЕ: я думаю, что знаю, что это создаст замыкания повсюду, и это будет медленнее, но меня не волнует производительность, мой код не делает ничего сложного)

Answer 1

Если вы внедряете свой код в другие сайты, либо потребуйте, чтобы они также содержали прототип, либо вообще не используйте библиотеку.

Любой другой вариант, на мой взгляд, слишком навязчив.

Answer 2

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

Я вижу в firebug, что css загружен, но содержимое моего css-файла не просматривается. Я надеялся, что смогу динамически загружать нужные мне библиотеки, основываясь на инструментах, которые использовал этот WIDGET. Поэтому я хотел бы сделать некоторую программную логику, которая бы определяла, какие библиотеки и файлы CSS следует «импортировать».

Не уверен, что этот образ мышления играет на ваших усилиях, но мне бы очень хотелось узнать ваши мысли или посмотреть, куда вы в конечном итоге идете.