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

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

如何面试一个前端开发者?

Author : lovecicy

是的,招人很难!尤其要在短时间内判断一个人是否适合岗位更是一个高难度的工作。如何面试一个前端开发者,如何判断一个前端开发者的水平,这是对面试者的一个考验,曾就职于Twitter和Stripe这两家公司的Alex MacCaw和我们分享了他的面试过程和一些他设计的不同类型的面试问题,有兴趣看英文原本的请戳这里。 Alex认为,理想情况下,应聘者应该有一份比较完整的GitHub‘简历’, 这样我们可以一起来回顾他们参与的开源项目。并且可以先浏览他们的代码,然后针对某一个具体的代码设计问他们一些问题。如果应聘者在这一部分表现非常优秀,就可以直接进入团队社交能力的考察部分。否则的话,他会让他们做一些编程题目。但是在国内公司,对GitHub简历可能还没有那么看中,当然如果面试者有一份好的GitHub简历,这肯定是很好的加分项。 Alex面试的时候是非常注重实践的,整个面试过程几乎全都是在写代码。他不会问一些比较抽象的或者算法相关的问题,因为他觉得这些知识未必是一个前端开发者所必需的。他问的问题看起来比较简单,但实际上每一类问题都可以让他洞悉应聘者在JavaScript的某一方面的知识。 通常面试[Read More]

standard

巧用JS数组方法

Author : lovecicy

当我们用jQuery选择元素之后,如果要取到第一个元素,我们会用类似下面的方法 $(‘div’)[0]; 很自然的,我们会以为jQuery返回的是一个所有符合选择器条件的DOM元素的数组,因为我们不但可以通过$(‘div’)[n]这种方式获取,也可以获取jQuery返回对象的length属性。但是今天看了篇文章,发现其实jQuery返回的是一个对象,而不是数组。我们可以通过$(‘div’)[0]这种方式获取是因为jQuery对象在模拟数组对象。 看了些网上的文章,发现jQuery这种做法其实是对数组方法的巧妙使用,我们来看下面的代码: var aPush = Array.prototype.push; var testObj = {0:’a’,1:’b’}; testObj.length = 2; aPush.apply(testObj, [‘c’,’d’]); console.log(aPush); 查看控制台,可以看到下面的输出: Object {0: “a”, 1: “b”, 2: “c”, 3: &#822[Read More]

standard

监听输入框的实时变化的解决方案

Author : lovecicy

在做文本输入的时候,会碰到需要检测输入框实时变化的事件。除了blur、keyup、keydown事件,并不能完全满足我们的要求,比如用户持续按一个键,只会触发一个keydown事件,但是会输入很多字符。这时候就需要用到oninput和onpropertychange事件了。 oninput是HTML5标准事件,但是旧版的IE(<IE9)并不支持,不过IE也提供了专有的onpropertychange事件来监听输入框的变化。 oninput事件在检测 textarea, input:text, input:password 和 input:search 这几个元素内容变化时非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。 各浏览器对oninput的支持情况: Chrome (yes) | FireFox 2 | IE9 | Opera 10 | Safari (yes) 用jQuery实现的代码如下: $(selector).bind(‘input propertychange’, function() { //do something }); 不[Read More]

standard

awnsome javascript plugins

Author : lovecicy

This days, iam working on a JavaScript project,the main function is make a page to share something through email, so I need to learn the logic from gmail, outlook, or yahoo mail. The major difficult is the receiver input box, I need to get address book from backend and search from the address book as the user type in any char. On github, I found a good jQuery plugin named tokenInput,it can search and show results in drop down list when you are typing, and can send all the selected items to backe[Read More]

standard

jQuery Performance Rules

Author : lovecicy

Once upon a time, all we needed to worry about was reducing Bytes and Requests and playing around with load order to make things faster. Nowadays, we are increasingly impacting one more major component in performance – CPU utilization. Using jQuery and other frameworks that make selecting nodes and DOM manipulation easy can have adverse affects if you’re not careful and follow some simple practices for reducing the work the browser has to do. Always Descend From an #id Use Tags Before Clas[Read More]

standard