Javascript:重用之道

近期写了大量的js,愈发觉得自己的代码过于冗余，所以，利用周末的时间研习代码重用之道，有了这篇博文所得：

重用代码：

1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素
2、把核心主程序实现，用函数包起来
3、把每组里不同的值找出来，通过传参实现

 

示例：一个简单的计算器

通过效果图，我们可以看出，核心代码所实现的功能被多次重复使用，并且，html结构代码类似，此时，若是单独实现每个计算器的功能，则事倍功半，代码冗余；所以，这时我们可以考虑使用代码重用。

 

1# 尽量保证 HTML 代码结构一致，可以通过父级选取子元素

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<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#把核心主程序实现，用函数包起来

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

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包含在数组里面，然后通过遍历，传参，从而实现核心计算器主程序的调用：

?

1 2 3 4 5 6 7 8

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

 

　

以上。