三、尽量使用JavaScript原生函数
要找一组数字中的最大数，我们可能会写一个循环，例如：
var numbers = [3,342,23,22,124];
var max = 0;
for(var i=0;i<numbers.length;i++){
if(numbers[i] > max){
max = numbers[i];
}
}
alert(max);
var max = 0;
for(var i=0;i<numbers.length;i++){
if(numbers[i] > max){
max = numbers[i];
}
}
alert(max);
其实，不用循环可以实现同样的功能：
var numbers = [3,342,23,22,124];
numbers.sort(function(a,b){return b - a});
numbers.sort(function(a,b){return b - a});
alert(numbers[0]);
而最简洁的写法是：
Math.max(12,123,3,2,433,4); // returns 433
你甚至可以使用Math.max来检测浏览器支持哪个属性：
var scrollTop= Math.max(
doc.documentElement.scrollTop,
doc.body.scrollTop
);
如果你想给一个元素增加class样式，可能原始的写法是这样的：
function addclass(elm,newclass){
var c = elm.className;
elm.className = (c === '') ? newclass : c+' '+newclass;
var c = elm.className;
elm.className = (c === '') ? newclass : c+' '+newclass;
而更优雅的写法是：
function addclass(elm,newclass){
var classes = elm.className.split(' '); classes.push(newclass);
elm.className = classes.join(' ');
}
var classes = elm.className.split(' '); classes.push(newclass);
elm.className = classes.join(' ');
}
事件委托
事件是JavaScript非常重要的一部分。我们想给一个列表中的链接绑定点击事件，一般的做法是写一个循环，给每个链接对象绑定事件，HTML代码如下：
<h2>Great Web resources</h2>
<ul id="resources">
<li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li>
<li><a href="http://sitepoint.com">Sitepoint</a></li>
<li><a href="http://alistapart.com">A List Apart</a></li>
<li><a href="http://yuiblog.com">YUI Blog</a></li>
<li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>
<li><a href="http://oddlyspecific.com">Oddly specific</a></li>
</ul>
<ul id="resources">
<li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li>
<li><a href="http://sitepoint.com">Sitepoint</a></li>
<li><a href="http://alistapart.com">A List Apart</a></li>
<li><a href="http://yuiblog.com">YUI Blog</a></li>
<li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>
<li><a href="http://oddlyspecific.com">Oddly specific</a></li>
</ul>
脚本如下：
// Classic event handling example (
function(){
var resources = document.getElementById('resources');
var links = resources.getElementsByTagName('a');
var all = links.length;
for(var i=0;i<all;i++){
// Attach a listener to each
link links[i].addEventListener('click',handler,false);
};
function handler(e){
var x = e.target;
// Get the link that was clicked alert(x);
e.preventDefault();
};
})();
function(){
var resources = document.getElementById('resources');
var links = resources.getElementsByTagName('a');
var all = links.length;
for(var i=0;i<all;i++){
// Attach a listener to each
link links[i].addEventListener('click',handler,false);
};
function handler(e){
var x = e.target;
// Get the link that was clicked alert(x);
e.preventDefault();
};
})();
更合理的写法是只给列表的父对象绑定事件，代码如下：
(function(){
var resources = document.getElementById('resources');
resources.addEventListener('click',handler,false);
function handler(e){
var x = e.target; // get the link tha if(x.nodeName.toLowerCase() === 'a'){
alert('Event delegation:' + x);
e.preventDefault();
}
};
})();
var resources = document.getElementById('resources');
resources.addEventListener('click',handler,false);
function handler(e){
var x = e.target; // get the link tha if(x.nodeName.toLowerCase() === 'a'){
alert('Event delegation:' + x);
e.preventDefault();
}
};
})();
