Wir haben die Bind-Methode und die Ready-Funktion bereits früher erweitert. Dieses Mal möchte ich über die Funktionen $.fn.extend und $.extend sprechen.
Mehr gibt es nicht zu sagen, kommen wir gleich zur Sache!
Werfen wir zunächst einen Blick auf den Unterschied zwischen diesen beiden Funktionen:
$.fn.extend ist eine Erweiterungsmethode für das abgefragte Knotenobjekt und eine Methode, die auf der Prototyperweiterung von $
basiert$.extend ist eine reguläre Erweiterungsmethode und eine statische Methode von $.
Schauen Sie sich den Code an, den wir zuvor geschrieben haben:
(function (win) { var _$ = function (selector, context) { return new _$.prototype.Init(selector, context); } _$.prototype = { Init: function (selector, context) { }, each: function (callback) { } } _$.prototype.Init.prototype = _$.prototype; window.$ = window.JQuery = _$; })(window);
Dies ist der Code des Hauptteils.
Lassen Sie mich zunächst die Methode $.fn.extend erweitern:
Die ursprüngliche Absicht dieser Methode besteht darin, dass wir nach der Erweiterung mit $("").newMetod() darauf zugreifen können. Tatsächlich besteht sie darin, dem $-Prototyp eine Erweiterungsmethode hinzuzufügen. Der FN in der Mitte ähnelt tatsächlich der Rolle eines Namespace und hat keine praktische Bedeutung. Zur Unterscheidung von $.extend.
Wer sich mit Prototypen auskennt, weiß auf einen Blick: Wäre es nicht ausreichend, $.fn einfach auf den Prototyp von $ zeigen zu lassen?
Wir haben also den folgenden Code: _$.fn = _$.prototype;
Als nächstes fügen wir die Extend-Methode hinzu:
var isObj = function (o) { return Object.prototype.toString.call(o) === "[object Object]"; } _$.fn.extend = function (obj) { if (isObj(obj)) { for (var i in obj) { this[i] = obj[i]; } } }
Die Funktion von isObj in diesem Code besteht darin, zu bestimmen, ob der eingehende Parameter ein Objektobjekt ist. _$.fn.extend Diese Methode ist tatsächlich dieselbe wie _$.prototype.extend. Schauen Sie sich diesen Code an das gleiche wie der JQUERY-Quellcode Es ist nicht dasselbe, ich habe es nach meinen eigenen Wünschen geschrieben.
Lassen Sie uns die Methode $.extend implementieren. Wie bereits erwähnt, fügt diese Methode tatsächlich eine statische Methode zu $ hinzu:
$.extend = function (obj) { if (isObj(obj)) { for (var i in obj) { this[i] = obj[i]; } } }
Sie werden feststellen, dass die beiden Methoden gleich sind, aber wenn Sie genau darüber nachdenken, sind sie unterschiedlich:
_Dies in $.fn.extend stellt tatsächlich $.prototype dar, und dies in $.extend repräsentiert $.
Wir haben diese beiden Methoden implementiert und hier ist der vollständige Code:
(function (win) { var _$ = function (selector, context) { return new _$.prototype.Init(selector, context); } _$.prototype = { Init: function (selector, context) { }, each: function (callback) { } } _$.prototype.Init.prototype = _$.prototype; _$.fn = _$.prototype; var isObj = function (o) { return Object.prototype.toString.call(o) === "[object Object]"; } _$.fn.extend = function (obj) { if (isObj(obj)) { for (var i in obj) { this[i] = obj[i]; } } } _$.extend = function (obj) { if (isObj(obj)) { for (var i in obj) { this[i] = obj[i]; } } } window.$ = window.JQuery = _$; })(window);
Die Art der Anwendung ist eigentlich
$.fn.extend( { method:function(){ } }) $.extend( { method:function(){ } })
Der Code unterscheidet sich vom Jquery-Quellcode. Ich möchte hauptsächlich über die darin enthaltenen Ideen nachdenken.