最佳实践
平稳退化:当访问者的浏览器不支持javaScript时仍然可以顺利地浏览你的网站,虽然某些功能无法使用,但最基本的操作可以顺利完成。
应该只在绝对必要的情况下使用弹出窗口,这涉及到网页的可访问性问题。因此,若网页上某个链接将弹出新窗口,应在链接本身的文字中予以说明。
创建新的窗口:
window.open(url,name,features);
三个参数是可选的:
url:指想在新窗口里打开的的网页的url地址。若省略这个参数,则是一个空白的浏览器窗口。
name:新窗口的名字,可以在代码里通过这个名字与新窗口通信。
features:是一个以逗号分隔的字符串,其内容是新窗口的各种属性。包括:尺寸、新窗口被启用或禁用的各种浏览功能(工具条、菜单条、初始显示位置等)。原则是新窗口的浏览功能要简而精。
function popUp(winURL){
window.open(winURL,"popUp","width=320,heigh=480");
}
<a href="javascript:popUp('http://www.example.com')";>example</a>
<a href="#" οnclick="popUp('http://www.example.com');return false;">example</>
<a href="http://www.example.com" οnclick="popUp('http://www.example.com');return false;">example</>
<pre name="code" class="html"><a href="http://www.example.com" οnclick="popUp(this.getAttribute('href'));return false;">example</>
<pre name="code" class="html"><pre name="code" class="html"><a href="http://www.example.com" οnclick="popUp(this.href);return false;">example</>
<pre name="code" class="html">将href属性设置为真实存在的URL地址,让它成为一个有效的链接,就可以为javaScript代码预留退路。还可以使用使用this来精简代码,它可以用来代表任何一种当前元素。
CSS最大的优点是,将Web文档的内容结构(标记)和版面设计(样式)分离。真正能从CSS技术获益的方法,是把样式全部转移到外部文件去。
渐进增强:用一些额外的信息层去包裹原始数据,按照渐进增强设计出的网页几乎都符合平稳退化原则。
应该把CSS代码从HTML文档里分离出来,放在一些外部文件里。再使用<link>标签调用这个文件。
class属性是样式与文档内容间的联结纽带。
再HTML文档里使用如onclick之类的属性既没有效率,也容易引发问题。应该讲JavaScriot代码调用行为与HTML文档的结构和内容分离开,使网页更健壮。
某些代码在存入外部JavaScript文件后将无法正常运行,例如:
var links=document.getElementByTagName("a");
这条语句会在JavaScript文件被加载时立即执行。因为脚本加载时文档可能不完全,所以模型也不完全,没有完整的DOM,getElementByTagName等方法就无法正常工作。所以必须让这些代码在HTML文档全部加载到浏览器后马上开始执行。
当HTML文档全部加载完毕时触发一个事件。window对象触发onload事件时,document对象已经存在。
对象检测
最简单的方法是,检测浏览器对JavaScript的支持程度,即,需要DOM脚本表达出,你必须理解这么多的JavaScript语言才能执行这些语句。
可以将某个方法打包在一个if语句里,就可以根据这条if语句的条件表达式的求值结果是true还是false来决定应该采取怎么样的星都。
function myFunction(){
if(document.getElementById){
statements using getElementById
}
}
在使用对象检测时一定要删掉方法名后的括号,否则测试的方法的结果。使用对象检测,如果某个浏览器不支持这个方法,它就不会使用这个方法的语句。但是这个方法比较累赘。应该把思想从“如果你理解……就执行“变成”如果你不理解……就离开”。
if(!getElementById) return false;
<pre name="code" class="html">window.οnlοad=prepareLinks;
function prepareLinks(){
if(!document.getElementByTagName) return false;
var links=documents.getElementByTagName("a");
for(var i=0;i<links.length;i++){
if(links[i].getAttribute("class")=="popup"){
links[i].οnclick=function(){
popUp(this.getAttribute("href"));
return false;
}
}
}
}
这条语句可以确保“古老的”浏览器不会因为脚本代码而出现问题,可以让脚本有良好的向后兼容性。
浏览器嗅探:通过提取浏览器供应商提供的信息来解决向后兼容性。
性能
尽量少访问DOM和尽量减少标记
不管什么时候,只要是查询DOM中的某些元素,浏览器都会遍历整个DOM树。
尽量将多个脚本合并到一个脚本文件中,可以减少加载页面时发送的请求数量。将所有的<script>标签放在文档的末尾,</body>标签之前,可以让页面变得更快。因为位于<head>中的脚本加载时会让浏览器不能加载其他的文件(比如图像或其他脚本)。
压缩脚本:把脚本文件中的不必要的字节,如空格、注释全部删除。