jquery Source Code Analysis: The jquery tool method detailed 4

jquery's Tool method, in fact, is static method, the source code is through the Extend method, these tools are added to the jquery constructor.

Jquery.extend ({

......

Guid:1,

　　Unique identifier, which is related to the event. For example: function Show () {alert (this);}, $ ("#input1"). Click (Show), $ ("#input2"). Click (function () {$ ("#input1"). Off ()}), The Show method here is the event method, so it is easy to find the event method show by canceling the event bindings off by off. But if you change $ ("#input1"). Click (Show) to $ ("#input1"). Click ($.proxy (Show,window)), then show is not an event method, but a normal method, then when the off is canceled, How it finds this common method show, in fact, is through the GUID, because the GUID will accumulate, so it is unique and therefore can be found. Please look at the next method to know the details.

Proxy:function (FN, context) {

　　　The this point that changes the method (function) execution. For example: $.proxy (show,document), there are two ways to give show a pass: var fn = $.proxy (show,document,1,2), and FN (3,4). When the final show executes, it turns into show (1,2,3,4), and proxy returns a function that executes the Show method when the FN is called.
var tmp, args, proxy;

if (typeof context = = = "string") {//Here handles special invocation situations, such as: $.proxy (obj, "show") (Normal $.proxy (obj.show,obj)), when the Show method executes, This is the obj that points to, and show is the property method of obj. var obj = {show:function () {}}.
TMP = fn[context];
context = fn;
fn = tmp;
}

if (!jquery.isfunction (FN)) {
return undefined;
}

args = Core_slice.call (arguments, 2); //incoming parameters, equivalent to the example [+]
Proxy = function () {
Return fn.apply (Context | | This, ARGS.CONCAT (core_slice.call (arguments))); //combine [3,4] and [] to [1,2,3,4]
};

Proxy.guid = Fn.guid = Fn.guid | | jquery.guid++;

The first time, Fn.guid (show.guid) is undefined,proxy.guid = Fn.guid = 1,show.guid = 1,

function () {return fn.apply (context | | This, ARGS.CONCAT (core_slice.call (arguments)))}.guid=1, unique identifier, cancellation binding, can be used.

return proxy;
},

　$ (). CSS (), $ (). attr (), the Get/set is implemented by different parameters. The number of arguments, and the type of the parameter. $ ("div"). CSS ("width"), gets the first DIV element of the width,$ ("div"). CSS ("width", 100) sets the width of all div elements. $ ("div"). css ({width:100,height:200}) is also set for all DIV elements, although there is only one argument, but the type is different. There are many of these methods in jquery, so it is unified with access.

Access:function (Elems, FN, key, value, chainable, Emptyget, Raw) {

　　　　The element that elems the action, which may be a collection. FN is a callback function (which differs in the callback function, for example, CSS setting style, attr setting property). Key and value are property names and property values. Chainable is set to True, and is false to get.
var i = 0,
Length = Elems.length,
Bulk = key = = NULL;

if (Jquery.type (key) = = = "Object") {//Handle this type $ ("div"). css ({width:100,height:200})
Chainable = true;
For (i in key) {
Jquery.access (Elems, FN, I, Key[i], true, Emptyget, raw);
}

}

else if (value!== undefined) { //Handle this $ ("div"). CSS ("width", +)
Chainable = true;

if (!jquery.isfunction (value)) {
Raw = true; //String (number)
}

if (bulk) { //If there is no key value
if (raw) { //If value is a string (number)
Fn.call (elems, value); //Call callback method
fn = null; //Assign the callback method to null

}

else { //If it's a function, it doesn't have to be understood in depth
bulk = FN;
fn = function (Elem, key, value) {
Return Bulk.call (JQuery (elem), value);
};
}
}

if (FN) { //If there is no key value, and value is a string (number), this is null and will not execute
for (; i < length; i++) {
FN (Elems[i], key, Raw Value:value.call (elems[i], I, FN (Elems[i], key)));
}
}
}

Return chainable? //Get, Chainable is false
Elems: //Set, Chainable is true, return elements directly, and perform subsequent chained operations

Bulk?
Fn.call (elems): //callback if no key value
Length? FN (Elems[0], key): Emptyget; When there is a key value, determine if the element has no element, and then get the key value of the first element (the value of the property name), and return emptyget if there is no element.
},

Now:Date.now, //Current time is the number of milliseconds from 1970, equivalent to (new Date ()). GetTime ()

　　The following methods are used to handle this situation:

<div id= "Div1" style= "Width:100px;height:100px;background:red;display:none;" >ddd</div>

$ ("#div1"). Get (0). offsetwidth takes 0 because it is display:none and does not exist in the DOM tree. $ ("#div1"). Width () takes 100, why jquery can. Because jquery will deal with the elements of Display:none and become <div id= "Div1" style= "Width:100px;height:100px;background:red;display:block"; Visibility:hidden;position:absolute ">DDD</DIV>" Here you can go through $ ("#div1"). Get (0). offsetwidth took 100, Then remove the newly added style.

Swap:function (Elem, Options, callback, args) { //css conversion, internal use
var ret, name,
Old = {};

for (name in options) {

　　　　　Save the old style and insert the new style. This assumes Options={width:100px;height:100px;background:red;display:block;visibility:hidden;position:absolute}

Elem.style = {Width:100px;height:100px;background:red;display:none;}
old[name] = elem.style[name];
elem.style[name] = options[name];
}

ret = callback.apply (elem, args | | [] );

　　　Gets the CSS value of the element by inserting a new style, callback = function (args) {if (args is not []) return this[args]},args= offsetwidth;

for (name in options) { //restore old style
elem.style[name] = old[name];
}

return ret;
}

......

})

Finally, let's talk about this method:

function Isarraylike (obj) {//Determines whether an array, an array of classes, JSON with length, yes, returns True
var length = Obj.length,
Type = Jquery.type (obj);

if (Jquery.iswindow (obj)) { //worry that the Window object has the Length property
return false;
}

if (Obj.nodetype = = = 1 && length) {

　Element node object, and has the length property, which returns True. This is not the case with document.getElementsByTagName ("div") and body.childnodes. may be used for internal calls, here if anyone knows, you can tell me.

return true;
}

return type = = = "Array" | | Type!== "function" && //cannot be a function because the function may also have the length property
(length = = 0 | | typeof length = = = "Number" && length > 0 && (length-1) in obj);

　　　typeof length = = = "Number" && length > 0 && (length-1) in obj) process {0: "A", 1: "B", length:2} this case. Length = = 0 when processing arguments is empty, it is not to pass any data into the function, then the arguments in the function has a length of 0, but is an array of classes. document.getelementsbytagname ("div") and body.childnodes are also arrays of classes.
}

Come on!

jquery Source Code Analysis: The jquery tool method detailed 4