你的位置:首页 > Java教程

[Java教程]JavaScript学习笔记——DOM基础 2.4


一、平稳退化

1、概念

早期,在未使用JavaScript之前,网页中的内容可以正常显示出来,用户可以通过外设(如鼠标)操控浏览到相关内容,这种浏览体验对用户而言可能并不理想。

根据这个需求,内容的提供方就有了合理化目标——那就是在不影响内容展示的前提下,使用JavaScript来改善用户体验,提高用户粘性。

在这个标目中,有个非常明显的条件,就是不能影响内容的正常展示,换言之,即使用户的浏览器不支持JavaScript,也能保证用户可以正常浏览。

2、方法

①将JavaScript与HTML分离

这是首先应该想到的,让两者分离,HTML就像回到早期未使用JavaScript之前的状态,干爽如初啊。

譬如将element.onClick之类的事件处理函数写进JavaScript中,与某函数进行绑定。

②对JavaScript中的方法进行检测

之前提到的一些方法,如getElementById之类,都需要去判定该方法是否支持。

<script>if(! document.getElementById) return false;</script>

通过if语句这种方式来检测是否支持该方法,如果支持,可以继续,不支持,直接返回false,这样就没必要耽误功夫了,也起到了性能优化的作用。

二、绑定onload事件

1、绑定缘由

一些函数需要在页面加载完全之后才能有效执行,我们需要将函数绑定到window.onload这个事件上。

<!doctype html><html><head><meta charset="utf-8"><title>筱雨生 - 博客园</title><script>function tagAttribute(){var ali = document.getElementsByTagName('li'); for(var i = 0; i < ali.length; i++){  if(ali[i].firstChild.nodeType == 3){    alert(ali[i].childNodes[0].nodeValue);  }}}window.onload = tagAttribute;</script></head><body><h1>筱雨生</h1><p>時光飛逝,莫讓網絡蹉跎了歲月</p><div id="myBlog"><ul><li title="JavaScript">JavaScript</li><li title="HTML">HTML</li><li title="CSS">CSS</li><li title="我的随笔">我的随笔</li><li></li></ul></div></body></html>

在上面这个实例中,如果不绑定window.onload,执行函数tagAttribute将会毫无意义。

还需要注意一点,绑定的是函数,而不是这个函数的值,所以后面不带圆括号。

2、绑定方法

如果你只需要绑定一个函数,那么上面的方法完全可以轻松实现你的目的。

window.onload = myFunction;

如果是多个,也许你会去一个个的绑定,可是,这样做的结果是只有最后一个函数才会被有效执行,关于这一点其实很好理解。

我们的目的是,不管页面中加载完毕时执行多少个函数,这些函数都可以有效执行,也就是说,这些函数都被成功绑定window.onload事件。

<!doctype html><html><head><meta charset="utf-8"><title>筱雨生 - 博客园</title><script>function addOnLoadEvent(func){  var oldonload = window.onload; // 把现有的window.onload事件处理函数的值存储到变量oldonload  if(typeof window.onload != 'function'){ // 如果这个处理函数上还没有绑定任何函数    window.onload = func; // 将这个函数绑定到window.onload事件  }else{    window.onload = function(){ // 如果这个处理函数已经绑定了函数,就把这个函数追加到指令的末尾      oldonload();      func();    }}}//自定义函数 tagAttribute //功能:获取li标签中的title值function tagAttribute(){var ali = document.getElementsByTagName('li'); for(var i = 0; i < ali.length; i++){  if(ali[i].childNodes[0].nodeType == 3){    alert(ali[i].childNodes[0].nodeValue);  }}}addOnLoadEvent(tagAttribute); // 为tagAttribute函数绑定到window.onload事件</script></head><body><h1>筱雨生</h1><p>時光飛逝,莫讓網絡蹉跎了歲月</p><div id="myBlog"><ul><li title="JavaScript">JavaScript</li><li title="HTML">HTML</li><li title="CSS">CSS</li><li title="我的随笔">我的随笔</li><li></li></ul></div></body></html>

三、题外话

当你面对一个问题的时候,一定要坚信它有多种解决方案。