Dom编程艺术第五章

来源:互联网 发布:淘宝美工图片后期处理 编辑:程序博客网 时间:2024/06/05 12:07

本章节练习代码下载:Dom编程艺术第五章最终代码

1、网站的访问者完全有可能使用的是不支持JavaScript的浏览器,或者是用户已经禁用JavaScript(禁止广告弹窗),如果正确地使用JavaScript脚本,就可以让访问者在他们的浏览器不支持的情况下仍能顺利地浏览你的网站。

2、在给内容加上各种标记后,就可以使用各种CSS指令控制内容的显示效果。CSS指令构成了一个表示层。这个表示层就像是一张透明的彩色薄膜,可以包裹到文档的结构上,使文档内容呈现出各种色彩。但即使去掉这个表示层,文档的内容也依然可以访问。
所谓“渐进增强”就是用一些额外的信息层去包裹原始数据。按照“渐进增强”原则创建出来的网页几乎都符合“平衡退化”原则。
应该把CSS代码从HTML文档里分享出来放在外部文件里。再在文档的head部分用来调标签来使用这个文件。

3、类似于使用style属性,在HTML文档里使用诸如onclick之类的属性也是一种既没有效率又容易引发问题的做法。如果我们用一个“挂钩”,就像CSS的class或id属性那样,把JavaScript代码调用行为与HTML文档的内容分离开,网页就会健壮得多。

4、HTML文档全部加载完毕时将触发window.onload事件,这个事件有它自己的事件处理函数,因此需要JavaScript代码在HTML文档全部加载完成后马上开始执行,可以用以下方法:

window.onload = prepareLinks;           // prepareLinks为要执行的函数。

5、在进行对象检测时,一定要删掉方法名后面的圆括号,如果不 删掉,测试的将是方法的结果,无论方法是否存在。

function myFunction() {    if (document.getElementById){        // 使用的方法,这里注意上方去掉圆括号而不是document.getElementById()    }}

因此,如果某个浏览器不支持getElementById()方法,它就永远也不会执行使用此方法的语句。

6、性能优化时尽量少访问DOM和尽量减少标记。
如:

if (document.getElementsByTagName("a").length > 0){    var links = document.getElementsByTagName("a");    for (var i = 0; i < links.length; i++){        // 对每个节点做处理    }}

可改成

var links = document.getElementsByTagName("a");if (links.length > 0){    for (var i = 0; i < links.length; i++){        // 对每个节点做处理    }}

或者把把搜索结果保存在一个全局变量里,或者把一组元素直接以参数形式传递给函数。

7、合并和放置脚本,如果有functionA.js、functionB.js、functionC.js、functionD.js多个脚本,可考虑将其合并并压缩,有很多工具都可以替你做这件事。精简后的代码虽然不容易看懂,却能大幅减少文件大小。多数情况下,应该有两个版本,一个是工作副本,可以修改代码并添加注释;一个是精简副本,用于放在站点上。通常,为与非精简版本区分开,最好在精简副本的文件名中加上min字样:

<script src="scripts/scriptName.min.js"></script>

8、传统上,我们都把脚本放在文档的区域,这种方法有一个问题。位于块中的脚本会导致浏览器无法并行加载其他的文件(如图像或其他脚本)。因此可以把所有

原创粉丝点击