Сторонние виджеты JavaScript

Question

Я планирую создать виджет JavaScript, который можно скопировать и использовать на любом веб-сайте. Прежде чем начать, я хотел понять несколько вещей.

1. Как мне убедиться, что CSS моего виджета не затронут CSS (s), уже использованными на страницах?

2. Как мне убедиться, что мой JS не конфликтует?

Любая помощь очень ценится.

Спасибо.

Answer 1

inline-style (style="color:red") всегда имеют наивысший приоритет. поэтому, используя их, они не могут быть переопределены другими объявлениями CSS. Что касается вашего JavaScript, вы должны использовать одно закрытие. поместите ваш код в анонимную функцию и сразу же вызовите его.

(function MyFunction() { 

    var myVar = 123;

})();

Не используйте глобальные переменные. Переменные и функции внутри вашей анонимной функции не будут доступны извне.

Answer 2

Вы всегда можете использовать родительский класс, в котором вы будете определять стили, используемые вашим виджетом.Таким образом, вы будете очень хорошо контролировать свой CSS, а также не будете конфликтовать с другими CSS на странице.

Например,

.myWidgetName .container{
   /* define your styles here */
}
.myWidgetName .header{
   /* define your styles here */
}

.Везде, где возможно, используйте анонимные функции.Они не имеют имени и не будут созданы как глобальные переменные.Анонимные функции могут быть либо выполнены немедленно, либо использованы для последующего использования.Обычно вы можете заключить весь сценарий в анонимную функцию, хотя до тех пор, пока вы не создадите никаких других глобальных переменных, в этом нет необходимости.

(function () {
  //code to execute

})();