jQuery prototype diagram, let you quickly on the jQuery have a grasp of the whole

分类:Web 2010-07-12 来源:CodeWeblog.com 人气:210

Several months ago, the garden in the blog to see an article , the content is simply a graph showing the jQuery object in the relationship between the time to think, this is what I want most intuitive summary jQuery way. In that article, many people expressed surprise that not understand. Here I drew a heavy and elaborate. Annex provides a visio file formats.

jQuery prototype diagram, let you quickly on the jQuery have a grasp of the whole

The following will combine the jQuery source, on the diagram to explain the various parts one by one. In the figure, circle numbers represent the jQuery source location, the circle shows the location of the same number of these places from the same block (block) code.

/**
 *   ① What is   jQuery?
 *
 * window   Is the object, which has two properties  ,  Respectively, and jQuery   $,  The value is a function, this function name is   jQuery.  In the function
 *   The definition of entity, in fact, by   jQuery.fn.init   Function to construct the object, init function is the real constructor  .  That is  ,
 *   We   ${ ... )   Get the instance actually jQuery.fn.init  .
 */
var jQuery = window.jQuery = window.$ = function( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        return new jQuery.fn.init( selector, context );
};

/**
 *   ② the so-called   jQuery   Physique
 *
 * jQuery   Function has two properties, namely   fn   And the prototype, its value is an anonymous object  (json   Object ).
 */
jQuery.fn = jQuery.prototype = {
        init: function( selector, context ) {
                ...
        },

        jquery: "1.2.6",

        get: function( num ) {
                ...
        },

        ...
}

/**
 *   ③ given   jQuery   Power bar
 *
 *   Do not look to this code word, a short  ,  Is not it? But this code is very important  .
 *
 *   First, init is a function  ,  Objects constructed by jQuery.fn.init  ,  Instances it is only jQuery.fn.init  ,
 * jQuery.fn   Also said before, it is a anonymous   json   Object containing   init   And so on function, we want   jQuery.fn.init   Construction
 *  Out if the object has a lot of behavior, prototype is the best means of  .  Suppose we define a function, named   Car
 *   It, using   prototype   Way to add behavior we are familiar with it  :
 * function Car(owner) {
 *   this.owner = owner;
 * }
 * Car.prototype = {
 *   go: function() { ... }
 *   brake: function() { ... }
 * }
 *   Thus, by   new Car()   Constructed object to go and have the   brake   Behavior  .
 *
 *   Therefore, because the following sentence  ,  Init the object is constructed to have the   jQuery.fn   All acts defined, and very smart  !
 */
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

/**
 *   ④ please give me the freedom to expand
 *
 *   Indeed, jQuery or   jQuery.fn   Defined function you may feel not enough  ,  It does not matter, John Resig has provided us with
 *   Space for expansion. JQuery and   jQuery.fn   Has a name attribute to extend  ,  The type of the property is a   function,
 *   The function itself has provided us with the extensions  .
 *
 * extend   Property represented by the function, but   50   Lines of code, written in a very insightful  ,  Have the time, we can debug the next step  ,
 *   John Resig of magic knowledge under the  -
 */
jQuery.extend = jQuery.fn.extend = function() {
        ......
}

JQuery is the core of more than four codes, such as event handling code, you can find the shadow code from the above four. Enjoy jQuery ~

分享到:
blog comments powered by Disqus

相关文章

  • 30 + Fresh surprise jQuery plug-ins and tutorials 2009-02-28

    In network development, due to jQuery is easy to learn, easy to use and easy to extend the features, it is slowly becoming ubiquitous. The following are articles from some of jQuery in order out of 30 + fresh and surprising jQuery plug-ins and tutorials.

  • Configure vsftpd service (below) 2011-08-11

    Connected articles 3 on TCP Wrappers TCP Wrappers role is by analyzing the TCP network packet, according to its header the IP address and port number, decide whether to allow this data into the main unit, so we can regard it as one of the most inner firew

  • vsftpd configuration in detail (b) 2011-03-03

    2 IP-based virtual ftp site this section we discuss on the same server to create multiple ftp sites, each independent of each other, with separate profiles. Of course, the server must have two or more IP addresses. In standalone mode, we can consider star

  • Find open files with lsof 2011-09-15

    Reproduced: http://www.ibm.com/developerworks/cn/aix/library/au-lsof.html In the UNIX ® environment, the files everywhere, which have given rise to the motto: "everything is a file." Files can be accessed only through conventional data, typicall

  • Database, three major issues: constraints. CASE statements and documents (transfer) 2010-09-20

    This paper describes the use of instance methods on the binding, CASE statements and documents three problems. Constraint "Is defined as can be delayed (deferrable)" constraint can specify: 1. Initially immediate (real-time implementation of the

  • Linux Knowledge IX: LAMP.phpMyAdmin installation. Configuration. Integration and use of Detailed 2010-11-12

    Linux system installation and use of bear in mind: 1, view the permissions are allowed. 2, see whether the subsidiary version of the corresponding software version. 3, the view directory services directory is corresponding with the operation. apache Knowl

  • Heritrix source code analysis (b) describes the configuration file order.xml 2010-11-21

    http://guoyunsky.javaeye.com/blog/613412 order.xml is the core of the Heritrix, each of which are related to the Heritrix a configuration of the operation, did not read until I can source the channel to learn from the limited use of these configurations.

  • Heritrix source code analysis (B) profiles order.xml Introduction 2010-11-21

    http://guoyunsky.iteye.com/blog/613412 order.xml the Heritrix is the core of each of a configuration which are related to the operation of Heritrix, did not read the source before I can learn from a limited number of channels to the use of these configura

  • KFS configuration instructions and deployment management 2011-02-22

    Original article reproduced please reference: http://wangwei3.iteye.com/blog/916476 Basic machine configuration <br /> This configuration scripts / machines.cfg Defined for the service of three variables: * Node: NODE this variable specifies th

  • [Transfer] pl / sql developer experience 2011-07-28

    1. PL / SQL Developer remember the login password in the use of PL / SQL Developer, the In order to facilitate the work want to PL / SQL Developer Oracle users to remember login name and password; Setting method: PL / SQL Developer-> tools-> Prefere

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.199 (s). 14 q(s)