源码

前言

在浏览器把DOM树渲染好之前，javascript是无法操作没渲染好的DOM节点。
例如：

1
2
3
4
5
6

  <script>
    var dom = document.getElementById("test");
    //由于script先执行，此时浏览器的还没渲染id为test的DOM节点，所以这里拿不到
  </script>
  <div id="test">
  </div>

这是很多新手在操作DOM树容易犯的错：在文档DOM就绪前就取DOM节点。
jQuery提供了ready函数，你可以在ready里边添加回调，jQuery会保证在文档就绪后依次执行这些回调。 [Read more...]

前言

接上一篇《jQuery源码剖析（二）——$.Callbacks》，对于javascript来说，回调这个概念无处不在，bang上次还抱怨nodejs里边读取文件内容都要回调，这里读取文件内容其实就是异步的场景。异步真是无处不在的：ajax请求，页面动画。
对于读取文件内容这个场景，通过$.Callbacks来表述读取某个文件的场景，就是以下代码：

1
2
3
4
5
6
7
8
9
10

var callbacks = $.Callbacks();
callbacks.add(function(){
  alert('读取到内容');
});
callbacks.add(function(content){
  alert('内容：' + content);
});
read('raphealguo.txt', function(content){
  callbacks.fire(content);
});

显然这样的做法不优雅，每次要读一个文件必须定义一个callback管理器实例。
而且读取文件有可能有失败的情况，这样就还得要去定义多一个callback管理器去处理失败的回调队列。 [Read more...]

前言

上一篇《jQuery源码剖析（一）——概览&工具方法》最后说要了解一下jQuery的ready实现。
为了彻底理解jQuery的ready实现，所以需要理解什么是异步队列。
为了彻底理解jQuery的异步队列实现，所以需要理解什么是回调函数队列管理器（姑且叫这个名字吧，其实就是jQuery.Callbacks）。
可以看到学习实际上就是一个拓扑的问题，这篇文章完全是剖析$.Callbacks的原理&实现。
官方文档上写到$.Callbacks的用途：

A multi-purpose callbacks list object that provides a powerful way to manage callback lists.

$.Callbacks是在1.7的版本之后新增的，它提供了一些很优美的方法来管理回调函数队列。 [Read more...]

前言

其实这剖析jQuery源码系列文章是我自己酝酿很久的想法，当然因为之前的不成熟以及理解不深刻一直不敢提笔写。近期阅读的书籍多，激发我写文章的欲望，于是把这个计划开始实施。

为什么要选择jQuery源码，我想对于一个前端开发人员来说，不言自明。jQuery的出现对于众多前端开发人员来说，是一个无比强大的武器。那为什么jQuery如此流行，深得大家喜欢？我认为秘籍就在于jQuery的API设计。

在jQuery的设计中，最主要的两块就是（个人看法）：

1. 提供工具方法；
2. DOM元素的操作，包括选取，属性取值等等。

对于一个库来说，第一点是必然要有所体现的，没有基础的工具方法，如何成为库。

对于Javascript来说，最重要的一块就是DOM操作，jQuery在DOM操作这块的贡献是巨大的，以至于现在很多新手完全不会用原生的JS API（例如document.getElementById等）了，jQuery把复杂的DOM选取映射到了简单的CSS选择器，对复杂的DOM操作（不同浏览器的DOM操作接口不一致）封装非常简单的委托API，以达到其核心的目的：The Write Less, Do More。 [Read more...]