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.
