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

2. How are these methods defined?
Let's test it and try it.

We know that jquery (that is, $) is a global variable. 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. Description $ 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.
View jquery source code. jquery defines tool methods 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 direction is different. To achieve 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 or not to copy deeply.      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 is a function or an object that can be passed to other parameters, and target defaults to an empty object.
      if (typeof target!== "Object" &&!jquery.isfunction (target)) {target = {}; }//For now, suppose the first parameter is not a Boolean. The 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; }//pairs of normal objects and arrays. Consider recursive deep copy//Problem come on, what is 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 this attribute was originally used. But not an array type. I 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 {}.
//Assuming it's already there and is a normal object, use it. Clone = src && JQ      Uery.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}); The extension is this, which is called by 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's sake. We also have to check if there are constructor properties.
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 at the time. The own properties are enumerated first. Assume that the last property is a property of its own.  Then all properties are property-owned. In short, there can be no inheritance. Ability 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... Well, you can do it. 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

Again, so. No one can extend the jquery approach by extend.
But there is a more straightforward way to do that.

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