理解Firefox - 第二章 从DOM出发 （一）

这一章我们从DOM出发学习：

1)  从结构中分离行为

2)  后向兼任性的考虑

DOM Inspectors

学习DOM需要一个DOM查看器。Firefox和IE都提供了DOM Inspector，你也可以使用第三方通用的查看器。在默认安装中，Firefox并不安装DOM Inspector。在‘Tools'菜单中选择’Add-on‘，你可以单独以插件模式安装查看器。千万别像有些书，如《Begin Ajex 》，那样建议你重新安装Firefox——多费事呀。

Firefox的DOM Inspector很人性化。当你选中一个元素，相应网页上会用闪烁的红色框把该元素标注出来。具体的使用就不罗嗦了。需要注意的是不要设置offline模式，同时应该禁止缓存。要不然就算你改了自己的网页，Firefox读的还是Cache里面的东西。

Google in Firefox

安装之后，打开http://www.google.com/firefox，用DOM Inspector看看，可以很看到清晰的DOM结构。

HTML

   HEAD

META

TITLE

#text

STYLE

#text

SCRIPT

点击TITLE下面的text，在Inspector右边的窗口显示Mozilla Firefox Start Page，这是标题的内容。而外观、行为分别放在STYLE和SCRIPT中。

结构与行为的分离

内容和外观（结构和行为）的分离让我们可以更简单的工作。当你的工作是写内容，或浏览器处理文字时，你或浏览器无须担心你破坏了网页外观。反之亦然，当设计或实现网页外观时，对内容最多的考虑也只是添加一些类或属性。这也是CSS最成功的部分。

以程序员的眼光看历史，这种分离正是历史前进的方向。从C到C++，集成到分布，当我们想让生活更简单时，我们应该想到的就是分离。在平日里审查代码中，我经常看到程序员把不相干的功能放在一个模块，甚至一个函数里。这么做，其实只有一个原因就是‘偷懒’。

DOM 相关的代码

DOM的主要部分就在源码顶层目录下。

sunlit@ubunt:~/mozilla-central/dom$ ls

base  dom-config.mk  interfaces  locales  Makefile.in  public  src  tests

在编译目标目录里有着同样的结构。

 

在/dom/interfaces中提供了22类接口。

sunlit@ubunt:~/mozilla-central/dom/interfaces$ ls
base    css          html       offline  smil         svg        views  xul
canvas  events       json       range    storage      threads    xbl
core    geolocation  load-save  sidebar  stylesheets  traversal  xpath

打开core里面的nsIDOMText.idl或nsIDOM3Text.idl，看DOM对Text的处理非常简单。DOM3中就两个属性加一个行为。同样，stylesheets里面的一组接口也很简单的提供了STYLE的功能。（nsIbase的基类在xpcom/core目录下）

DOM本质

DOM被定义为连接XML/HTML的API，它本质上就是把网页链接到程序。虽然DOM是用JavaScript写的，可实际上可以用任何一种语言实现。（http://www.w3.org/DOM/Bindings）

DOM在Firefox项目中很重要，因为用户界面是基于DOM管理的XUL的。所以我把它放在第一个模块讲，虽然在这里暂时没法讲清楚，不过在后面的章节中会反复提到。

 

在这里顺便说一句，因为第一次整理，所以很多地方非常不调理化。欢迎大家给出评论，告诉我你对什么更感兴趣，是软件的细节分析还是背后的设计思想。我会尽量满足大家。

我假设读者了解XML、HTML、JavaScript 和 DOM的基本知识。如果不知道也没关系，上网找找，了解最基本的知识就可以阅读本文。