学习《JavaScript DOM编程艺术》,有一些代码的建议写法,注意等,这里做出总结。
1.在加载网页时执行多个函数
当加载网页时,需要加载的函数较多的时候,使用以下函数。可以使代码可读性更高。
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload=func;
}else{
window.onload=function () {
oldonload();
func();
}
}
}
将要加载的函数名做addLoadEvent()函数的参数,即可在加载网页时调用函数,例如下面这样使用,函数a和函数b就会在加载网页的时候调用了:
addLoadEvent(a);
addLoadEvent(b);
2.getElementsByClassName老浏览器不支持
较新的浏览器才支持getElementsByClassName(),下面的写法可以适用于新老浏览器,用法与效果跟document.getElementsByClassName一致。如果支持getElementsByClassName就直接调用这个方法,若不支持,就遍历所有标签,查找带有相应类名的元素并返回。
function getElementsByClassName(classname) {
var node = document.getElementsByTagName("body")[0];
if (node.getElementsByClassName) {
return node.getElementsByClassName(classname);
}
var results = new Array();
var elems = node.getElementsByTagName("*");
for (var i = 0; i < elems.length; i++) {
if (elems[i].className.indexOf(classname) != -1) {
results[results.length] = elems[i];
}
}
return results;
}
3.编写自己的insertAfter()
在已有元素前插入元素,js提供了insertBefore()方法,但是却没有与之对应的在已有元素后插入元素的方法,这里编写自己的insertAfter().其中:newElement是要插入的元素,targetElement是用来定位的已有元素。
function insertAfter(newElement, targetElement) {
var parentnode = targetElement.parentNode;
if (parentnode.lastChild == targetElement) {
parentnode.appendChild(newElement);
}else {
parentnode.insertBefore(newElement, targetElement.nextSibling);
}
}
4.添加class属性
这个是需要注意,直接对元素对象的className赋值是会覆盖其原来的class属性的,所以,一般调用之下的函数。elemnt是元素对象,value是将要添加的class属性。
function addClass(element, value) {
if (!element.className) {
element.className = className2;
} else {
var newClassName = element.className;
newClassName += " ";
newClassName += value;
element.className = newClassName;
}
}
5.label标签获取焦点
大部分浏览器,在默认情况下,有此项功能:label中的文本被点击,关联表单字段就会获得焦点,但是不是所有浏览器都支持此行为。在页面加载时,调用一下函数可以解决。
function focusLabel() {
if(!document.getElementsByTagName) return false;
var label = document.getElementsByTagName('label');
for(var i=0;i<label.length;i++) {
if(!label[i].getAttribute('label'))continue;
label[i].onclick = function () {
var id = label[i].getAttribute('for');
if(!label[i].getElementById(id))return false;
var element = document.getElementById(id);
element.focus()
};
}
}
6.代码优化的常见做法
1.分离javascript
将javascript代码完全存入外部文件,动作处理等都放在js文件中,这样即使浏览器不支持js,也能正确访问网页。下面一个例子:点击链接不跳转,提示一个对话框。
js文件中:
function test() {
var a=document.getElementById("htw");
a.onclick=function () {
alert("点击链接")
return false;
}
}
window.onload=test;
html文件:
<a id="htw" href="http://www.baidu.com" >链接</a>
2.合并放置脚本
将多个脚本文件合并到一个脚本文件中,可以减少加载页面时发送的请求数量,这是性能优化是需要首要考虑的。
3.将加载js文件的语句放在文档末尾
将加载js文件的语句放在文档末尾,</body>
前,可以使页面加载更快。
4.压缩脚本
压缩脚本是指将文件中不必要的字节,如空格和注释,统统删掉,通常为了与未压缩的分开,在压缩后文件中加上min字样。例如:
原文件名:show.js 压缩文件名:show.min.js
可以使用压缩工具,在文件保存时,自动压缩文件。我使用的压缩工具是:雅虎的YUI Compressor.
5.注意点
1.js文件引用顺序
因为相当于代码是的顺序执行,js文件在调用其他js文件函数时时,要求被调用文件在html文件中引用在前面,否则函数无法生效。例如下面的test2.js无法调用test1.js中的函数。
...
<script src="test2.js" type="text/javascript"></script>
<script src="test1.js" type="text/javascript"></script>
</body>
</html>
2.一些浏览器会把换行符解释为文本节点
例如如下代码,blockquote 元素的lastChild属性就将是一个文本节点,而不是p元素节点。
<blockquote >
<p>htw</p>
</blockquote>
解决办发:
使用getElementsByTagName(*),它将返回一个元素节点数组,可以选择这个数组的最后一个元素。
3.DOM style属性不能用来检索在CSS部分(外部文件或本文件中的)里声明的样式,只能检索HTML代码中声明的style属性。因为分离,这样的检索是没有太大意义的,但可以DOM style属性设置样式。
4.使用JQuery Mobile库的网页,在挂在github上时使用电脑浏览器访问可能失效,但是在手机上正常执行。