jQuery源码阅读(六):Deferred API(上)

Author : lovecicy

聊完了Callback API,接下来我们来聊聊Deferred API吧。 一、什么是Deferred API? 按个人的理解,Deferred API是用来实现一下功能的:某个事件的执行过程是异步的,需要等待一段时间,这时我们可以把这个事件称作延迟事件,我们用一个Deferred对象来表示它,为它添加成功、失败以及正在处理中的事件处理方法,当事件成功或者失败后,调用对应的处理方法。比如要通过AJAX获取一段内容,这个过程需要一定时间,在这段时间内我们不应该阻塞后面代码的执行,而是返回一个Deferred对象,为它添加成功与失败的回调函数,然后让代码继续执行。如果AJAX调用成功,则执行成功的回调函数,比如改变界面显示;如果AJAX调用失败,则调用失败的回调函数,比如提示用户获取内容失败。 二、谁在用Deferred API? 在jQuery内部,有以下功能使用到了Deferred API: AJAX 动画 DOM Ready $.fn.promise() 三、拆解Deferred API Deferred API的代码量还是比较少的,总共才80多行,但是信息量还是挺大的,这里我们分[Read More]

standard

JavaScript 严格模式(use strict)

Author : luckyGirl

“use strict”在一些插件中是常见的,是ECMAScript 5的另一种运行模式 —— “严格模式”,即在这种模式下,对于JavaScript代码则更加严格,可以更好的检查代码的错误或是不严谨,因此同样的代码在“严格模式”下可能会有不同的运行效果。ECMAScript引入这一模式主要是对于以下几个因素的考虑: 安全性,消除JS代码运行的不安全之处 改善代码质量,避免易发的错误 改善代码的错误检测 一、声明严格模式 使用”use strict”语句,代码将进入“严格模式”,使用的场合有文件,模块或是一个函数,无论哪种,这个声明必须放在第一行,否则无效。 整个文件处于严格模式 针对单个函数采用严格模式 模块或是库,常常采用匿名函数自执行,则自执行函数内部采用严格模式 二、严格模式下的语法限制 在严格模式下,JS的语法以及运行结果产生了一些改变,之前在正常模式下能运行的函数或仅是执行失败的语法,在严格模式下会报错 变量使用前必须声明 Error: SCRIPT5042: Variable undefined in strict mode[Read More]

standard

jQuery源码阅读(五):Callback API

Author : lovecicy

上一篇讲述了jQuery Callback API的一个bug,这一篇我们言归正传,来介绍一下Callback API。 Callback API于1.7版本引入,它提供了一种强大的方式来管理一系列的回调函数,可以添加,删除,触发或者停用回调函数。 可能我们在平时使用中不太会用到Callback API,但是在jQuery内部,Callback API可是发挥了很大的作用的。在jQuery的Ajax API和Deferred API中都有用到,而我们的$(calback)方法,依赖于Deferred API,其实也是依赖Callback API的。而且,在平时我们自己写代码的过程中,我们同样可以用Callback API来管理我们的回调函数。 交代完了它的背景,让我们来看看真实的代码吧。 其实在写这篇文章前,我已经看过了前端狮子对于Callback API的解读,虽然我们解读的并非同一个版本的jQuery,但是狮子的文章在一定程度上帮我理解了这部分代码,并且狮子的解读与文章或多或少对我的解读产生了影响,所以,在写这篇文章时,我的内心也在纠结,如果写出类似的文章,那写的意义何在;而如果不[Read More]

standard

jQuery源码阅读(四):jQuery Callback的bug

Author : lovecicy

这两天在看jQuery Callback API的代码,无意中发现了一个jQuery的bug,这个bug存在在目前所有的主流版本中,除了最初引进Callback API的1.7版本,从1.8到2.1,都存在。 先来说说这是一个怎么样的bug,看下面的代码: 在jQuery的文档中是这么描述disable()方法的: Disable a callback list from doing anything more 因此,执行disable()方法后,对这个Callback对象的所有操作都应该被禁止了。但是如果在调用disable()之前,没有调用fire(),那么通过调用empty()方法,我们可以重新添加callback函数,然后成功调用fire()方法。之后,虽然add方法可以再次被调用,但是无法再成功调用fire()方法。 我们可以直接从代码入手,看看这个问题的原因: 当我们调用fire()的时候,在内部实际上是在调用fireWith()方法。而fireWith()能被成功调用的前提是list存在,并且fired为false或stack存在。而disable()被调用以后,list[Read More]

standard

jQuery源码阅读(三):jQuery DOM Ready

Author : lovecicy

一直以来,各种JS最佳实践都会告诉我们,将JS放在HTML的最后,即</body>之前,理由就是:JS会阻塞下载,而且,在JS中很有可能有对DOM的操作,放在HTML的最后,可以尽可能的保证JS的执行在DOM加载完成之后。而如果放在onload事件中执行,如果页面有很多图像,那么页面的onload事件要过很久才会触发,因此DOM Ready事件就是最好的执行JS的时间了。 所以,如果有个DOM Ready事件就好了,虽然现代浏览器已经支持DOMContentLoaded事件,但是我们还是得处理那些老旧的浏览器,于是DOM Ready事件就成了各个JS框架的必备功能啦。 先来看看jQuery DOM Ready事件的用法吧,jQuery的DOM Ready事件用法很简单,大家都用过,下面的三种语法都是可用的: $( document ).ready( handler ) $().ready( handler )(不推荐) $( handler ) 还有一种方式:$(document).on(‘ready’, handler);,已经在1.8版本里被废弃了,但是你还可以这么用。[Read More]

standard

jQuery源码阅读(二):jQuery方法

Author : lovecicy

第一篇介绍了jQuery对象,这一篇来看下jQuery对象是怎么生成的。下面的代码是生成jQuery对象的源码,我把用到的代码取了出来,加了注释: 前面正则的示意图: /^<(\w+)\s*\/?>(?:<\/\1>|)$/ /^(?:[^#&lt;]*(&lt;[\w\W]+&gt;)[^&gt;]*$|#([\w\-]*)$)/ 下面来看一下init函数中接受的参数类型: null, undefined, false, “”这些为空的值,直接返回this DOM Element, 单个的DOM元素,则将context和jQuery对象的第一个元素设为DOM元素 字符串 HTML Tag或未指定context的ID选择器 未指定context或context为jQuery对象 指定了非jQuery对象的context,等同于$(context).find(expr) 函数,等同于DOM Ready,亦即$(document).ready(fn); HTML Collection或者jQuery对象,如果是[Read More]

standard

jQuery源码阅读(一):jQuery对象

Author : lovecicy

开篇先来讲述一下平时使用最多的jQuery对象到底是什么。(这里的jQuery对象指的是$(selector)返回的对象) jQuery最擅长的就是DOM操作,也是其流行的原因之一,用$()方法选择要操作的DOM元素,然后进行各种操作。 以下面的代码为例: 无论是通过标签名选择多个元素还是通过ID选择唯一的元素,只要元素存在,上面的代码总能正确得输出’li’,而且length也是正确的。 这么看来,jQuery似乎返回了一个数组,到底是不是,我们可可以通过下面的方法检验: 所以,jQuery其实返回了一个对象,而非数组。 让我们再来看下这个对象的结构: q.fn.q.init[3] |- 0: li#test |- 1: li |- 2: li |- context: document |- length: 3 |- prevObject: q.fn.q.init[1] |- selector: ‘li’ 原来就是一个拥有length属性,并且属性名为数字的对象,而非数组,大家都亲切的称它为类数组对象 -_-! 。 好了,知道了这个对象的[Read More]

standard

JavaScript 自执行函数笔记

Author : lovecicy

什么是自执行的匿名函数? 它是指形如这样的函数: (function {// code})(); 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错? 分析 (1). 首先, 要清楚两者的区别: (function {// code})是表达式, function {// code}是函数声明. (2). 其次, js”预编译”的特点: js在”预编译”阶段, 会解释函数声明, 但却会忽略表式. (3). 当js执行到function() {//code}();时, 由于function() {//code}在”预编译”阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错; 当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.

standard

Linux环境安装Node.js

Author : luckyGirl

对于Linux完全不通的我成功在虚拟机上安装好Node.js  ,接下来看看偶滴历程吧!! 下载Node.js安装包 请参考 http://nodejs.org/download/,下载Source code 1.登陆到Linux终端,进入root,下载安装包 wget http://nodejs.org/dist/v0.10.29/node-v0.10.29.tar.gz 2.解压文件 tar xvf  node-v0.10.29.tar.gz 3.进入node文件夹 cd node-v0.10.29 4.安装配置 ./configure 5.安装 make make install cp /usr/local/bin/node /usr/sbin/ 现在可以看一下node的版本吧 node -v v0.10.29 安装中出现的错误 以上就是安装的正常流程,事情总是那么不尽人意,终究会报错,我遇到的错误是在 第四步,错误信息大概是 File “./configure”, line 261     o[‘variables’][&#821[Read More]

standard

JavaScript事件笔记

Author : lovecicy

事件流 事件冒泡 事件捕获 DOM事件流 事件处理 HTML事件处理 DOM 0级事件处理 DOM 2级事件处理 IE事件处理 事件对象 DOM事件对象 IE事件对象 一、事件流 事件流描述的是从页面中接收事件的顺序 1. 事件冒泡 IE的事件叫做事件冒泡,事件从最具体的元素开始,逐级向上传播。 当你点击页面中的div时,click事件会按下列顺序传播: 1. div 2. body 3. html 4. document 2. 事件捕获 网景团队提出的另一种事件流叫事件捕获,事件流的方向恰好与事件冒泡相反,同样的,当你点击上面的div时,事件捕获的顺序是: 1. document 2. html 3. body 4. div 3. DOM事件流 DOM 2级事件规定事件流包括3个阶段:事件捕获,处于目标和事件冒泡。在事件处理中,处于目标阶段被看做事件冒泡的一部分。 IE9、Opera、Firefox、Chrome和Safari都支持DOM事件流;IE8及更早版本不支持DOM事件流,即不支持事件捕获。 二、事件处理 响应事件的函数叫做事件处理函数或事件监听器。这一部分,我们来了解下事件[Read More]

standard