這個函數btnHandle()該怎么理解？
<!DOCTYPE>
<html>
??<head>
????<meta?charset="utf-8">
????<title>IFE?JavaScript?Task?01</title>
??</head>
<body>
??<ul?id="source">
????<li>北京空氣質量：<b>90</b></li>
????<li>上海空氣質量：<b>70</b></li>
????<li>天津空氣質量：<b>80</b></li>
????<li>廣州空氣質量：<b>50</b></li>
????<li>深圳空氣質量：<b>40</b></li>
????<li>福州空氣質量：<b>32</b></li>
????<li>成都空氣質量：<b>90</b></li>
??</ul>
??<ul?id="resort">
????<!--?
????<li>第一名：北京空氣質量：<b>90</b></li>
????<li>第二名：北京空氣質量：<b>90</b></li>
?????-->
??</ul>
??<button?id="sort-btn">排序</button>
<script?type="text/javascript">
//通過元素匹配數組并提取其中需要的信息組成新的數組
function?getData(){
??var?data=[];
??var?source=document.getElementById("source");
??var?oli=source.getElementsByTagName("li");
??for?(var?i?=?0;?i?<oli.length;?i++)?{
?? data.push(oli[i].innerHTML.replace(/(.*)空氣質量：<b>([0-9]*)<\/b>/,'$1?$2').split('?'));
??}
??return?data;
}
//將新數組data按照從大到小排序
function?sortAqiData(data)?{
return?data.sort(function(a,b){
return?b[1]-a[1]
})
}
//將排序后的數組利用遍歷寫到指定位置
function?render(data)?{
var?resort?=?document.getElementById('resort');
?? data.forEach(function(item,?index,array)?{
???? resort.innerHTML?+=?'<li>第'?+?(index?+?1)?+?'名：'?+?item[0]?+?'空氣質量：'?+?'<b>'?+?item[1]?+?'</b></li>';
?? });
}
//定義onclick的屬性值
function?btnHandle()?{
??var?aqiData?=?getData();
??aqiData?=?sortAqiData(aqiData);
??render(aqiData);
}
//給按鈕添加onclick屬性和?值
function?init()?{
var?btn=document.getElementById("sort-btn");
btn.setAttribute("onclick","btnHandle()");
}
init();
</script>
</body>
</html><--這個函數btnHandle()該怎么理解？-->
2016-04-09
getDate()的作用是，將sourse里的數據，依次存在date[]的數組里面，這個函數涉及到了正則表達式，那部分可以先忽略；sortAqiDate()的作用是，將date數組里面的數據，按數字值從大到小排序，返回的是排好序的date數組；render()的作用就是在resort里將date數組里的數據按順序innerHTML。。。。最后btnHandle()的作用就是把這上述三個函數依次調用了。。。