javascript - 我应该如何跨多个页面共享 Javascript 函数？

Question

我不完全理解 javascript 在 OOP 模型中是如何工作的，所以我来求助于堆栈溢出。

我的示例代码:

(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

很抱歉因为我的不理解而造成混淆，但是 related questions 中的一个以我不知道如何搜索的方式回答了我的问题:

他首先设置了一个“类”，可以作为单独的 JS 包含在内，然后使用 jQuery.ClassName(options) 进行通信

我已经尝试过了，它完美地工作，将一致的代码与将在每个页面上更改的值分开。

(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);