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
var links=document.getElementsByTagName("a");
for (var i=0;i<links.length;i++){
if(links[i].className=="popUp"){
links[i].οnclick=function(){
popUp(this.getAttribute("href"));
return false;
}
}
}
以上代码将把调用popUp()函数的onclick时间添加到有关的链接上。只要把它们存入一个外部
JavaScript文件,我们就等于把些操作从HTML文档里分离出来了。而这就是
“分离JavaScript”的含义。
var links=document.getElementsByTagName("a");
这条语句将在
JavaScript文件被加载时立刻执行。因此此
JavaScript问件事从HTML文档的<head>标签部分用<script>标签调用的,所以
它将在HTML文档之前加载到浏览器,而此时HTML文档还没与全部加载到浏览器里,文档模型也不完整。没有完整的DOM,getElementsByTagName()等方法就不能正常工作。
window.οnlοad=prepareLinks;
function prepareLinks(){
var links=document.getElementsByTagName("a");
for (var i=0;i<links.length;i++){
if(links[i].className=="popUp"){
links[i].οnclick=function(){
popUp(this.getAttribute("href"));
return false;
}
}
}
}
不要忘记把popUp()函数也保存在那个外部的
JavaScript文件里去。
向后兼容性
if(!getElementById){
return false;
}
因为花括号部分之余一条语句,所以也可以简写成一行:
if(!getElementById) return false;
如果需要测试多个方法或者属性是否存在,可以用“逻辑或”操作符将其合并:
if(!getElementById||!getElementsByTagName) return false;
例如,可以在之前的
JavaScript代码里检测是否理解了getElementsByTagName()方法:
window.οnlοad=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].οnclick=function(){
popUp(this.getAttribute("href"));
return false;
}
}
}
}
这一句简单的If语句,但它可以确保那些“古老的”浏览器不会因为我们的脚本代码而出现问题。
在给网页添加各有关行为时要始终遵循“循序渐进”原则。
PS:浏览器嗅探(browser sniffung)技术,也是解决向后兼容性问题的办法。但由于其复杂性,正被更简单也更健壮的对象检测技术所取代。