jquery源码分析

一次在写jquery插件的经历，让自己发现了js水很深，自己很菜。然后慢慢发现js包括了原型、闭包、作用域等一些很常用的知识点。 首先jquery源码的主要结构 下面就是在做分析jquery源码时自己的一些备注 1 (function(window){ 2 var jQuery = function(select){ 3 //privatefunc(); 4 return new jQuery.fn.init(select); 5 //这边必须new一个对象（这时this指向init对象），不然return jQuery.fn.init(select);中this指向jQuery.fn，而jQuery.fn其实是个定义了很多方法的集合 6 } 7 8 jQuery.test = function(){//静态方法 9 console.log('call test method'); 10 } 11 12 var privatefunc = function (){//内部方法，不能再 外面调用,需要让外部调用及jquery的做法：window.privatefunc = privatefunc;这也是闭包 13 console.log(this) 14 console.log('call privatefunc method'); 15 } 16 17 jQuery.fn =

源码注释转之网上他人之备注，特收藏以后方便阅读。 // Underscore.js 1.3.3 // (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc. // Underscore is freely distributable under the MIT license. // Portions of Underscore are inspired or borrowed from Prototype, // Oliver Steele's Functional, and John Resig's Micro-Templating. // For all details and documentation: // http://documentcloud.github.com/underscore (function() { // 创建一个全局对象, 在浏览器中表示为window对象, 在Node.js中表示global对象 var root = this; // 保存"_"(下划线变量)被覆盖之前的值 // 如果出现命名冲突或考虑到规范, 可通过_.noConflict()方法恢复"_"被Underscore占用之前的值, 并返回Underscore对象以便重新命名 var previousUnderscore = root._;

数据缓存，jQuery现在支持两种： 1. dom元素，数据存储在jQuery.cache中。 2.普通js对象，数据存储在该对象中。 以下是源代码： 1 var rbrace = /^(?:\{.*\}|\[.*\])$/, 2 rmultiDash = /([A-Z])/g; 3 4 // 首先是对jQuery对象自身的扩展 5 jQuery.extend({ 6 // 即jQuery.cache，负责存储dom元素的缓存数据 7 cache: {}, 8 9 // removeData时，缓存的数据被清除，返回的当时对应的id，以便再利用 10 deletedIds: [], 11 12 // Please use with caution 13 // 将数据存储到jQuery.cache中时，需要唯一id，用它来维护 14 uuid: 0, 15 16 // Unique for each copy of jQuery on the page 17 // Non-digits removed to match rinlinejQuery 18 // 内部key（随即生成），之后会作为key添加到dom的属性集中，而key对应的value则是该dom对应的缓存对象 19 expando: "jQuery" + ( jQuery.fn.jquery + Math.random(

本篇是系列第二篇，标题起得有点大，希望内容对得起这个标题，这篇文章主要总结一下在 jQuery 中一些十分讨巧的 coding 方式，将会由浅及深，可能会有一些基础，但是我希望全面一点，对看文章的人都有所帮助，源码我还一直在阅读，也会不断的更新本文。 即便你不想去阅读源码，看看下面的总结，我想对提高编程能力，转换思维方式都大有裨益，废话少说，进入正题。 短路表达式 与 多重短路表达式 短路表达式这个应该人所皆知了。在 jQuery 中，大量的使用了短路表达式与多重短路表达式。 短路表达式：作为"&&"和"||"操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。这是这两个操作符的一个重要属性。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // ||短路表达式 var foo = a || b; // 相当于 if (a){ foo = a; } else { foo = b; } // &&短路表达式 var bar = a && b; // 相当于 if (a){ bar = b; } else { bar = a; } 当然，上面两个例子是短路表达式最简单是情况，多数情况下，jQuery 是这样使用它们的： 1 2 3 4 5 6 7 8 9 // 选自 jQuery

最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读源码让我接触到了大量底层的知识。对原生JS 、框架设计、代码优化有了全新的认识，接下来将会写一系列关于 jQuery 解析的文章。 我在 github 上关于 jQuery 源码的全文注解，感兴趣的可以围观一下。jQuery v1.10.2 源码注解 。 本篇是系列第二篇，标题起得有点大，希望内容对得起这个标题，这篇文章主要总结一下在 jQuery 中一些十分讨巧的 coding 方式，将会由浅及深，可能会有一些基础，但是我希望全面一点，对看文章的人都有所帮助，源码我还一直在阅读，也会不断的更新本文。 即便你不想去阅读源码，看看下面的总结，我想对提高编程能力，转换思维方式都大有裨益，废话少说，进入正题。 短路表达式 与 多重短路表达式 短路表达式这个应该人所皆知了。在 jQuery 中，大量的使用了短路表达式与多重短路表达式。 短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值

http://www.cnblogs.com/coco1s/p/5303041.html @ChokCoco 最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读源码让我接触到了大量底层的知识。对原生JS 、框架设计、代码优化有了全新的认识，接下来将会写一系列关于 jQuery 解析的文章。 我在 github 上关于 jQuery 源码的全文注解，感兴趣的可以围观一下。jQuery v1.10.2 源码注解 。 本篇是系列第二篇，标题起得有点大，希望内容对得起这个标题，这篇文章主要总结一下在 jQuery 中一些十分讨巧的 coding 方式，将会由浅及深，可能会有一些基础，但是我希望全面一点，对看文章的人都有所帮助，源码我还一直在阅读，也会不断的更新本文。 即便你不想去阅读源码，看看下面的总结，我想对提高编程能力，转换思维方式都大有裨益，废话少说，进入正题。 短路表达式 与 多重短路表达式 短路表达式这个应该人所皆知了。在 jQuery 中，大量的使用了短路表达式与多重短路表达式。 短路表达式：作为”&&”和”||”操作符的操作数表达式

最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 jQuery 的整体结构是这样的： jQuery 整体架构 不同于 jQuery 代码各个模块细节实现的晦涩难懂，jQuery 整体框架的结构十分清晰，按代码行文大致分为如上图所示的模块。 初看 jQuery 源码可能很容易一头雾水，因为 9000 行的代码感觉没有尽头，所以了解作者的行文思路十分重要。 整体而言，我觉得 jQuery 采用的是 总--分 的结构，虽然JavaScript有着作用域的提升机制，但是 9000 多行的代码为了相互的关联性，并不代表所有的变量都要定义在最顶部。在 jQuery 中，只有全局都会用到的 变量、正则表达式 定义在了代码最开头，而每个模块一开始，又会定义一些只在本模块会使用到的变量、正则、方法等。所以在一开始的阅读的过程中会有很多看不懂其作用的变量，正则，方法。 所以，我觉得阅读源码很重要的一点是，摒弃面向过程的思维方式，不要刻意去追求从上至下每一句都要在一开始弄明白。很有可能一开始你在一个奇怪的方法或者变量处卡壳了，很想知道这个方法或变量的作用，然而可能它要到几千行处才被调用到

http://www.cnblogs.com/coco1s/p/5261646.html @ChokCoco 最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读源码让我接触到了大量底层的知识。对原生JS 、框架设计、代码优化有了全新的认识，接下来将会写一系列关于 jQuery 解析的文章。 我在 github 上关于 jQuery 源码的全文注解，感兴趣的可以围观一下。jQuery v1.10.2 源码注解（https://github.com/chokcoco/jQuery-） 。 网上已经有很多解读 jQuery 源码的文章了，作为系列开篇的第一篇，思前想去起了个【深入浅出jQuery】的标题，资历尚浅，无法对 jQuery 分析的头头是道，但是 jQuery 源码当中确实有着大量巧妙的设计，不同层次水平的阅读者都能有收获，所以打算厚着脸皮将自己从中学到的一些知识点共享出来。打算从整体及分支，分章节剖析。本篇主要讲 jQuery 的整体架构及一些前期准备，先来看看 jQuery 的整体结构： 整体架构 不同于 jQuery

最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读源码让我接触到了大量底层的知识。对原生JS 、框架设计、代码优化有了全新的认识，接下来将会写一系列关于 jQuery 解析的文章。 网上已经有很多解读 jQuery 源码的文章了，作为系列开篇的第一篇，思前想去起了个【深入浅出jQuery】的标题，资历尚浅，无法对 jQuery 分析的头头是道，但是 jQuery 源码当中确实有着大量巧妙的设计，不同层次水平的阅读者都能有收获，所以打算厚着脸皮将自己从中学到的一些知识点共享出来。打算从整体及分支，分章节剖析。本篇主要讲 jQuery 的整体架构及一些前期准备，先来看看 jQuery 的整体结构： jQuery 整体架构 不同于 jQuery 代码各个模块细节实现的晦涩难懂，jQuery 整体框架的结构十分清晰，按代码行文大致分为如上图所示的模块。 初看 jQuery 源码可能很容易一头雾水，因为 9000 行的代码感觉没有尽头，所以了解作者的行文思路十分重要。 整体而言，我觉得 jQuery 采用的是 总--分 的结构

jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 缓存是jQuery中的又一核心设计，jQuery自身的很多东西都依赖于缓存，比如事件、一些中间变量、动画等。同时他还为用户提供接口了使用缓存的接口，方便用户在元素节点上保存自己的数据，并且帮助用户解决直接把数据保存到DOM元素是可能引起的内存泄漏、命名冲突等问题。 同时，html5提出了一种通过属性缓存元素数据的功能，就是 data-*属性 ，他可以以字符串的形式保存数据，并且不会和元素固有属性冲突。jQuery的缓存提供了访问data-*的接口，与html5标准结合更加紧密，更加规范。 提问：jQuery不同版本的缓存实现原理是什么？ 答：jQuery1.x与jQuery2.x、jQuery3.x是不同的。 jQuery1.x系列中，需要兼容ie6、ie7等早期的浏览器，在ie6、ie7这样的浏览器中，根据艾伦的博客，我们可以知道DOM元素与js对象相互引用，是会引起浏览器的内存泄漏问题。所以 jQuery1.x中，最大的问题是要防止在ie6、ie7浏览器上出现内存泄漏。为了避免DOM元素与js对象相互引用而造成的内存泄漏，jQuery必须从设计解决对象循环引用的问题。所以jQuery1.x将需要缓存到元素上的数据