早该知道的7个JavaScript技巧(2)_H5之家 - 中国HTML5教程资源分享第一站

  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 numbers = [3,342,23,22,124];
  numbers.sort(function(a,b){return b - a});
  alert(numbers[0]);

需要注意的是，你不能对一个数字字符数组进行 sort() ，因为这种情况下它只会按照字母顺序进行排序。如果你想知道更多的用法，可以阅读这篇不错的关于 sort() 的文章。

再有一个有意思的函数就是 Math.max()。这个函数返回参数里的数字里最大的一个数字：

复制代码代码如下:

Math.max(12,123,3,2,433,4); // returns 433

因为这个函数能够校验数字，并返回其中最大的一个，所以你可以用它来测试浏览器对某个特性的支持情况：

复制代码代码如下:

  var scrollTop=Math.max(
   doc.documentElement.scrollTop,
   doc.body.scrollTop
  );

这个是用来解决IE问题的。你可以获得当前页面的 scrollTop 值，但是根据页面上 DOCTYPE的不同，上面这两个属性中只有一个会存放这个值，而另外一个属性会是 undefined，所以你可以通过使用 Math.max() 得到这个数。阅读这篇文章你会得到更多的关于使用数学函数来简化JavaScript的知识。

另外有一对非常有用的操作字符串的函数是 split() 和 join()。我想最有代表性的例子应该是，写一个功能，用来给页面元素附加CSS样式。

是这样的，当你给页面元素附加一个CSS class时，要么它是这个元素的第一个CSS class，或者是它已经有了一些class, 需要在已有的class后加上一个空格，然后追加上这个class。而当你要去掉这个class时，你也需要去掉这个class前面的空格(这个在过去非常重要，因为有些老的浏览器不认识后面跟着空格的class)。

于是，原始的写法会是这样：

复制代码代码如下:

  function addclass(elm,newclass){
   var c = elm.className;
   elm.className = (c === '') ? newclass : c+' '+newclass;
  }你可以使用 split() 和 join() 函数自动完成这个任务：

  function addclass(elm,newclass){
   var classes = elm.className.split(' ');
   classes.push(newclass);
   elm.className = classes.join(' ');
  }

这会确保所有的class都被空格分隔，而且你要追加的class正好放在最后。

事件委派

Web应用都是由事件驱动运转的。我喜欢事件处理，尤其喜欢自己定义事件。它能使你的产品可扩展，而不用改动核心代码。有一个很大的问题（也可以说是功能强大的表现），是关于页面上事件的移除问题。你可以对某个元素安装一个事件监听器，事件监听器就开始运转工作。但页面上没有任何指示说明这有个监听器。因为这种不可表现的问题 (这尤其让一些新手头疼) ，以及像IE6这样的”浏览器“在太多的使用事件监听时会出现各种的内存问题，你不得不承认尽量少使用事件编程是个明智的做法。

于是事件委托就出现了。

当页面上某个元素上的事件触发时，而在 DOM 继承关系上，这个元素的所有子元素也能接收到这个事件，这时你可以使用一个在父元素上的事件处理器来处理，而不是使用一堆的各个子元素上的事件监听器来处理。究竟是什么意思？这样说吧，页面上有很多超链接，你不想直接使用这些链接，想通过一个函数来调用这个链接，HTML代码是这样的：

复制代码代码如下:

  <h2>Great Web resources</h2>
  <ul>
  <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>

常见的做法是通过循环这些链接，将每个链接上附加一个事件处理器：

复制代码代码如下:

  // 典型的事件处理例子
  (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();
   };
  })();

我们用一个事件处理器也能完成这项任务：

复制代码代码如下: