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

Plan to complete this note in the following order, for example:

2. Java Program Ape's JavaScript Learning notes (concept)
4. Java Program Ape's JavaScript Learning notes (2--property copy and inheritance)
6. Java Program Ape's JavaScript Learning Note (3--this/call/apply)
8. Java Program Ape's JavaScript Learning Note (4--this/closure/getter/setter)
10. Java Program Ape's JavaScript Learning Note (5--prototype)
12. Java Program Ape's JavaScript Learning Note (6--Object-oriented simulation)
14. Java Program Ape's JavaScript Learning notes (7--jquery basic mechanism)
16. Java Program Ape's JavaScript learning Note (8--jquery selector)
18. Java Program Ape's JavaScript Learning Note (9--jquery tool method)
20. Java Program Ape's JavaScript Learning notes (10--jquery-at "class" level)
22. Java Program Ape's JavaScript Learning notes (11--jquery-at "object" level)
24. Java Program Ape's JavaScript Learning note (12--jquery-extension selector)
26. Java Program Ape's JavaScript Learning Note (13--jquery UI)
28. Java Program Ape's JavaScript Learning notes (14--extended jquery UI)

This is the 9th piece of the note. From the point of view of jquery source code, talk about the tools and methods of jquery.

Author Blog: Http://blog.csdn.net/stationxp

Author Micro-Blog: http://weibo.com/liuhailong2008

Reprint please obtain the author permission

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, it is relatively independent.

2. How are these methods defined?
Let's test it and try it.
We know that jquery (or $) is a global variable, and these methods should be attributes of the jquery variable.
We can join by using the following syntax, for example:

jquery.xx = function (b) {return a + B;} Tryvar r1 = jquery.xx (2,3); Console.log (R1);//Output:5var 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 by, for example, the following syntax:

Jquery.extend ({noconflict:function (deep) {  if (window.$ = = = JQuery) {window.$ = _$;  }  if (deep && window.jquery = = = JQuery) {window.jquery = _jquery;  }  return jQuery; } //, ... });

Extend method definitions such as the following:

Defines a method that assigns values to JQuery.fn.extend and jquery.extend.// JQuery.fn.extend and Jquery.extend, although the definitions are the same, but the caller is different, thus the method in this point is different, thus implementing different functions. The parameters are not explicitly declared, but are obtained dynamically through arguments, thus supporting richer functionality. Jquery.extend = JQuery.fn.extend = function () {var src, copyisarray, copy, name, options, clone,//will first participate in Number as Target object = Arguments[0] | |            {},//I is initialized to 1, I do not know what to do with i = 1,//length indicates the number of parameters length = Arguments.length, Deep should indicate whether to copy in depth.            Do you feel like it?      Deep = false;            Handle a deep copy situation if (typeof target = = = "Boolean") {//Assuming the first parameter is a Boolean type, the second parameter is the target object            Shape: Jquery.extend (False,uiobject,...);            Deep = target; target = Arguments[1] | |            {};      I is an array subscript for the current parameter, starting from 0 i = 2; }//The target object can be a function or an object. The target defaults to the null object when the other parameters are passed in.
      if (typeof target!== "Object" &&!jquery.isfunction (target)) {target = {}; }//For now, suppose that the first parameter is not a Boolean, I value is 1. Length is also 1, i.e. extend (obj) case//hypothesis is Boolean, I value is 2,length also 2, that is extend (true,obj) case//In short. There is no incoming src if (length = = = i) {//JQuery the incoming number is received//The index is pointed again to the incoming argument, that is, point to            src target = this;      I.; }//Now I is pointing to a certain number of references behind target. It should be src//each of the parameters passed in as Src for (; i < length; i++) {//* deal with Non-null/undefin            Ed values//This filter is not empty Ah, assuming that the undefined will be filtered out?            Do not do typeof src whether "object", "function" inference?      if (options = arguments[I] = null) {//Assign to variable options//Extend the                        Base object for (name in options) {src = target[name];                                                copy = options[name]; // Thought foolproof: Assuming already is dies, do not hooves//Prevent never-ending loop if (target                        = = = copy) {continue; }//For normal objects and arrays, consider recursive deep copy//problems. What do you mean, a normal object?                        Does the function count? if (deep && copy && jquery.isplainobject (copy) | | (Copyisarray = Jquery.isarray (copy)))                                    {if (Copyisarray) {//Set default value for Next loop)                                    Copyisarray = false; The target object assumes that it originally had this property, but not the array type, and was killed clone = src && jquery.isarray (src)?                              SRC: []; The else {//target object assumes that there is no such attribute or is not an ordinary object, but defaults to {}.
The 
//hypothesis is already available and is a normal object.      Then use it. Clone = src && jquery.isplainobject (src)?                              src: {};                              }//recursive//assuming written jquery.extend (deep, clone, copy) is the same                              Never move original objects, clone them                        target[name] = Jquery.extend (deep, clone, copy); Don ' t bring in undefined values//pair undefined and! = NULL also deepen Understand} else if (copy!== undefined) {//One foot. The assumption is Jquery.extend ({xx,xfasf}), in which case, the extension is this, that is, the caller. 
Direct changes to target.                        Nor did you create a clone of what target[name] = copy; }}}}//Return the modified object return target;};

4, and then see how jquery.isplainobject defined

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//translate://Must be an object. Because of IE, we must also check if there is a constructor attribute.
Make sure you don't miss DOM nodes and window objects, they are not normal objects. if (!obj | | jquery.type (OBJ)!== "Object" | | obj.nodetype | | jquery.iswindow (OBJ)) {//below not through null, undefined, 0, Jquery.ty  PE returns a DOM object, a Window object other than object//So typeof is not a return false for string, number, function, regular, date; } try {//Not own constructor property must is Object if (obj.constructor &&!core_hasown.call (obj, "Constru   ctor ") &&!core_hasown.call (Obj.constructor.prototype," isprototypeof ")) {return false;  }} catch (e) {//ie8,9 'll throw exceptions on certain host objects #9897 return false; }//enumeration, its own properties are enumerated first. Assuming that the last property is a property of its own, all properties are property-owned.
In short, there can be no inherited, able to be enumerated to the properties of your sister.  Why is there such a requirement?  OWN Properties is enumerated firstly, so-speed up,//If the last one is Own and then all properties are Own.  var key; for (key in obj) {} return key = = = Undefined | | Core_hasown.call (obj, key); }

5.
Try

Jquery.extend ({<span style= "White-space:pre" ></span>sayhi:function (you) {  <span style= " White-space:pre "></span>console.log (' Hi ', you); <span style= "White-space:pre" ></SPAN>}); $.sayhi (' Stanley '); Output:hi Stanley

Not bad. Suppose 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... All right. Can succeed.

Think of another way.

Play again:

Jquery.extend ({extend:function (obj) {  //Do not  return ' Who am I? ';}}); var r = $.extend ({x:function () {alert ();}}); Console.log (R); output:who am i?jquery.x ();//error:function not be defined

and succeed. In this way, no one can extend the jquery approach through extend.
But there is a more straightforward way to do that.

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