了解了jQuery对DOM进行遍历背后的工作机制,可以在编写代码时有意识地避免一些不必要的重复操作,从而提升代码的性能 从这章开始慢慢插入jQuery内部一系列工具方法的实现 关于jQuery对象的包装 var $aaron = $("aaron"); 通过对sizzle的分析呢,jQuery选择器,反正最终都是通过dom接口实现取值的, 但是通过jQuery处理后返回的不仅仅只有dom对象,而是一个包装容器 返回的jQuery对象:$aaron jQuery对象,其中有个prevOb…
jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + div.aaron input[type="checkbox"] 顺便在深入理解下解析的原理: HTML结构 <div id="text"> <p> <input type="text" /> </p>…
Deferred的概念请看第一篇 http://www.cnblogs.com/aaronjs/p/3348569.html ******************构建Deferred对象时候的流程图************************** **********************源码解析********************** 因为callback被剥离出去后,整个deferred就显得非常的精简 jQuery.extend({ Deferred : function(){}…
     声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!      打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象,所以狭隘的说呢,jQuery就是一个选择器,并这个基础上构建和运行查询过滤器! 工欲善其事,必先利其器,所以先从正则入手 我们来分解一个表达式 // A simple way to check for HTML strings // Prioritize #id over <tag> to av…
JavaScript编程几乎总是伴随着异步操作,传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作.这也是造成异步编程困难的主要原因:我们一直习惯于“线性”地编写代码逻辑,但是大量异步操作所带来的回调函数,会把我们的算法分解地支离破碎.此时我们不能用if来实现逻辑分支,也不能用while/for/do来实现循环,更不用提异步操作之间的组合.错误处理以及取消操作了.因此也诞生了如jQuery Deferred这样的辅助类库 举一个例子会有助于理解 我做的是phon…
事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析实现的, 所以需要有一定的基础才行 为了下一步更好的理解内部的实现,所以首先得清楚的认识到事件接口的划分 网上资料遍地都是,但是作为一个jQuery系列的源码分析,我还是很有必要在重新总结一下 jQuery对事件的绑定分别有几个API http://www.css88.com/jqapi-1.9/…
那么jQuery事件处理机制能帮我们处理那些问题? 毋容置疑首先要解决浏览器事件兼容问题 可以在一个事件类型上添加多个事件处理函数,可以一次添加多个事件类型的事件处理函数 提供了常用事件的便捷方法 支持自定义事件 扩展了组合事件 提供了统一的事件封装.绑定.执行.销毁机制 …… 为了更深入的理解幕后的实现,所以先整理整体的结构思路,从1.7后就去除了live绑定,所以现在的整个事件的API 如图: jQuery的事件绑定有多个方法可以调用,以click事件来举例: click方法 bind方法…
转载http://www.cnblogs.com/aaronjs/p/3348569.html JavaScript编程几乎总是伴随着异步操作,传统的异步操作会在操作完成之后,使用回调函数传回结果,而回调函数中则包含了后续的工作.这也 是造成异步编程困难的主要原因:我们一直习惯于“线性”地编写代码逻辑,但是大量异步操作所带来的回调函数,会把我们的算法分解地支离破碎.此时我们不能 用if来实现逻辑分支,也不能用while/for/do来实现循环,更不用提异步操作之间的组合.错误处理以及取消操作了.…
拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! github上最新是jquery-master,加入了AMD规范了,我就以官方最新2.0.3为准 整体架构 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 例如: $().find().css() $().h…
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 浏览器从下载文档到显示页面的过程是个复杂的过程,这里包含了重绘和重排.各家浏览器引擎的工作原理略有差别,但也有一定规则. 简单讲,通常在文档初次加载时,浏览器引擎会解析HTML文档来构建DOM树,之后根据DOM元素的几何属性构建一棵用于渲染的树.渲染树的每个节点都有大小和边距等属性,类似于盒子模型(由于隐藏元素不需要显示,渲染树中并不包含DOM树中隐藏的元素). 当渲染树构建完成后,浏览器就可以将元素放置到正确的位置了,…
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + div.aaron input[type="checkbox"] 顺便在深入理解下解析的原理: HTML结构 <div id="text"> <p> <input type="text" /> </p> <div class="aaron"&…
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 从Sizzle1.8开始,这是Sizzle的分界线了,引入了编译函数机制 网上基本没有资料细说这个东东的,sizzle引入这个实现主要的作用是分词的筛选,提高逐个匹配的效率 我们不直接看代码的实现,通过简单的实现描述下原理: 以下是个人的理解,如果有错误欢迎指出! Javascript有预编译与我们说的编译函数是不同的概念 什么是JavaScript的“预编译”? function Aaron() { alert("he…
为什么Sizzle很高效? 首先,从处理流程上理解,它总是先使用最高效的原生方法来做处理 HTML文档一共有这么四个API: getElementById 上下文只能是HTML文档 浏览器支持情况:IE 6+, Firefox 3+, Safari 3+, Chrome 4+, and Opera 10+: getElementsByName,上下文只能是HTML文档 浏览器支持情况:IE 6+, Firefox 3+, Safari 3+,Chrome 4+, and Opera 10+: g…
历史背景: jQuery从1.2.3版本引入数据缓存系统,主要的原因就是早期的事件系统 Dean Edwards 的 ddEvent.js代码 带来的问题: 没有一个系统的缓存机制,它把事件的回调都放到EventTarget之上,这会引发循环引用 如果EventTarget是window对象,又会引发全局污染 不同模块之间用不同缓存变量 一般jQuery开发,我们都喜欢便捷式的把很多属性,比如状态标志都写到dom节点中,也就是HTMLElement 好处:直观,便捷 坏处: 循环引用 直接暴露数…
根据API分类 CSS addClass() jQuery.cssHooks .hasClass() .removeClass() .toggleClass() .addClass() 对元素的样式操作,底层的实现就是修改元素的className值 实现的功能: 增加一条样式规则: .addClass(‘myClass’) 增加多条样式规则: .addClass(‘myClass yourClass’) 传递回调遍历样式规则: $("ul li:last").addClass(func…
源码API:http://api.jquery.com/jQuery.Callbacks/ jQuery.Callbacks()是在版本1.7中新加入的.它是一个多用途的回调函数列表对象,提供了一种强大的方法来管理回调函数队列. 那么jQuery.Callbacks使用场景在哪里? 在很多时候需要控制一系列的函数顺序执行.那么一般就需要一个队列函数来处理这个问题 我们看一段代码 function Aaron(List, callback) { setTimeout(function() { va…
jQuery提供了一些快捷函数来对dom对象的属性进行存取操作. 这一部分还是比较简单的. 根据API这章主要是分解5个方法 .attr()   获取匹配的元素集合中的第一个元素的属性的值  或 设置每一个匹配元素的一个或多个属性. .prop() 获取匹配的元素集中第一个元素的属性(property)值或设置每一个匹配元素的一个或多个属性. .removeAttr() 为匹配的元素集合中的每个元素中移除一个属性(attribute). .removeProp() 为集合中匹配的元素删除一个属性…
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 通过Expr.find[ type ]我们找出选择器最右边的最终seed种子合集 通过Sizzle.compile函数编译器,我们把tokenize词法元素编译成闭包函数 超级匹配superMatcher,用佳的方式从seed种子集合筛选出需要的数据 也就是通过seed与compile的匹配,得出最终的结果了 superMatcher 函数 这个方法并不是一个直接定义的方法,通过matcherFromGroupMatch…
传统的时间处理: 给某一个元素绑定一个点击事件,传入一个回调句柄处理 element.addEventListener('click',doSomething,false); 这样的绑定如果页面上面有几百个需要绑定,那么就要绑定几百多次. 问题: 大量的事件绑定,性能消耗,而且还需要解绑(IE会泄露) 绑定的元素必须要存在. 后期生成HTML会没有事件绑定,需要重新绑定. 语法过于繁杂 事件委托 DOM有个事件流的特性,在页面上触发节点的时候事件都会上下或者向上传播,事件捕捉和事件冒泡. 事件传…
阅读提示:阅读本文前,最好先阅读<Spark2.1.0之源码分析——事件总线>.<Spark2.1.0事件总线分析——ListenerBus的继承体系>及<Spark2.1.0事件总线分析——SparkListenerBus详解>几篇文章的内容. LiveListenerBus继承了SparkListenerBus,并实现了将事件异步投递给监听器,达到实时刷新UI界面数据的效果.LiveListenerBus主要由以下部分组成: eventQueue:是SparkLis…
这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: <!doctype html> <html> <head> <title></title> <script src='jquery-1.7.1.js'></script> </head> <body> <img src=''/>…
前言: 貌似以前自己也写过图片懒加载插件,但是新公司使用的是jQuery.lazyload插件,为了更好的运用,自己还是把源码看了遍,分别记录了如何使用, 插件原理,各个配置属性的完整解释,demo实例,源码分析(较简短),源码分析可以配合使用,配置属性,原理进行阅读,如需转载,请注明出处 博客园 华子yjh 一.如何使用 // 最简单的使用,不带参数 $('img').lazyload(); // 带参数(配置对象),下面配置对象中的各个属性值都是默认的 $('img').lazyload({…
本系列文章讲介绍这个Deferred东西到底拿来干什么,从1.5版本加进来,jQuery的很多代码都重写了.直接先上源码分析了,清楚了源码分析,下节将讲具体的应用 以及应用场景. 创建对象 var def=$.Deferred(); 包含 done,resolve,resolveWith,reject,rejectWith,isResolved等等方法 这套系列文章主要是分析jQuery的源码 jQuery.extend({ // Create a simple deferred (one ca…
最近的分析都是有点不温不火,基本都是基础的回顾了 今年博客的目标目前总的来说有2大块 JS版的设计模式,会用jQuery来诠释 JS版的数据结构,最近也一直在狠狠的学习中. HTML息息相关的的样式 偏移量 offsetWidth offsetHeight offsetLeft offsetTop offsetHeight/offsetWidth: 表述元素的外尺寸:元素内容+内边距+边框(不包括外边距) offsetLeft/offsetTop: 表示该元素的左上角(边框外边缘)与已定位的父容…
.height() .innerHeight() .innerWidth() .outerHeight() .outerWidth() .width() 基础回顾 一般的,在获取浏览器窗口的大小和位置时,有以下几个属性可以使用: 在不同的浏览器中,以下12个属性所代表的意义也是不一样的 特别需要注意的是,当使用或者不使用<!DOCTYPE>声明显示一个文档的时候,以上12个属性的意义也会发生变化. 特在IE 9中,无论是否使用<!DOCTYPE>声明显示一个文档,document.…
楔 子 随着移动互联网时代的开启,各种移动设备走进了我们的生活.无论是日常生活中人手一部的手机,还是夜跑者必备的各种智能腕带,亦或者是充满未来科技感的google glass云云,它们正渐渐改变着我们的生活习惯以及用户交互习惯.触摸屏取代了实体按键,Siri开始慢慢释放我们的双手,而leap motion之类的硬件更是让我们彻底不需要接触IT设备便能通过手势控制它们.在这样的大背景下,前端的交互将涉及越来越多元的交叉学科,我们正如十几年前人们经历Css的诞生一样,见证着一场带动整个行业乃至社会的…
该方法是绑定在jQuery.prototype上的一个静态方法,目的是取出jQuery对象中的某个或全部DOM元素. 使用方法: $("someDOM").get(index); 此时会获取到$("someDOM")这个jQuery对象中第index个DOM元素. 源码: get: function( num ) { // 如果get不传如参数,则返回当前jQuery对象中的所有DOM元素的数组形式.(jQuery对象是类数组,内部包含一个数组)        re…
parseJSON: function( data ) { // Attempt to parse using the native JSON parser first if ( window.JSON && window.JSON.parse ) { return window.JSON.parse( data ); } if ( data === null ) { return data; } if ( typeof data === "string" ) { //…
本文来自http://blog.csdn.net/chenshaoyang0011 Android系统的一大特色是它拥有的桌面通知系统,不同于IOS的桌面管理,Android有一个桌面系统用于管理和展示APP以及桌面Widget等. Android提供一个默认的桌面应用,当然我们也可以使用第三方的桌面应用.Android的Launcher的源码在  \packages\apps\Launcher2. Launcher2的主布局文件包括res\layout-land\launcher.xml , …
Launcher在应用启动的时候,需要加载AppWidget,shortcut等内容项,通过调用LauncherModel.startLoader(),开始加载的工作.launcherModel中加载好的内容会通过LauncherModel.Callbacks接口的回调函数将数据传给需要的组件,那先来看看Callbacks的定义: public interface Callbacks { public boolean setLoadOnResume(); public int getCurren…