Пишу js-виджет для встраивания в сторонние сайты. Как подключать js-плагины и библиотеки без «конфликтов»?

Question

[Александр]

Привет, Тостер!
В партнерские сайты будет встраиваться виджет, который выводит некоторый список товаров.
Код для встраивания у меня получился такой:

<div id="widget1"></div>

	<script>			
	var set = {
		id: 'widget1',
		partner: 1,
		currency: 'rub'
	};
	(function(){
		var s = document.createElement('script');
		s.type = 'text/javascript';
		s.async = true;
		s.src = "http://site.ru/api/widget.js";
		document.getElementsByTagName('head')[0].appendChild(s);
	})();			
	</script>

Внутри widget.js я подключаю css, jquery и несколько плагинов к ней (датапикер, кейфильтр, автокомплит, фоторама), после этого с помощью ajax получаю контент и вставляю его в "#widget1" на странице партнера.

var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href",  "http://site.ru/api/widget.css");
document.getElementsByTagName("head")[0].appendChild(link);

var s = document.createElement('script');
s.type = 'text/javascript';
s.async = false;
s.src =  "http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js";
document.getElementsByTagName('head')[0].appendChild(s);

var s = document.createElement('script');
s.type = 'text/javascript';
s.async = false;
s.src =  "https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js";
document.getElementsByTagName('head')[0].appendChild(s);

// ajax и все остальное...

Кто реализовывал подобное, подскажите, по правильному пути иду?

У меня возникло непонимание, получается я партнеру на страницу подключаю свой набор js-библиотек и плагинов, а что если у него они УЖЕ подключены на странице? Например jquery у него скорее всего уже подключен, и, возможно, версия повыше, чем моя. Подозреваю, что могут начаться конфликты.

Можно ли как-то проверить подключена ли нужная мне библиотека/плагин, и соответствует ли она нужной мне версии?
И как вообще, по-уму нужно решать эту задачу?
Спасибо.

П.С. Вариант "переписать весь виджет на чистом js" - сейчас не рассматриваю, сроки поджимают.

Answer 1

[Natalia Baženova]

Честно сказать, такой подход - тащить за собой кучу плагинов и впихивать их в чужую страницу - представляется мне не только непрофессиональным, но и нечестным по отношению к партнерам. Они и знать не будут, отчего их страница тормозит.
Когда я писала виджеты, сразу брала чистый js без зависимостей - ясно же, что конфликты неизбежны.
Вам можно посоветовать вставлять свой виджет в iframe. Хотя бы конфликтов не будет.

Answer 2

[Алексей Кот]

Думаю, используя паттерн "модуль" у вас не должно возникнуть конфликтов. Подробнее
Я вижу, что у вас используется немедленно-вызываемая функция, значит вы с этим знакомы.