读xui,学JavaScript (0)

在今年5月份的时候,我通读了xui的源代码,并完成了对代码文档和注释的翻译工作。本来是想用于公司内部分享,但由于种种原因,最终没有成型。最近有了时间,也有了合适的工具,所以打算把这个系列完成,并放到网上和大家分享。

适合人群

会某种面向过程或面向对象编程语言,并且一直在以使用该语言的方式使用JavaScript的人。这样的人在我身边为数不少——没有系统性的学习过JavaScript,按照已有的编程知识,想当然的使用JavaScript,甚至认为JavaScript就是这样的——我也曾是其中之一。但JavaScript远比我们所了解的更强大。希望这个系列能帮助大家更好的了解和使用JavaScript,写出好代码。

为什么选择xui

Xui 是一个用于开发手机网络应用的,极其轻量、极度易用、高度模块化的JavaScript框架。使用起来和jQuery有点类似,但只包含了最实用的部分。
它的核心代码量很少,因为它的设计思路是这样的:首先建立一个核心项目core,只支持那些最符合标准的浏览器;然后在core的基础上开发ie和bb分支,分别支持ie浏览器和黑莓的浏览器。这样,在那些符合标准的浏览器中,就不用载入一些hack代码,使框架的核心保持简洁和高效。这个系列所使用的所有源代码都是属于核心分支core的。
因此,使用xui,我们只需阅读少量的代码就可以了解一个功能全面的完整框架的实现,并学会JavaScript那些最“时髦”和“高端”用法。

文件结构和介绍的顺序

核心分支是根据 util/profiles/core.js 编译而成的,下面是它的源代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
out: "lib/xui", //<1>
include: [ //<2>
"src/header",
"src/base",
"src/js/dom",
"src/js/event",
"src/js/fx",
"src/js/style",
"src/js/xhr",
"packages/emile/emile",
"packages/domready/ready",
"src/footer"
]
}

<1> 为编译脚本指明编译后的文件存放的位置和名称。

<2> 编译脚本会根据include中包含的文件将这些文件依次串联起来,然后根据参数决定是否压缩,并形成最终的xui.js。
在这个系列里,我们要阅读的就是include中所包含文件的源代码(其中packages目录下的是xui所使用的两个第三方库,我们只做相应介绍,并不讲解其源代码)。然后根据JavaScript特性在源代码中出现的顺序一一介绍。如果发现有些知识点过于简单,或者早已了解,你可以直接跳过它,而不会影响对后续内容的阅读,我会尽量做到让它们独立。
最后,非常欢迎各种批评指正。让我们一起改进这个系列的质量,以帮助更多的人。