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

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 ~

分类:Web 时间:2010-07-12 人气:212
分享到:
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 tutori

  • 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

  • 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

  • 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

  • 结合"hello world"探讨gcc编译程序的过程 2010-05-18

    结合"hello world"探讨gcc编译程序的过程 1. gcc简介 gcc/g++是GNU工程的C和C++编译器.都要用四个步骤中的一个或多个处理输入文件. · 预处理(preprocessing) · 编译(compilation) · 汇编(assembly) · 连接(linking) 源文件后缀名标识源文件的语言,但是对编译器来说,后缀名控制着缺省设定. gcc命令的一般格式为:gcc [选项] 要编译的文件 [选项] [目标文件] gcc的详细内容,可参考gcc man

  • flex import external libraries 2008-06-27

    One, you can use the command-line MXML compiler (amxmlc) to compile AIR applications Adobe ® ActionScript ® 3.0 and MXML resources: amxmlc [compiler options] -- MyAIRApp.mxml Where [compiler options] specifies compiled AIR application using the comma

  • 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

  • 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 that 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.255 (s). 12 q(s)