Java Programmer's JavaScript Learning Note (9--jquery tool method)

Plan to complete this note in the following order:

1. Philosophy.
2. Attribute copying and inheritance.
3. This/call/apply.
4. Closure/getter/setter.
5. prototype.
6. Object-oriented simulation.
7. The basic mechanism of jquery.
8. jquery Selector.
9. jquery Tool method.
Jquery-expands at the "class" level.
Jquery-is expanded at the "object" level.
jquery-extension Selector.
JQuery UI.
14. Extend the jquery UI.

This is the 9th note, from the perspective of jquery source, talk about the tools of jquery.

1, first look at several tool methods how to use:
var t = $.trim (' >>_<< ');
var PS = $.param ({x:15,y:16});
Jquery.type (function () {}) = = = "function"

jquery's tool approach, relative to jquery itself, is relatively independent.

2. How are these methods defined?
Let's guess, try.
We know that jquery (or $) is a global variable, and these methods should be attributes of the jquery variable.
We can add it with the following syntax:
jquery.xx = function (A, b) {
return a + B;
}
Try
var r1 = jquery.xx (2,3);
Console.log (R1);//Output:5
var r2 = $.xx (3,3);
Console.log (R2);//Output:6
The above code, stating that $ and jquery refer to the same variables, they are the same.
This code is for the purpose of defining tool methods, but does jquery do this?

3.
To view the jquery source code, jquery defines the tool method using the following syntax:
Jquery.extend ({
Noconflict:function (deep) {
if (window.$ = = = JQuery) {
window.$ = _$;
}

if (deep && window.jquery = = = JQuery) {
Window.jquery = _jquery;
}

return jQuery;
}
//, ...
});
The Extend method is defined as follows:

Defines a method that assigns values to JQuery.fn.extend and jquery.extend.
JQuery.fn.extend and Jquery.extend, although defined the same, but the caller is different, thus the method in this point is different, thus implementing different functions.
Instead of explicitly declaring parameters, they are obtained dynamically through arguments, which supports richer functionality.
Jquery.extend = JQuery.fn.extend = function () {
var src, copyisarray, copy, name, options, clone,
Use the first parameter as the target object
target = Arguments[0] | | {},
I initialize to 1, and I don't know what to do with it yet.
i = 1,
Length indicates the number of arguments
Length = Arguments.length,
Deep should indicate whether to copy in depth, default to No.
Deep = false;

Handle a deep copy situation
if (typeof target = = = "Boolean") {
If the first argument is a Boolean type, the second argument is the target object
Shape: Jquery.extend (False,uiobject,...);
Deep = target;
target = Arguments[1] | | {};
Skip the Boolean and the target
I is an array subscript for the current parameter, starting with 0
i = 2;
}

Handle case if Target is a string or something (possible in deep copy)
The target object is either a function or an object, passed in to other parameters, and target defaults to an empty object.
if (typeof target!== "Object" &&!jquery.isfunction (target)) {
target = {};
}

Extend JQuery itself if only one argument is passed
Currently, if the first parameter is not Boolean, the I value is 1,length also 1, which is the case of extend (obj)
If it is Boolean, the I value is 2,length also 2, which is the case of extend (true,obj)
In short, no incoming SRC
if (length = = = i) {
JQuery has collected the incoming parameters.
The parameter subscript points back to the parameter passed in, which points to the SRC
target = this;
I.;
}

 //now I points to a parameter behind target, it should be src
 //each parameter passed in as SRC
 for (; i < length; i++) {
   //only deal with non-null/undefined values
  //Such filtering is not empty Ah, if it is undefined will be filtered out?
  //not do typeof src whether "object", "function" judgment?
  if (options = arguments[i]! = null) {
   //assignment to the variable options
   // Extend the Base Object
   for (name in options) {
    src = target[name];
    copy = options[name];
    
    //: If it's dies, don't hooves.
    // Prevent Never-Ending loop
    if (target = = = copy) {
      Continue
    }

    //Recurse If we ' re merging plain objects or arrays
    //to ordinary objects and arrays, Consider recursive deep copy
    //The question is, what is a normal object? Does the function count?
    if (Deep && copy && jquery.isplainobject (copy) | | (Copyisarray = Jquery.isarray (copy))) {
     if (copyisarray) {
      //set the default value for the next loop
      copyisarray = false; The
      //target object is killed if it originally had this property, but not the array type
       clone = src && jquery.isarray (src)? SRC: [];

     } else {
      //target object If it does not have this property or is not a normal object, the default is {}.
      //If you already have an ordinary object, use it
      clone = src && jquery.isplainobject (SRC)? src: {};
     }
     //Recursive
     //if written as Jquery.extend (deep, clone, copy) Is the same as
     //never move original objects, clone them
      target[name] = Jquery.extend (deep, clone, copy);

Don ' t bring in undefined values
For undefined and! = NULL also to deepen understanding
} else if (copy!== undefined) {
In the case of Jquery.extend ({xx,xfasf}), the extension is this, that is, the caller.
Direct modification to target, no clone created
target[name] = copy;
}
}
}
}

Return the Modified Object
return target;
};

4, and then see how Jquery.isplainobject defines the
 isplainobject:function (obj) {
  
  // Must is an Object.
  //Because of IE, we also has to check the presence of the constructor property.
  //Make sure the DOM nodes and window objects don ' t pass through, as well
  //translation:
   //must be an object.
  //Because of IE, we must also check for constructor properties. The
  //confirms that DOM nodes and window objects are not missed, and they are not ordinary objects.
  if (!obj | | jquery.type (OBJ)!== "Object" | | obj.nodetype | | jquery.iswindow (obj)) {
&NBSP;&NBSP;&N bsp;//The following is not returned by null, undefined, 0, Jquery.type returns not object, Dom object, window object
   //So typeof is string, number, function, regular, date are not
   return false;
  }

try {
Not own constructor property must is Object
if (Obj.constructor &&
!core_hasown.call (obj, "constructor") &&
!core_hasown.call (Obj.constructor.prototype, "isprototypeof")) {
return false;
}
} catch (e) {
ie8,9 'll throw exceptions on certain host objects #9897
return false;
}
Enumeration, the property is enumerated first, and if the last property is its own property, then all properties are own.
In short, there can be no inheritance to be enumerated to the properties of your sister! Why is there such a requirement?
OWN Properties is enumerated firstly
If last one was own, then all properties are own.

var key;
for (key in obj) {}

return key = = = Undefined | | Core_hasown.call (obj, key);
}
5.
Try

Jquery.extend ({
Sayhi:function (You) {
Console.log (' Hi ', you);
}
});

$.sayhi (' Stanley '); Output:hi Stanley

Not bad! What if you want to overwrite the existing methods of jquery?
Jquery.extend ({
Isplainobject:function (obj) {
Return ' baby, I am not sure. ';
}
});

var r = $.isplainobject ({});
Console.log (R); Output:baby, I am not sure.
This... Well, you can do it. Think of another way.

Play again:
Jquery.extend ({
Extend:function (obj) {
Do nothing
Return ' Who am I? ';
}
});

var r = $.extend ({x:function () {alert ();}});
Console.log (R); output:who am I?
Jquery.x ();//error:function not being defined
Again, so that no one can extend the JQuery method by extend.
But there is a more straightforward approach.

Java Programmer's JavaScript Learning Note (9--jquery tool method)