Как я должен делиться функциями Javascript на нескольких страницах?

Question

Я не совсем понимаю, как работает javascript в модели ООП, поэтому я пришел к стеку переполнения для мудрости.

Мой пример кода:

(function($) {
var $container = $('#container');
var $sidebar = $('#sidebar');


// Sidebar  
var currTab = $('#s1');

if(currTab) {
    currTab.parent().parent().parent().addClass('selectedTop');
    currTab.find(".sideContent").delay(300).slideToggle("slow");
    currTab.addClass('selected');
}

$('#sideTop').delegate('li', 'hover', function(event) {
    var $this = $(this);
    if (event.type == 'mouseenter') {
        if(!$this.hasClass("selected")){
            $this.siblings(".selected").children(".sideContent").toggle();
            $this.siblings(".selected").removeClass('selected');
            $this.find(".sideContent").toggle().addClass('selected');
            $this.addClass('selected');
        }
    }
});


})(this.jQuery);

Этот код кэширует мой контейнер и div боковой панели и управляет зависанием вкладок на моей боковой панели. Они будут на каждой странице, поэтому я просто включил файл js на каждую страницу, и он работает как обычно. Теперь я дошел до того, что я хочу настроить каждую страницу с определенной вкладкой боковой панели, открытой по умолчанию (определяется переменной currTab ). Если он установлен, он открывается по умолчанию и остается открытым после того, как мышь покидает боковую панель.

Я не нашел способа настроить currTab на каждой странице без необходимости полностью заново вставлять весь код, связанный с боковой панелью, что делало любые обновления скрипта громоздкими.

Как мне подходить к этому? Спасибо

Answer 1

Извините, что вызвал путаницу из-за моего непонимания, но один из связанных вопросов ответил на мой так, как я не знал, как искать:

Сначала он установил «класс», который можно было бы включить в качестве отдельного JS, а затем передать с помощью jQuery.ClassName (параметры)

Я попробовал это, и оно отлично работает, разделяя код, который соответствует, со значениями, которые будут меняться на каждой странице.

(function($){
var undefined;

$.ClassName = function(options){
    var self = this;
    var cfg = $.extend(true, {}, this.defaults, options);

    // ********************
    // start:private
    // ********************
    function _init(){

    };

    // ********************
    // start:public
    // ********************
    this.methodName = function(){

    };

    _init();
};

$.ClassName.prototype.defaults = {};
})(jQuery);

Answer 2

с занятиями.Просто добавьте класс, такой как "currTab", на любую активную вкладку.В вашем JS проверьте этот класс на вкладке, а когда вкладка изменится, удалите этот класс из старого и добавьте его в новый.

Answer 3

Один из способов - объявить currTab по-разному на каждой HTML-странице и удалить «var currTab = $ ('# s1');" из вашего файла JavaScript. Остальные вхождения currTab в файле JavaScript все еще могут ссылаться на него.

Answer 4

Добавьте класс к элементу, который вы хотите быть активным по умолчанию. Используйте JS, чтобы определить класс и реагировать соответствующим образом.