学习 DOM 脚本编程（Scripting）有捷径吗？

当然有。要不然怎么会有“与君一席话，胜读十年书”之说呢？《Beginning JavaScript with DOM Scripting and Ajax 》就是这样一个捷径。这是一本大巧若拙的书－－国内（至今）没听说引进，如果啃其原版那是相当费劲的－－因为它太“拙”了，甚至连中国人都觉得 Chris Heilmann  这个老外的英文拗口。然而，它的“拙”属于洗尽铅华和吹尽狂沙的那种。第一印象，它淡得令人寡味、枯得令人却步，但一步一步跟着它“像奴隶般地敲进代码运行后”，又令人有大彻大悟之感。

事物的本来面目往往很难吸引更多的目光，就是因为本质的东西太枯燥、太乏味、太没趣－－甚至赤裸裸。在这个热衷于包装、追求感观刺激的时代，这本书以朴实无华（甚至笨拙）的语言，详述了 HTML、CSS 和 JavaScript 在 Web 标准化大潮中各自扮演的正确角色，书中的案例完全是“纯手工”打造，让读者一遍又一遍地感受到重用、DOM 逻辑，以及结构、行为和表现相互之间天衣无缝的结合过程。正是这一遍又一遍看似简单的重复，使读者逐渐培养起了结构、行为与表现三层分离的理念，巩固并提升了  Web 可用性、兼容性和可维护性的意识。最终，把读者领入了基于标准进行 Web 开发的殿堂。

虽然，书中的个别章节有“粗制滥造”之嫌（比如：from DHTML to DOM Scripting 一章，就不如作者的长文更具完整性），但瑕不掩瑜，它仍然是一本光辉的里程碑式著作。不用华丽的辞藻、没有深奥的理论、抛弃传统的桎梏、Make the life easy！这就是这本书的宗旨和口号。

下面是作者带领读者亲手编写的实用函数库中的一段代码：

/*
	DOMhelp 1.0
	written by Chris Heilmann
	http://www.wait-till-i.com
	To be featured in “Beginning JavaScript for Practical Web Development, Including  AJAX”
*/
Util = {
	[… …]
	addEvent: function(elm, evType, fn, useCapture){
		if (elm.addEventListener){
			elm.addEventListener(evType, fn, useCapture);
			return true;
		} else if (elm.attachEvent) {
			var r = elm.attachEvent(’on’ + evType, fn);
			return r;
		} else {
			elm[’on’ + evType] = fn;
		}
	},
	[… …]
}

为简短起见，这里只截取了其中一个方法 Util.addEvent。通过这些自定义的实用函数，开发者可以非常容易实现各种动态页面效果。比如：

//单击“返回顶部”后，平滑地返回页面顶部；bt 是 backTop 的缩写。
bt = {
		btClass : “backToTop”,
		init : function(){
			var a = Util.getElements(bt.btClass,”a”,”");
			for (var i=0;i < a.length ;i++ )
				Util.addEvent(a[i],”click”,bt.scroll,false);
		},
		scroll : function(e){
		    var a = Util.getTarget(e);
		    Util.cancelClick(a);         

		    var x1 = x2 = x3 = 0;
		    var y1 = y2 = y3 = 0;         

		    x1 = document.documentElement.scrollLeft || 0;
		    y1 = document.documentElement.scrollTop || 0;
		    x2 = document.body.scrollLeft || 0;
		    y2 = document.body.scrollTop || 0;
		    x3 = window.scrollX || 0;
		    y3 = window.scrollY || 0;         

		    var x = Math.max(x1, Math.max(x2, x3));
		    var y = Math.max(y1, Math.max(y2, y3));         

		    window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));         

		    if (x > 0 || y > 0)
				window.setTimeout(”bt.scroll()”, 25);
		}
}
Util.addEvent(window,”load”,bt.init,false);

以上代码加上在相应的链接元素（a）中添加一个值为 backToTop（区分大小写）的 class 属性，平滑地返回页面顶部的效果就可以实现了。比如：

<a class=”backToTop” href=”#” mce_href=”#”>返回顶部</a>

原理剖析：

• 首先，当页面载入完成（load 事件发生）后调用 bt.int 方法。
• 然后，bt.int 方法调用 Util.getElements(bt.btClass,”a”,”"); 方法在 DOM 树中搜索 class 属性为 bt.btClass（即：”backToTop”）的链接元素（a）。如果没找到，什么也不做（return;）；如果找到了，则为其注册单击事件处理函数－－bt.scroll。
• 最后，当用户单击 class 属性值为 backToTop 的链接时，就会调用 bt.scroll 函数，实现平滑滚动效果。

简单评述
结构与行为分离的核心就是在 HTML 代码中（结构层）只应用一个“接口”，而在 JavaScript（行为层）代码中只调用一个“接口”。这个共同的“接口”在本例中就是 class=”backToTop”。如果将来想为同一个链接应用新的功能（并保留原功能），可以把“接口”修改为 class=”backToTOP newValue”，这样就等于为链接添加了一个新接口；如果想修改平滑返回页面顶部的函数－－随便修改，只要 bt.btCalss=”backToTop” 就可以。