Page 29 - JavaScript修炼之道

16 第二部分 DOM、事件及定时器

任务 7 在 DOM 加载完成后运行脚本

为了使你的页面在一开始就能给出正确的响应，你的脚本应该在页面DOM加载完成后尽快
得到执行。

如果你使用window的load事件，你的脚本就得等到所有资源（包括样式表、图片以及Google
Analytics 跟踪器之类的加载时间很长的脚本）加载完成之后才能被执行。而这往往会使页面得
①
不到及时的渲染。

所有的JavaScript库都在这方面下足了功夫，它们的处理方法很相似：以自定义方法或是自定
义事件（比如Prototype、MooTools和YUI3）的形式提供了一个触发器，你只需把要执行的脚本
写到一个函数里，再把这个函数指派到这个触发器上就可以了。

顺便提一个良好实践：如果你的UI部分依赖于JavaScript，那你就应该把非JavaScript相关的
UI设置为默认可见，而把JavaScript相关的UI设置为隐藏。等DOM加载的事件发生之后，你只需
把JavaScript相关的部分添加到文档中，然后利用CSS切换其可见性。由于这样可以避免页面载入
中的UI闪烁，因此它比直接使用JavaScript来隐藏无关UI要好很多。

现在举一个相当有技巧的例子：假设你的初始化代码位于某处的实例方法中，为确保实例方
法内部的this指向正确的实例，需要保持方法与原来实例的绑定关系。多数库提供了常规方法绑
定的方式（比如Prototype中的bind()）来实现它，而Dojo和Ext JS在这方面走得更远，它们允许
你为方法的实例提供一个显式的引用。也就是说，它们可以直接在合适的上下文中调用方法：

// Dojo
dojo.addOnLoad(binding, fx)
// Ext JS
Ext.onReady(fx, binding)
你也应该去检查你的初始化代码是否真的在DOM加载时执行；在少数情况下，一些代码会
过早执行。举例来说，你可能需要等待某幅图像载入完成，以便根据它们的尺寸来设置UI；与此
类似，你可能需要等待某个CSS样式表加载完毕，以便设置元素的尺寸、颜色等属性。在这种情
况下，你有可能要使用window的load事件。不过，在大多数情况下，DOM加载事件已经够用了。

——————————
① Google Analytics是Google为网站提供的数据统计服务。可以对目标网站进行访问数据统计和分析，并提供多种参
数供网站拥有者使用。*