本篇文章要实现以下几个功能点:
1.平稳退化:在没有JS的情况下也能正常工作
2.分离JS和HTML
3.向后兼容性:新老版本的浏览器都适用
4.性能优化
1. 平稳退化功能
要保证JS代码适用于各个版本、各种类型的浏览器,甚至在禁用JS代码的时候,依然能正常运行。
2.”javascript:”伪协议
这是一种非标准化的协议,能让我们通过一个链接来调用JS函数。
“真”协议用来在因特网上的计算机之间传输数据包,如HTTP协议、FTP协议等。
<a href="javascript:popUp('http://www.baidu.com/');">Examples</a>
但是这种做法强烈不推荐!!!
3.在某些浏览器里,“#”链接指向当前文档的开头。
4.搜索引擎中的爬虫程序无法理解JS代码,所以如果网页不能平稳退化,那你的网站排名会受很大影响。
遵循“平稳退化”的思想,上面的代码可以改为下面的样式:
<a href="http://www.baidu.com/" onclick="popUp(this.href);return false;">Examples</a>
上面这种实现方法,在禁用JS时,链接也是可以打开的,只是这个链接在功能上打了点折扣。
5.分离JS
写JS文件时的一条原则:如果想用JavaScript给某个网页添加一些行为,就不应该让JS代码对这个网页的结构有任何依赖。
- 对象检测
- 绑定事件到某个元素节点
element.event=action
<a href="images/book_img1.jpg" title="Fireworks" onclick="showpic(this);return false;">Fireworks</a>
//下面这种实现方法和上述方法,实现的效果相同
//去除超链接中的onclick方法
<a href="images/book_img1.jpg" title="Fireworks">Fireworks</a>
//用getElementById()等方法把事件绑定到某个特定元素上
var links = document.getElementsByTagName('a');
for( var i=0; i<links.length; i++) {
if(links[i].getAttribute('class') == 'popup') {
links[i].onclick = function() {
showpic(this);
return false; //阻止超链接的默认行为
}
}
}
6.对象检测
不推荐使用浏览器嗅探方法,推荐使用对象检测法。
//检测当前浏览器是否提供某个方法,不提供,则直接退出该函数
if(!getElementById) {
return false;
}
7.共享onload事件
//仅加载一个函数
window.onload = firstFunction;
//加载多个函数
window.onload = function() {
fistFunction();
secFunction();
}
//当代码越来越复杂时,该方法简单有效
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != "function") {
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
}
addLoadEvent(fistFunction);
addLoadEvent(secFunction);
addLoadEvent(thirdFunction);
8.其他注意事项
对showpic()方法中,涉及的对象进行检测
//图片的id属性是否存在
if (!document.getElementById('placeholder')) {
return false;
}
即便文字节点不存在,也不影响图片的显示:添加一个对象检测就好啦!
//获取description元素节点
if (document.getElementById('description')) {
var description = document.getElementById('description');
//设置description元素节点内包含的文本节点为超链接的title
var text = whichpic.getAttribute('title');
description.childNodes[0].nodeValue = text;
}
当超链接title属性不存在时,该怎么办呢?
if (document.getElementById('description')) {
var description = document.getElementById('description');
//检测title属性是否存在,不存在则设为空字符串
if (whichpic.getAttribute('title')) {
var text = whichpic.getAttribute('title');
} else {
var text = '';
}
description.childNodes[0].nodeValue = text;
}
9.CSS-DOM
可以通过js对DOM进行操作,比如a:hover等伪类方法,可以用onmouseover()方法代替。
因为绝大多数的现代浏览器,虽然对CSS伪类的支持很不完整,但对DOM却都有良好的支持。
不论何时,如果你可以发现对某个函数进行抽象,都应该马上去做。
10.性能优化方法
1.尽量减少访问DOM
2.尽量减少文档中的标记数量
3.有多个.js文件时,合并到一个脚本文件中
4.对.js文件的加载放在文档末尾,</body>
前面。
因为位于<head>
块中的脚本会导致浏览器无法并行加载其他文件(如图像或其他脚本)。一般来说,根据HTTP规范,浏览器每次从同一个域名中最多只能同时下载两个文件。而在下载脚本期间,浏览器不会下载其他任何文件,即使是来自不同域名的文件也不会下载,所有其他资源都要等脚本加载完毕后才加载。5.利用工具,压缩脚本。如JSMin, YUI Compressor, Closure Compiler, Webpack等。