jquery源码分析

jQuery的数据缓存机制对于js Object和DOM node分别存在两种方式： 情况一:对于js Object，数据就存储在Object本身，只不过数据都存储在Object下一个以“jQuery”开头的属性之下 例如： var obj = {}; $.data(obj, "username", "scott"); console.log(obj)； 此时obj为： { 　　jQuery16302287385049276054：{ 　　　　username: "scott" 　　} } 情况二：对于DOM node，数据则存储在jQuery.cache之中node对应的id号之下 例如： var elem = document.createElement("div"); $.data(elem, "password", "tiger");console.log(elem[$.expando]); console.log($.cache); 输出为： 1 {1：{password:"tiger"}} 这个例子中node对应的id为1，存储在其自身的$.expando属性之下，此id即对应$.cache中存储器数据位置的id,即这样建立起的对应关系 这里需要说明的是，$.expando的值即是以"jQuery"开头后面一串数字的字符串，例如前面的

简要：本文主要介绍event.js中暴露出来的api，包括各种注册，移除事件方法和手动触发事件的方法，这些api都是调用了上一篇所讲到的底层api。 /** * 绑定事件,应直接采用on * 源自1.9版本前jquery的绑定事件的区分： bind()是直接绑定在元素上 .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。 .delegate()则是更精确的小范围使用事件代理，性能优于.live() .on()则是1.9版本整合了之前的三种方式的新事件绑定机制 * @param event * @param data * @param callback * @returns {*} */ $.fn.bind = function(event, data, callback){ return this.on(event, data, callback) } /** * 解绑事件,应直接用off * @param event * @param callback * @returns {*} */ $.fn.unbind = function(event, callback){ return this.off(event, callback) } /** * 绑定一次性事件 * @param

前言 underscore是最适合初级人士阅读的源码，在阅读源码时，有一些有趣的实现，记录如下。 基于underscore1.8.3。 留存root // Establish the root object, `window` (`self`) in the browser, `global` // on the server, or `this` in some virtual machines. We use `self` // instead of `window` for `WebWorker` support. var root = typeof self == 'object' && self.self === self && self || typeof global == 'object' && global.global === global && global || this || {}; // Save the previous value of the `_` variable. var previousUnderscore = root._; // ....... _.noConflict = function() { root._ = previousUnderscore; return this; }; 在浏览器情况下，self是window自身的引用

1.整体架构和如何辨别浏览器端和node端 自执行函数，判断在什么端，如果在浏览器端就执行factory函数 //（function(){a,b})(a,b) //jq大架构，闭包，自执行函数，传入函数参数(factory:工厂模式) (function(global,factory){ "use strict" //严格模式 if(typeof module ==="object" && typeof module.exports ==="object"){ //说明支持CommonJS模块规范的(例如Node) //... }else{ //浏览器端 // factory(window) => 就是传入的函数参数执行 => function( window, noGlobal){ // window === window noGlobal === undefined(因为执行这个函数的时候，没有传第二个参数) //} factory(global); } })(typeof window !== "undefined" ? window : this ,function( window, noGlobal){ }) /* 参数一： typeof window !== "undefined" ? window : this 区分在浏览器端运行还是Node端运行 typeof xx

title: 浅析jQuery源码 date: 2017-08-14 categories: jQuery tags: [jQuery,js] --- jQuery 整体架构图 jQuery的主要点： 关于jQuery的整体分析 对于源码的分析：很重要的一点是，摒弃面向过程的思维方式，不要刻意去追求从上至下每一句都要在一开始弄明白。很有可能一开始你在一个奇怪的方法或者变量处卡壳了，很想知道这个方法或变量的作用，然而可能它要到几千行处才被调用到。如果去追求这种逐字逐句弄清楚的方式，很有可能在碰壁几次之后阅读的积极性大受打击 关于模块之间，最可能发生的就是变脸冲突，因此，代码要求高内聚、低耦合，尽量暴露少的变量给外界，或者进行检查。 ES5中使用立即执行匿名函数作为模块 jQuery中最基本有selector event animate等模块 亮点1jQuery每次调用不用new jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype = $ ; new jQuery.fn.init() 相当于 new $() ; $() 返回的是 new jQuery.fn.init()和 new $()是相同的，所以我们可以无 new 实例化 jQuery 对象。 在JavaScript中函数是没有重载的概念 但是却可以实现类似重载的最终效果

//5.jQuery的ready方法实现原理分析jQuery.ready.promise = function() { }; 监测dom的异步操作（内部使用） //jQuery中的ready方法实现了当页面加载完成后才执行的效果 //，但他并不是window.onload或者doucment.onload的封装， //而是使用 标准W3C浏览器DOM隐藏api和IE浏览器缺陷来完成的 jQuery.ready.promise = function(obj){ //检测DOM的异步操作 if(!readyList){ //$.Deferred() 是一个构造函数，用来返回一个链式实用对象方法来注册多个回调，并且调用回调队列，传递任何同步或异步功能成功或失败的状态。 readyList = jQuery.Deferred();//返回一个链式实用对象方法来注册多个回调 //表示页面已经加载完成，直接调用 ready方法 if(document.readyState ==="complete"){ //将 jQuery.ready压入异步消息队列，设置延迟时间1毫秒（注意，有些浏览器延迟不能小于4毫秒） setTimeout(jQuery.ready); }else{ //监听DOM加载完成 document.addEventListener( "DOMContentLoaded",

构造jquery对象 jQuery对象是一个 类 数组对象。 一）构造函数jQuery() 构造函数的7种用法: 1.jQuery(selector [, context ]) 传入字符串参数：检查该字符串是选择器表达式还是HTML代码。如果是选择器表达式，则遍历文档查找匹配的DOM元素， 并创建一个包含这些DOM元素引用的jQuery对象。如果没有匹配的DOM，则创建一个length属性为0的空jQuery对象。 默认情况下对匹配元素的查找从根元素document开始，但也可以传入context参数限制查找范围。 如果选择器表达式是简单的'#id'且没有context参数，则调用document.getElementById()查找。 如果不是则调用jQuery的find()方法。 2.jQuery(html [, ownerDocument])、jQuery(html, props) 如果传入的参数是html代码，则尝试用html代码创建新的DOM元素，并创建包含这些DOM元素引用的jQuery对象。 如果html代码是单独的标签，使用document.createElement()创建DOM元素。如果是复杂的html代码，则使用innerHTML. 参数ownerDocument用于创建新DOM元素的文档对象，如果不传入默认为当前文档对象。 如果html代码是单独标签

作者：zuoxiaolong8810（左潇龙），转载请注明出处，特别说明：本博文来自博主原博客，为保证新博客中博文的完整性，特复制到此留存，如需转载请注明新博客地址即可。 前段时间上班无聊之时，研究了下jquery的源码。现在记录下自己的成果，分享一下。 下面是我自己琢磨和编写的jquery模型，里面有我所写的注释。 /* * my-jquery-1.0 */ /* * 网上也有很多实现的版本，不过这是我在我自己的理解下写的，加上注释，希望可以解释清楚。 */ /* * 整个jquery包含在一个匿名函数中，专业点叫闭包，就是下面的形式，如(function(window,undefined){}(window))。 * 闭包的定义在这里不太容易讲清楚，我只说下这样说的好处。 * 1.使整个jquery中定义的变量成为局域变量，不会影响全局变量，个人觉得这也是jquery被成为轻量级的原因之一。 * 2.增加jquery运行速度，因为局域变量运行速度高于全局变量。 * 3.就像你看到，传入的window和undefined，可以自定义名字，方便编写。当然，现在你看到的仍是原来的写法，但是你可以看看jquery的min版本，一定是压缩的。 */ (function( window, undefined ) { var /*jquery的定义，我们平时用的$和jQuery就是它

代码数量 1.2.0版本代码量为1650行，去掉注释大概1500左右 代码模块 默认版本只包括核心模块，事件模块，ajax模块，form模块和ie模块，其它模块需要自行拓展加入，其中form模块只包含序列化操作和submit提交事件实现，ie模块只包括一点兼容性处理，两者码量极少，因此不做分析 执行结构 典型的即时函数，保证封装性 (function (global, factory) { // amd,cmd的模块化检测 })(this, function(window) { // zepto初始化代码 }) 模块结构 (function (global, factory) { // amd,cmd的模块化检测 })(this, function(window) { // 核心模块 var Zepto = (function () { }(); // 事件模块 ;(function (){ })(Zepto) // ajax模块 ;(function (){ })(Zepto) // form模块 ;(function (){ })(Zepto) // ie模块 ;(function (){ })() }) 架构原理 (function (global, factory) { // amd,cmd的模块化检测 })(this, function(window) { // 核心模块

概览 (function (){ (21 , 94) 定义了一些变量和函数 jQuery=function(); (96 , 293) 给jQuery对象添加一些方法和属性; (285 , 347) extend:jQuery扩展方法; (349 , 817) jQuery.extend : 扩展一些工具方法; (877 , 2856 ) Sizzle : 复杂选择器的实现; (2880, 3042 ) Callbacks : 回调对象：函数的统一管理 (3043, 3183 ) Deferred : 延迟对象：对异步的统一管理 (3184, 3295) support : 浏览器功能检测，确定浏览器对某些功能是否支持 (3380, 3652) data() : 数据缓存功能 (3653, 3797) queue()/dequeue() : 队列管理 (3803, 4299) attr() prop() val() addClass()等方法，对元素属性的操作 (4300, 5138) on() trigger()等方法，事件相关的方法，事件管理 (5140，6057) DOM操作：添加 删除 包装 获取 DOM筛选 (6058, 6620) css() ： 样式操作 (6621, 7854) 提交的数据和Ajax()操作:ajax() load() getJson() (7855