Javascript:重用之道

近期写了大量的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]);

}

　

 

示例演示地址：http://codepen.io/anon/pen/gpLpeJ

 

　

以上。