Как правильно подключать js скрипты на страницу?

Question

[edu30151]

Здравствуйте! Большое спасибо тем, кто помогает :)
Попробую объяснить по подробнее.
Есть к примеру плагин easytabs(плагин может быть любой). Все плагины подключаю через gulp они собираются в один сжимаются и собираются в файл lib.js. На страницах html подключаю lib.js и common.js(для кастомных скриптов или вызовов плагинов).

var scr = {"scripts":[
		{"src" : "js/libs.js", "async" : false},
		{"src" : "js/common.js", "async" : false}
		]}

Можно делать все без gulp и подключать как обычно
'./app/libs/easyTabs/jquery.easytabs.min.js' по сути получается тоже самое.
Так вот:
на странице index.html есть div с классом .tab-container в common.js я пишу
$(' .tab-container').easytabs();
ну чтоб заработали табы.
А на странице,к примеру, contact.html нет diva .tab-container. И в консоль пишет .easytabs() is not function ну или другую какую нибудь ошибку.
Как обходить эти ошибки:
1.подключать отдельно на страницу где используется
$(' .tab-container').easytabs();
2.писать условия

if($('#tab-container').size()) {
		$(this).easytabs();
	}

Вообщем кто знает подскажите что делать, как правильно?
Если подключать отдельно по модулям то подскажите как и поможет ли это.
Думаю все описал.
Спасибо!

Answer 1

[Роман]

$(function(){
 if($('#tab-container').length) {
    $('#tab-container').easytabs();
  }
});

Можно проверить, есть ли элемент на странице и уже потом запускать табы

Comments

[edu30151]

Это по сути тоже самое
if($('#tab-container').size()) {
$(this).easytabs();
}

[edu30151]

?

[Роман]

Тоже самое, но size() работает медленнее, поэтому лучше length

[Роман]

А вообще, если вы работаете, например, используя какое то окружение, фреймворк или cms, то можно воспользоваться конкретной документацией, как лучше подключать скрипты js на конкретную страницу. Например, в wordpress, в каком нибудь конкретном файле шаблоне, там где у вас предполагается использовать к примеру, табы, можно воспользоваться таким кодом:
wp_enqueue_script('jqueryUICore', get_template_directory_uri() . '/js/jquery-ui.min.js');
Подключить к примеру jquery UI или еще какой то срипт

Answer 2

[fetis26]

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