Verwenden von jquery-Methode .find() innerhalb von Objektdeklaration

Question

Ich bin neu zu js Objekt und ich versuche, ein einfaches Plugin in jQuery zu schreiben, aber ich habe Probleme, Eigenschaften zu deklarieren.
Schauen Sie sich das JSFIDDLE für eine bessere markierten Code

$.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 
}); 

Nun meine Frage ist: Was ist falsch an dieser Objektdeklaration?
Weil, wenn ich versuche, slider.sliderWidth zu loggen, funktioniert es nicht, ich bekomme null. Ich versuchte slider.sliderList ich ein ganz anderes Ergebnis erhalten einzuloggen, wie ich $(".slider-content-list")

UPDATE
Hier unten ist der Screenshot des log zwischen slider.arrow und $(".slider-arrow")

Hoffnung ist alles klar log ist :)
Vielen Dank im Voraus!

Answer 1

Sie können die Eigenschaften amountItems oder sliderWidth nicht innerhalb der Objektdeklaration festlegen, da die Eigenschaftswerte noch nicht festgelegt sind, da das Objekt noch nicht deklariert wurde.

Zum Beispiel spielt es keine Rolle, ob Sie haben:

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

Oder:

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

Weder wird funktionieren, weil das Objekt noch nicht deklariert wurde.

Mit Ihrem Beispiel funktionieren würde, die folgend, beinhaltet aber offensichtlich Code-Duplizierung/Leistungskosten:

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

Alternativ könnten Sie tun:

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