我不完全了解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的方法,而不必完全重新粘贴与侧栏相关的所有代码,从而使脚本的任何更新变得麻烦。

我应该如何处理呢?谢谢

最佳答案

很抱歉因我缺乏理解而引起困惑,但是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);

关于javascript - 我应该如何在多个页面之间共享Javascript函数?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6614554/

10-09 23:59