Jak działa szkielet jQuery? - javascript, jquery

Programuję w JavaScript od kilku lat, ale nigdy nie zrozumiałem w jaki sposób różne techniki działają tylko w JavaScript który to działa..

Teraz, po prawidłowym zapoznaniu się z działaniem prototypów i konstruktorów, przyjrzałem się jQuery, aby dowiedzieć się czegoś, zanim wyruszyłem do stworzenia własnej (nie dostępnej publicznie) wtyczki dla mojej własnej strony internetowej.

Problem polega na tym, że nie rozumiem, jak to działa. Oto prawie działająca próbka: http://jsfiddle.net/3zWvR/1/

(function() {
test = function(selector) {
return new test.prototype.init(selector);
}
test.prototype = {
init: function(selector) {
alert("init ran");
if (!arguments[0]) {
return this;
}
}
}
// As I understand the jQuery code, the next line should really be
// test.prototype = {
test.prototype.init.prototype = {
send: function() {
alert("send ran");
}
}

window.ob = test;
})()

ob().send();​

„Skomentowałem tam wiersz, który pokazuje, co naprawdę powinienem tam być, jeśli zrobię to jak jQuery.

Jak zbudowany jest szkielet lub szkielet jQuery i jak działa?

Odpowiedzi:

Cóż, twoje pytanie jest bardzo interesujące i to jest coś, co było na mojej głowie odkąd zacząłem patrzeć na kod źródłowy jQuery. Twój kod powinien działać tak, jak chcesz, jeśli dodasz to:

test.prototype.init.prototype = test.prototype;
test.send = test.prototype.send = function(){
alert("send ran");
};

zamiast tego:

test.prototype.init.prototype = {
send: function() {
alert("send ran");
}
};

Prawdopodobnie mówisz „Już to wiem, właśnie dodajesz metodę send() do test obiektu i samego prototypu ”, ale robiąc to w ten sposób, robisz dokładnie to, co chcesz: zrób to ob, ob() i wszystkie zmienne utworzone za jego pomocą var somevar = ob() mieć metodę send().

Jeśli spojrzysz na kod źródłowy jQuery, użyją tej metody extend() rozszerzyć obiekt jQuery. Patrząc na niektóre .extend() wywołania, zobaczysz, że jeśli jedna metoda / właściwość zostanie dodana tylko do jQuery.fn obiekt (to skrót do prototype), jQuery obiekt nie ma tej metody / właściwości. Możesz to zobaczyć, jeśli wpiszesz w konsoli jQuery.off, to powróci undefined, ale metoda off istnieje w jQuery.fn rodzaj obiektu jQuery.fn.off w konsoli i zobaczysz to).

Jeśli myślisz jQuery, kiedy piszesz wtyczkę, zaczynasz od robienia jQuery.fn.plugin =, więc dodajesz swoją wtyczkę do obiektów utworzonych przez jQuery, ale twoja wtyczka nie jest dostępna bezpośrednio z jQuery.

Myśleć o jQuery jako konstruktor, który ma wiele narzędzi. Obiekt wrócił, gdy to zrobisz $(selector) mieć wszystkie metody jQuery.fn ale nie wszystkie jQuery obiekt, tylko te, które dodali do jQuery.fn.