Analysis of the core architecture of the jQuery Library and the simple implementation of common APIs, analysis of the jquery architecture API

Analysis of the core architecture of the jQuery Library and the simple implementation of common APIs, analysis of the jquery architecture API

The following code only demonstrates the implementation principle of prototype inheritance in the jQuery Library and the simple implementation of its common functional modules, and does not involve excessive compatibility processing.


// This is my $;
(Function (window, undefined ){
// Core Architecture
Function my $ (selector ){
// Use the constructor to create a my $ object. The constructor is a method in its prototype.
Return new my $. prototype. init (selector );
}
My $. fn = my $. prototype = {
Constructor: my $,
Type: my $,
Events :{},
Length: 0,
// Core module init
Init: function (selector ){
If (! Selector ){
Return this;
}
// If the parameter is a string
If (typeof selector = "string "){
// For html tags
If (selector. charAt (0) = "<"){
[]. Push. apply (this, this. constructor. parseHtml (selector ));
} Else {
// If the parameter is a selector,
[]. Push. apply (this, this. constructor. Select (selector ));
}
Return this;
}
// If the parameter is an entry function
If (typeof selector = "function "){
Var oldfn = window. onload;
Window. onload = function (){
Oldfn & oldfn ();
Selector ();
}
}
// If the parameter's DOM Element
If (selector. nodeType ){
This [this. length ++] = selector;
Return this;
}
// If the parameter is a my $ object
If (selector. type = "my $ "){
// Return selector;
[]. Push. apply (this, selector );
Return this;
}
// If the parameter is a pseudo array object
If (selector. length> = 0 ){
[]. Push. apply (this, selector );
Return this;
} Else {
This [0] = selector;
This. length = 1;
}
Return this;
},
// Common method module
ToArray: function (){
Return []. slice. apply (this );
},
Get: function (index ){
If (index = undefined ){
Return this. toArray ();
} Else {
If (index> = 0 ){
Return this [index];
}
Return this [this. length + index];
}
},
Eq: function (index ){
Return this. constructor (this. get (index ));
},
Each: function (callback ){
This. constructor. each (this, callback );
Return this;
},
Map: function (callback ){
Return this. constructor. map (this, callback );
},
End: function (){
Return this. prev | this;
}
}
// Implement the prototype chain inheritance Structure
My $. prototype. init. prototype = my $. fn;
// Implement the add method Function
My $. fn. extend = my $. extend = function (obj ){
For (var k in obj ){
This [k] = obj [k];
}
}
// --------------- Tool method module ------------------------------------
// Tag Creation
My $. parseHtml = (function (){
Var node = document. createElement ("div ");
Return function (str ){
Var arr = [];
Node. innerHTML = str;
Arr. push. apply (arr, node. childNodes );
Return arr;
}
})();
// Selector Module
My $. Select = (function (){
// A simple implementation without considering compatibility is to use querySelectAll.
Var support ={}, // capability Detection
Rnative =/\ [nativecode \]/,
Push = []. push;
Support. qsa = rnative. test (document. querySelectorAll + "");
Var Select = function (selector ){
If (support. qsa ){
Return document. querySelectorAll (selector );
}
}
Return Select;
})();
// --------------------- Add tool method ------------------------
My $. extend ({
Each: function (arr, callback ){
If (arr. length> = 0 ){
For (var I = 0; I <arr. length; I ++ ){
If (callback. call (arr [I], I, arr [I]) === false ){
Break;
}
}
} Else {
For (var k in arr ){
If (callback. call (arr [k], k, arr [k]) === false ){
Break;
}
}
}
Return arr;
},
Map: function (arr, callback ){
Var newArr = [];
If (arr. length> = 0 ){
For (var I = 0; I <arr. length; I ++ ){
Var res = callback (arr [I], I)
If (res! = Undefined ){
NewArr. push (res );
}
}
} Else {
For (var k in arr ){
Var res = callback (arr [k], k)
If (res! = Undefined ){
NewArr. push (res );
}
}
}
Return newArr;
},
// DOM operation
Append: function (parent, newchild ){
Parent. appendChild (newchild );
},
// Style operation
GetStyle: function (dom, name ){
If (dom. currentStyle ){
Return dom. constructor [name];
} Else {
Return window. getComputedStyle (dom, null) [name];
}
},
// Attribute operation
GetText: function (dom ){
If (dom. innerText ){
Return dom. innerText;
} Else {
Return dom. textContent;
}
}
// You can continue adding...
});

// Instance method --- DOM operation
My $. fn. extend ({
AppendTo: function (nodes ){
Var list = this. constructor (nodes );
Var newObj = this. constructor ();
Var temp;
For (var I = 0; I <list. length; I ++ ){
For (var j = 0; j <this. length; j ++ ){
Temp = I = 0
? This [j]
: This [j]. cloneNode (true );
List [I]. appendChild (temp );
NewObj [newObj. length ++] = temp;
}
}
NewObj. prev = this;
Return newObj;
},
Append: function (nodes ){
This. constructor (nodes). appendTo (this );
Return this;
}
// You can continue adding...
});
// Event Functions
My $. fn. extend ({
On: function (type, fn ){
Return this. each (function (I, v ){
V. addEventListener (type, fn );
});
},
Off: function (type, fn ){
Return this. each (function (I, v ){
V. removeEventListener (type, fn );
});
}
})
My $. each ("onblur, onfocus, onclick, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout," +
"Onmouseover, onmouseup, onmousewheel, onkeydown, onkeypress, onkeyup"). split (",")
, Function (I, v ){
Var event = v. slice (2 );
My $. fn [event] = function (callback ){
Return this. on (event, callback );
};
});
// Style operation
My $. fn. extend ({
Css: function (name, value ){
If (typeof name = "string" & typeof value = "string "){
This. each (function (){
This. style [name] = value;
})
} Else if (typeof name = "string" & value = undefined ){
Return this [0]. style [name];
} Else if (typeof name = "object" & value = undefined ){
This. each (function (){
For (var k in name ){
This. style [k] = name [k];
}
})
}
Return this;
}
});

// Attribute operation
My $. fn. extend ({
Attr: function (name, value ){
If (typeof name = "string" & typeof value = "function "){
This. each (function (I, v ){
This. setAttribute (name, value. call (this, v, I ));
});

} Else if (typeof name = "string" & typeof value = "string "){
This. each (function (){
This. setAttribute (name, value );
});

} Else if (typeof name = "string" & value = undefined ){
Return this [0]. getAttribute (name );
} Else if (typeof name = "object" & value = undefined ){
This. each (function (){
For (var k in name ){
This. setAttribute (k, name [k]);
}
});
}
Return this;
},
Html: function (value ){;
If (typeof value = 'string '){
This. each (function (){
This. innerHTML = value;
});
} Else if (value = undefined ){
Return this [0]. innerHTML;
}
Return this;
}
});
    
Window. my $ = window. $ = my $;
}) (Window );