Uważam się za (w najlepszym razie) w środkowym poziomie facet JavaScript ... i oczywiście ... Chcę zrozumieć, jak niektóre rzeczy są realizowane, więc mogę napisać lepszy kod. Jako taki wyglądałem pod kapaszt jQuery, próbując, aby był trochę więcej o tym, jak osiągają pewne rzeczy.

na przykład:
JQUERY obsługuje przypadek, w którym IE i opera zwracają przedmioty według nazwy zamiast ID, wykonując następujące czynności:

// HANDLE: $("#id")
else 
{
    var elem = document.getElementById( match[3] );

    // Handle the case where IE and Opera return items
    // by name instead of ID
    if ( elem && elem.id != match[3] )
        return jQuery().find( selector );

    // Otherwise, we inject the element directly into the jQuery object
    var ret = jQuery( elem || [] )
    ret.context = document;
    ret.selector = selector;

    return ret;
}

... Dobra, to proste!

, ale typowa linia jQuery Code łańcucha serii poleceń razem:

$('#someElementId').fadeIn().css({ ...Some CSS Properties ... });

Teraz ... myślę, że część łańcuchowa jest obsługiwana w następującym obszarze:

jQuery.extend = jQuery.fn.extend = function() { ... };

Czaruję przez ten obszar ... i widzę, jak przetworzone jest komendę single ... ale tak naprawdę nie widzę, gdzie lub jak łańcucha polecenia są zarządzane. Więc oczywiście coś brakuje.

więc moje pytanie brzmi:

  1. W jaki sposób jQuery wdraża łańcuch selektorów?
3
Prisoner ZERO 8 grudzień 2011, 17:19

5 odpowiedzi

Najlepsza odpowiedź

Jak na twój komentarz:

Jest to z przykładu tutaj: http://en.wikipedia.org/wiki/Fluent_interface#javascript . Z dodatkowymi komentarzami

var Car = function() {

        var speed, color, doors;

        this.setSpeed = function(speed) {
                this.speed = speed;
                **//Returns the reference to the calling `car` object** 
                return this; 
        };

        this.setColor = function(color) {
                this.color = color;
                **//Returns the reference to the calling `car` object** 
                return this; 
        };

        this.setDoors = function(doors) {
                this.doors = doors;
                **//Returns the reference to the calling `car` object** 
                return this; 
        };

};

// Fluent interface
**//Each method returns a reference to the object itself**
**//so the next method chain is refering back to the previous returned value**
**//ie - itself, the orginal object that started the call chain**
myCar = new Car();
myCar.setSpeed(100).setColor('blue').setDoors(5);

// Example without fluent interface
**// normal, non fluent style, where each method returns Void**
**// so you need to start with the object reference yourself each time**
myCar2 = new Car();
myCar2.setSpeed(100);
myCar2.setColor('blue');
myCar2.setDoors(5);
2
asawyer 8 grudzień 2011, 13:39

Wszystkie metody obiektu jQuery zwróci obiekt jQuery.

W tym konkretnym przykładzie można zobaczyć, że są tworzone jQuery().find( selector ) i jQuery( elem || [] )

3
Quentin 8 grudzień 2011, 13:27

Spróbuję wyjaśnić z przykładem. W tym przykładzie powinieneś otwierać konsolę deweloperową Chrome lub Firebug.

var $m = function() {
    return this;
};
$m.log = function(param) {
    console.log(param);
    return this;
};
$m.alert = function(param) {
    this.log('alerting: ' + param);
    alert(param);
    return this;
};
$m.log('start').alert('Sample message').log('end').log('success');

Jak widać, każda funkcja powraca this, która odnosi się do tego przykładu $m. W ten sposób mogę łańcuchować tyle metod, ile chcę.

2
Emre Erkan 8 grudzień 2011, 13:33

Moje zrozumienie jest takie: funkcje jQuery zwracają odniesienie do odpowiedniego obiektu, gdy wykonują, co pozwala na współpracę. Więc, jeśli wykonasz operację, aby znaleźć div, funkcja zwraca odniesienie, umożliwiając natychmiast łańcuchem innej pracy na końcu.

1
James 8 grudzień 2011, 13:29

Korzystanie z Zwróć to; Zwraca obiekt nadrzędny

var myObject = {
  a: function(){
    alert('a');
    return this; 
    //this == myObject, so returning myObject means 
    //the next function in the chain will call myObject.___
  },
  b: function(){
    alert('b');
    return this;
  }
}
myObject.a().b();//alerts 'a' then alerts 'b'
1
Will Stern 8 grudzień 2011, 14:19