在对象声明中使用 jquery 方法 .find()

Question

我是 js 对象的新手，我正在尝试用 jQuery 编写一个简单的插件，但我在声明属性时遇到了问题。
查看此JSFIDDLE 以获得更好的突出显示代码

$.fn.robertSlider = function(params){
    var slider = {
        arrow:              this.find(".slider-arrow"),
        arrowNext:          this.find(".slider-arrow--arrowNext"),
        arrowPrev:          this.find(".slider-arrow--arrowPrev"),
        sliderItem:         this.find(".slider-item"),
        sliderList:         this.find(".slider-content-list"),

        itemsOnScreen:      params.itemsOnScreen,
        marginCollapse:     params.marginCollapse
    };

    slider.amountItems      = slider.sliderItem.length; // is there a way to declare this directly inside the obj?
    slider.sliderWidth      = slider.sliderList.width(); // is there a way to declare this directly inside the obj?

    var helpers = {
        firstVisible:       0,
        canGoNext:          true,
        canGoPrev:          false
    }
}




$(".slider-container").robertSlider({
        itemsOnScreen:          6,
        marginCollapse:         10
});

现在我的问题是：这个对象声明有什么问题？
因为如果我尝试登录slider.sliderWidth，它不起作用，我得到null。 我尝试记录 slider.sliderList 我在记录 $(".slider-content-list") 时得到完全不同的结果

更新
下面是slider.arrow和$(".slider-arrow")之间的日志截图

希望一切都清楚:)
提前致谢！

Answer 1

您不能在对象声明中设置 amountItems 或 sliderWidth 属性，因为尚未声明对象，因此尚未设置属性值。

比如你有没有：

var a = {
  x: 1,
  y: a.x+1
};

或者：

var a = {
  y: a.x+1,
  x: 1
};

这两种方法都不起作用，因为尚未声明该对象。

对于您的示例，以下内容将起作用，但显然包括代码重复/性能成本：

var slider = {
    arrow:              this.find(".slider-arrow"),
    arrowNext:          this.find(".slider-arrow--arrowNext"),
    arrowPrev:          this.find(".slider-arrow--arrowPrev"),
    sliderItem:         this.find(".slider-item"),
    sliderList:         this.find(".slider-content-list"),

    itemsOnScreen:      params.itemsOnScreen,
    marginCollapse:     params.marginCollapse,

    amountItems:        this.find(".slider-item").length,
    sliderWidth:        this.find(".slider-item").width()
};

或者你可以这样做：

var obj = {
    arrow:              this.find(".slider-arrow"),
    arrowNext:          this.find(".slider-arrow--arrowNext"),
    arrowPrev:          this.find(".slider-arrow--arrowPrev"),
    sliderItem:         this.find(".slider-item"),
    sliderList:         this.find(".slider-content-list"),
}

var slider = {
    arrow:              obj.arrow,
    arrowNext:          obj.arrowNext,
    arrowPrev:          obj.arrowPrev,
    sliderItem:         obj.sliderItem,
    sliderList:         obj.sliderList,

    itemsOnScreen:      params.itemsOnScreen,
    marginCollapse:     params.marginCollapse,

    amountItems:        obj.sliderItem.length,
    sliderWidth:        obj.sliderItem.width()
};