In-depth analysis of the core functions in jquery

Core functions include:

How jquery is defined, how to call it, and how to extend it. Mastering how the core methods are implemented is the key to understanding the jQuery source code. Everything suddenly became clear here.

1, how to define, that is, the entrance

// Define a local copy of jQuery

var jQuery = function(selector, context) {

// The jQuery object is actually just the init constructor 'enhanced'

return new jQuery.fn.init( selector, context, rootjQuery ); // The jQuery object is actually just the constructor FunctionjQuery.prototype.init enhanced version

}

2, jQuery prototype, and its relationship with jQuery.fn.init

//Define object method, that is, it can only be called through $("xx").

jQuery.fn = jQuery.prototype = {

init:function( selector, context, rootjQuery ) {

return jQuery.makeArray( selector, this );

}

There are many other properties and methods,

Properties include: jquery, constructor, selector, length

Methods include: toArray,get, pushStack,each, ready,slice, first,last,eq, map,end, push, sort, splice

…

}

//put jQuery.prototype is assigned to jQuery.prototype.init.prototype for later instantiation

// Give the init function the jQuery prototype for later instantiation

jQuery.fn.init.prototype = jQuery.fn;

That is, $("xx") has an instance method and can be called. (Call the method defined under jQuery.prototype)

Why does jQuery return the jQuery.fn.init object?

jQuery = function( selector, context ) {

// The jQuery object is actually just the init constructor 'enhanced'

return new jQuery.fn.init( selector, context, rootjQuery );

}

jQuery.fn = jQuery.prototype = {

……

}

jQuery.fn.init.prototype = jQuery.fn;

Find similar questions on stackoverflow ：

http://stackoverflow.com/questions/4754560/help-understanding-jquerys-jquery-fn-init-why-is-init-in-fn

And this

http://stackoverflow.com/questions/1856890/why-does-jquery-use-new-jquery-fn-init-for-creating-jquery-object-but-i-can/1858537#1858537

I believe the code is written in this fashion so that the new keyword is not required each time you instantiate a new jQuery object and also to delegate the logic behind the object construction to the prototype. The former I believe is to make the library cleaner to use and the latter to keep the initialisation logic cleanly in one place and allow init to be recursively called to construct and return an object that correctly matches the passed arguments.

3, extend extended object method and static method principle

jQuery.extend = jQuery.fn.extend = function() {

var target = arguments[0] || {};

Return target;

}

It is convenient to use extend, which is nothing more than $.extend({}); and $.fn.extend({}); If you It would be great if you could understand and think of jQuery.prototype when you see fn.

Let’s look at this scope again:

$.extend ->this is $-> this.aa()

$.fn.extend-> ;this is $.fn-> this.aa()

Attached extend implementation details:

Usage scenarios:

1, extend some functions

Only one parameter. For example: $.extend({f1:function(){},f2:function(){},f3:function(){}})

2, merge multiple objects into the first object

(1) Shallow copy, the first parameter is the target object. For example

var a = {name:”hello”}

var b = {age:30}

$.extend(a,b);//a= {name:”hello”,age:30}

(2) Deep copy, the first parameter is TRUE, and the second parameter is the target object. For example

var a = {name:{job:”it”}};

var b = {name:{age: 30 }};

//$ .extend(a,b);

$.extend(true,a,b);

console.log(a);

jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    // 是不是深复制  Handle a deep copy situation
    if ( typeof target === "boolean" ) {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
    }

    // 不是对象类型  Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }

    // 扩展插件的情况  extend jQuery itself if only one argument is passed
    if ( length === i ) {//$.extend({f1:function(){},f2:function(){},f3:function(){}})
        target = this;//this是$,或是$.fn
        --i;
    }

    for ( ; i <p>jQuery. extend({...}) analysis<br><br>Look at how it is written</p><p>jQuery.extend({</p><p>prop:””</p><p>method:function( ){}</p><p>});</p><p>It can be seen that these methods are static properties and methods of jQuery (that is, tool methods). In the future, they can be provided directly to users or For internal use. </p><p>The specific implemented tool properties and methods are (also marked which ones are used internally)</p><p>jQuery.extend({<br><br> expando : Generate unique JQ<a href="http://www.php.cn/wiki/57.html" target="_blank"> string</a>(internal)<br><br> noConflict() : Prevent conflicts<br><br> isReady : Whether the DOM has been loaded (internal)<br><br> readyWait : Counter of how many files to wait for (internal)<br><br> holdReady() : Delay DOM trigger<br><br> ready() : Prepare for DOM trigger<br><br> isFunction() : Whether it is a function<br><br> isArray() : Whether it is an array<br><br> isWindow() : Whether it is a window<br><br> isNumeric() : Whether it is an array Number <br><br> type() : Determine the <a href="http://www.php.cn/code/5808.html" target="_blank"> data type</a><br><br> isPlainObject() : Whether it is an object argument<br><br> isEmptyObject() : Whether it is an empty object <br><br> error() : <a href="http://www.php.cn/php/php-tp-throw.html" target="_blank">Throw an exception</a><br><br> parseHTML() : Parse node<br><br> parseJSON() : Parse JSON<br><br> parseXML () : Parse XML<br><br> noop() : Empty function<br><br> globalEval() : Global parsing JS<br><br> camelCase() : Convert camel case<br><br> nodeName( ) : Whether it is the specified node name (internal)<br><br> each() : Traverse the collection<br><br> trim() : Remove leading and trailing spaces<br><br> makeArray() : Convert a class array to a true array <br><br> inArray() : Array version indexOf<br><br> merge() : Merge arrays<br><br> grep() : Filter new array<br><br> map() : Map new Array<br><br> guid : unique identifier (internal)<br><br> proxy() : change this to point to<br><br> access() : multi-function value operation (internal)<br><br> now() : Current time<br><br> swap() : CSS swap (internal)<br><br>});</p><p>jQuery.ready.promise = function(){}; Monitoring Asynchronous operation of DOM (internal)</p><p>function isArraylike(){} Array-like judgment (internal)</p>

The above is the detailed content of In-depth analysis of the core functions in jquery. For more information, please follow other related articles on the PHP Chinese website!