Some time ago, when I was bored at work, I studied jquery's source code. Now, record your achievements and share them with you. The following is a jquery model I have developed and compiled. It contains comments I have written. [Javascript]/** my-jquery-1.0 * // there are also a lot of online... SyntaxHighlighter. all (); some time ago when I was bored at work, I studied the jquery source code. Now, record your achievements and share them with you. The following is a jquery model I have developed and compiled. It contains comments I have written. [Javascript]/** my-jquery-1.0 * // there are also a lot of implementations on the web, but this is what I wrote in my own understanding, with comments, I hope to explain clearly. * // ** The entire jquery is included in an anonymous function. The major point is the closure, which is the form below, for example (function (window, undefined) {} (window )). * The closure definition is not easy to clarify here. I just want to explain the advantages of this. * 1. Make the variables defined in jquery as local variables without affecting global variables. I personally think this is one of the reasons why jquery has become lightweight. * 2. Increase the jquery running speed because the local variable running speed is higher than the global variable. * 3. As you can see, the input window and undefined can be customized to facilitate compilation. Of course, what you see is still the original method, but you can look at the jquery min version, it must be compressed. */(Function (window, undefined) {var/* jquery definition, which we usually use $ and jQuery. It can be seen that the real jQuery object is generated by the init method. * The factory mode is used to create a new jQuery object. Therefore, you can find that the method for creating a jQuery object is $ (selector) or jQuery (selector) * The original jQuery definition method has an additional context parameter context, which is omitted here. */JQuery = function (selector) {return new jQuery. fn. init (selector) ;},/** Method for referencing data, objects, and strings */core_push = Array. prototype. push, core_slice = Array. prototype. slice, core_indexOf = Array. prototype. indexOf, core_toString = Object. prototype. toString, core_hasOwn = Object. prototype. hasOwnProperty, core_trim = String. prototype. trim;/** jQuery object definition. All attributes are removed and only init () is left (). * The jQuery selector adopts Sizzle, Which is omitted here. It can be seen that only one query ID is returned. * The jQuery object does not simply assign an attribute to the object, but creates an array. Ignore these items here, But assign them to the obj attribute. * JQuery assigns the prototype to the fn attribute of jQuery. Therefore, if you want to extend jQuery objects, you only need to extend jQuery. fn. */JQuery. fn = jQuery. prototype = {init: function (selector) {this. obj = Invalid invalid Doc ument. getElementById (selector); return this ;};/** assigns the jQuery prototype to init, so that jQuery can use the init extension method. */JQuery. fn. init. prototype = jQuery. fn;/** jQuery extension method. This is the original jQuery method and I have not changed it. * The method logic is not described here. The effect of the method is that jQuery. extend can be used to extend jQuery, while jQuery. fn. extend can be used to extend jQuery objects. */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 "&&! D. isFunction (target) {target ={};}// extend jQuery itself if only one argument is passed if (length === I) {target = this; -- I ;} for (; I <length; I ++) {// Only deal with non-null/undefined values if (options = arguments [I])! = Null) {// Extend the base object for (name in options) {src = target [name]; copy = options [name]; // Prevent never-ending loop if (target = copy) {continue ;} // Recurse if we're merging plain objects or arrays if (deep & copy & (d. isPlainObject (copy) | (copyIsArray = d. isArray (copy) {if (copyIsArray) {copyIsArray = false; clone = src & d. isArray (src )? Src: [];} else {clone = src & d. isPlainObject (src )? Src: {};}// Never move original objects, clone them target [name] = d. extend (deep, clone, copy); // Don't bring in undefined values} else if (copy! = Undefined) {target [name] = copy ;}}// Return the modified object return target ;};/** a simple ready binding sequence is implemented here. */JQuery. extend ({isReady: false, // indicates whether the file is loaded. The readyList: [], // Function Sequence // The following is a tool method. You can ignore isArray: Array. isArray | function (obj) {return jQuery. type (obj) = "array";}, isWindow: function (obj) {return obj! = Null & obj = obj. window;}, isNumeric: function (obj) {return! IsNaN (parseFloat (obj) & isFinite (obj) ;}, type: function (obj) {return obj = null? String (obj): class2type [core_toString.call (obj)] | "object" ;}, isPlainObject: function (obj) {// Must be an Object. // Because of IE, we also have to check the presence of the constructor property. // Make sure that DOM nodes and window objects don't pass through, as well if (! Obj | jQuery. type (obj )! = "Object" | obj. nodeType | jQuery. isWindow (obj) {return false;} try {// Not own constructor property must be Object if (obj. constructor &&! Core_hasOwn.call (obj, "constructor ")&&! Core_hasOwn.call (obj. constructor. prototype, "isPrototypeOf") {return false ;}} catch (e) {// IE8, 9 Will throw exceptions on certain host objects #9897 return false ;} // Own properties are enumerated firstly, so to speed up, // if last one is own, then all properties are own. var key; for (key in obj) {} return key = undefined | core_hasOwn.call (obj, key) ;}, isFunction: function (obj) {If (obj & typeof obj = 'function') {return true;} return false ;}, // onload event implementation ready: function (fn) {// if it is a function, add it to the function sequence if (fn & typeof fn = 'function') {jQuery. readyList. push (fn);} // The document is loaded and the function sequence is executed. If (jQuery. isReady) {for (var I = 0; I <jQuery. readyList. length; I ++) {fn = jQuery. readyList [I]; jQuery. callback (fn) ;}return jQuery ;}, // callback: function (fn) {fn. call (document, jQuery) ;}}); // simulates jQuery's html method jQuery. fn. extend ({html: function (html) {if (html & typeof html = 'string') {this. obj. innerHTML = html; return this;} return this. obj. innerHTML ;}}); // export the Object window. $ = window. j Query = jQuery; // determine whether the loading is complete var top = false; try {top = window. frameElement = null & document.doc umentElement;} catch (e) {}if (top & top. doScroll) {(function doScrollCheck () {try {top. doScroll ("left"); jQuery. isReady = true; jQuery. ready () ;}catch (e) {setTimeout (doScrollCheck, 50) ;}} (window); below is the test file. [Html]
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.