近期写了大量的js,愈发觉得自己的代码过于冗余，所以，利用周末的时间研习代码重用之道，有了这篇博文所得：
重用代码：
1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素
2、把核心主程序实现，用函数包起来
3、把每组里不同的值找出来，通过传参实现
示例：一个简单的计算器
通过效果图，我们可以看出，核心代码所实现的功能被多次重复使用，并且，html结构代码类似，此时，若是单独实现每个计算器的功能，则事倍功半，代码冗余；所以，这时我们可以考虑使用代码重用。
1# 尽量保证 HTML 代码结构一致，可以通过父级选取子元素
<ul id="container">
<li>
<button class="btn">+</button>
<button class="btn">0</button>
<button class="btn">-</button>
<strong>单价:</strong><span>12</span>
<strong>总计:</strong><span>0</span>
</li>
<li>
<button class="btn">+</button>
<button class="btn">0</button>
<button class="btn">-</button>
<strong>单价:</strong><span>22</span>
<strong>总计:</strong><span>0</span>
</li>
<li>
<button class="btn">+</button>
<button class="btn">0</button>
<button class="btn">-</button>
<strong>单价:</strong><span>32</span>
<strong>总计:</strong><span>0</span>
</li>
<li>
<button class="btn">+</button>
<button class="btn">0</button>
<button class="btn">-</button>
<strong>单价:</strong><span>42</span>
<strong>总计:</strong><span>0</span>
</li>
</ul>
2#把核心主程序实现，用函数包起来
function counter(oli){
var aBtns=oli.getElementsByTagName('button');
var aSpans=oli.getElementsByTagName('span');
/*件数*/
var oItem=aBtns[1].innerText;
/*单价*/
var oUnit=aSpans[0].innerText;
/*总数*/
var oTotal=aSpans[1].innerText;
/*+*/
aBtns[0].onclick=function(){
oItem++;
aBtns[1].innerText=oItem;
aSpans[1].innerText=oItem*oUnit;
}
/*-*/
aBtns[2].onclick=function(){
oItem--;
if(oItem<0){
oItem=0;
alert('当前件数已为空');
}
aBtns[1].innerText=oItem;
aSpans[1].innerText=oItem*oUnit;
}
}
3# 把每组里不同的值找出来，通过传参实现
这是代码重用比较关键的一步，分析发现，每个计算器都包含在结构相似的<li></li>之中，所以，可以把这些li包含在数组里面，然后通过遍历，传参，从而实现核心计算器主程序的调用：
var oUl=document.getElementById('container');
var aLi=oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
counter(aLi[i]);
}
以上。