JavaScript学习笔记--06

来源：互联网发布：荷兰专升本知乎编辑：程序博客网时间：2024/04/29 09:37

JavaScript编程原则和良好的习惯

前面几篇介绍了JavaScript的一些知识和应用案例，这篇笔记记录下如何更好的编写JavaScript的一些原则和习惯。

预留退路（最有用的技巧）

所谓预留退路，就是可以让访问者在他们的浏览器不支持JavaScript的情况下任然能顺利抵浏览我们的网站。

只有在绝对有必要的情况下才使用弹出窗口，为这涉及到网页的可访问性问题：

浏览器不支持弹出窗口
浏览器的弹出窗口支持功能已经被用户禁用
用户使用的屏幕读取软件无法向用户说明弹出了窗口
……等等

因此，如果网页上的某个链接将弹出窗口，最好在这个链接本身的文字中予以说明。

JavaScript使用window对象的open()方法来创建新的浏览器窗口。这个方法有三个参数：window.open(url,name,features)

这三个参数都是可选的，第一个参数是想在新窗口打开的那份文档的URL地址，如果省略这个参数，屏幕上将弹出一个空白的浏览器窗口。第二个参数是新窗口的名字，可以在代码里通过这个名字与新窗口进行通信。最后一个参数是一个以逗号分隔的字符串，其内容是新窗口的各种属性。这些属性包括新窗口的尺寸（宽度和高度）以及新窗口被激活或禁用的各种浏览器功能（工具条、菜单条、初始显示位置，等等）。对这个参数应该掌握以下原则：新窗口的浏览功能要少而精。

open()方法是BOM（Browser Object Model，浏览器对象模型）的一个典型应用案例：它的功能既不依赖于文档的内容，对文档的内容也无影响。这个方法只与此时此刻的用户浏览器环境（具体到要讨论的例子，就是当前window对象）有关。

下面这个函数是window.open()方法的一种典型应用：

function popUp(winURL){window.open(winURL,"popup","windth=320,height=480");}

这个函数将打开一个320像素宽、480像素高的新窗口“popup”。由于已经在这个函数里为新窗口明明，所以当把新的URL地址传递给此函数时，这个函数将把新窗口里的现有文档替换为新URL地址处的文档，而不是再去创建一个新窗口。

把这个函数存入一个外部文件。因此，当需要在某个网页里使用这个函数时，只要在这个网页的<head>部分用一个<script>标签导入那个外部文件即可。函数本身不会对网页的可访问性产生任何影响——会影响的只是：我们将如何使用此函数。

分离JavaScript

应该向CSS学习，CSS技术的突出优点，是文档结构和文档样式的分离可以确保各有关网页都有预留退路。

JavaScript语言不要求时间必须写在HTML文档里处理。

例如，在“JavaScript美术馆”案例中，可以将HTML文档中内嵌的事件处理函数分离出来。具体步骤如下：

1.把文档里的所有链接全放在一个数组里；

2.遍历数组；

3.如果某个链接的class属性等于popUp，就说明这个链接在被点击时将调用popUp()函数。

于是：

A.把这个链接的href属性值传递给PopUp()函数；

B.取消这个链接的默认行为，不让这个链接把访问者带离当前窗口。

下面是实现上述步骤的JavaScript代码：

var links=document.getElementsByTagName("a");for (var i=0;i<links.length;i++){if(links[i].className=="popUp"){links[i].onclick=function(){popUp(this.getAttribute("href"));return false;}}}

以上代码将把调用popUp()函数的onclick时间添加到有关的链接上。只要把它们存入一个外部JavaScript文件，我们就等于把些操作从HTML文档里分离出来了。而这就是“分离JavaScript”的含义。

如果把这段代码存入外部的JavaScript文件，他们将无法正常运行。因为，这段代码的第一行是

var links=document.getElementsByTagName("a");

这条语句将在JavaScript文件被加载时立刻执行。因此此JavaScript问件事从HTML文档的<head>标签部分用<script>标签调用的，所以它将在HTML文档之前加载到浏览器，而此时HTML文档还没与全部加载到浏览器里，文档模型也不完整。没有完整的DOM，getElementsByTagName()等方法就不能正常工作。

必须让这些代码在HTML文档全部加载到浏览器之后才开始执行，还好，HTML文档全部加载完毕时将处罚一个事件，这个事件有他自己的事件处理函数。

HTML文档将被加载到一个浏览器窗口里，document对象又是window对象的一个属性。当window对象处罚onload事件时，document对象已经存在。

将上述的JavaScript代码打包在prepareLinks()函数里，并把这个函数添加到window对象的onload事件上去。这样就可以正常工作了：

window.onload=prepareLinks;function prepareLinks(){var links=document.getElementsByTagName("a");for (var i=0;i<links.length;i++){if(links[i].className=="popUp"){links[i].onclick=function(){popUp(this.getAttribute("href"));return false;}}}}

不要忘记把popUp()函数也保存在那个外部的JavaScript文件里去。

这个简单的例子演示了怎样才能成功地把行为与结构分离出来。后面还会讨论几种可以在文档加载时把事件添加到有关元素上去的巧妙方法。

向后兼容性

正如前面反复强调的那样，你的网站访问者可能未激活JavaScript功能。同时，不同浏览器对JavaScript的支持程度也是不一样的。

对象检测（object detection）：只要把某个方法打包在一个if语句里，就可以根据这条if语句的条件表达式的求值结果是true（这个方法存在）还是false（这个方法不存在）来决定应该采取怎样的行动。

在JavaScript语言里，几乎所有的东西（包括各种方法在内）都可以被当做对象来对待，而这意味着我们可以容易地把不支持某个特定DOM方法的浏览器检测出来。

例如，下面的代码可以用来检测getElementById()方法是否存在：

if(!getElementById){return false;}

因为花括号部分之余一条语句，所以也可以简写成一行：

if(!getElementById)  return false;

如果需要测试多个方法或者属性是否存在，可以用“逻辑或”操作符将其合并：

if(!getElementById||!getElementsByTagName)  return false;

例如，可以在之前的JavaScript代码里检测是否理解了getElementsByTagName()方法：

window.onload=prepareLinks;<strong>if(!document.getElementsByTagName)  return false;</strong>function prepareLinks(){var links=document.getElementsByTagName("a");for (var i=0;i<links.length;i++){if(links[i].className=="popUp"){links[i].onclick=function(){popUp(this.getAttribute("href"));return false;}}}}

这一句简单的If语句，但它可以确保那些“古老的”浏览器不会因为我们的脚本代码而出现问题。在给网页添加各有关行为时要始终遵循“循序渐进”原则。

PS：浏览器嗅探（browser sniffung）技术，也是解决向后兼容性问题的办法。但由于其复杂性，正被更简单也更健壮的对象检测技术所取代。

0 0