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

 

以上。

Javascript:重用之道的更多相关文章

  1. JavaScript之周道长浅谈变量使用中的坑

    天空一声巨响,道长闪亮登场,飞花落叶,尘土飞扬,此处不应恐慌,用阅读变量的概念来提升气场. 1)变量的声明,使用一个变量之前应该先声明.变量是使用关键字var来声明的,如下: var number; ...

  2. 《JavaScript修炼之道》读书笔记

    1.参考书目 入门:<JavaScript DOM编程艺术>第二版 进阶:<JavaScript高级程序设计>第二版.<JavaScript编程精粹> <Ja ...

  3. 大量Javascript/JQuery学习教程电子书合集

    [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  4. [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  5. 【推荐分享】大量JavaScript/jQuery电子书籍教程pdf合集下载

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  6. javascript 词法结构小结

    作为一名前端程序员,自然学习了一些框架,但是学的越多越发现自己基础的不足,于是想系统的学习一下js基础,然后把它记录下来. 如其他编程语言一样,词法结构是一门语言的基础,它规定了诸如如何给变量起名字. ...

  7. Java爬虫_资源网站爬取实战

    对 http://bestcbooks.com/  这个网站的书籍进行爬取 (爬取资源分享在结尾) 下面是通过一个URL获得其对应网页源码的方法 传入一个 url  返回其源码 (获得源码后,对源码进 ...

  8. JSP、servlet、SQL三者之间的数据传递

    JSP.servlet.SQL三者之间的数据传递 博客分类: web开发 JSPservletSQL数据库连接池web开发  前言: 最近一直在做WEB开发,现总结一下这一段时间的体会和感触. 切记, ...

  9. 一道笔试题和UML思想 ~

    一句软件工程界的名言,让我想起了一个和一道笔试题有关的故事.希望更多的人了解 UML 背后的思想比他的语法更重要,是笔者写作本文的一点小愿望. 一.从一句软件工程名言说起 对很多事情的处理上,东西方都 ...

随机推荐

  1. i++与++i的区别,使用实例说明

    /** * 类名:TEST.java<br> * <p> * 功能:i++与++i的区别,使用实例说明 * </p> * * @Author:<a href= ...

  2. WinXP 无线提示“区域中找不到无线网络”的一种可能原因!

    貌似WinXP还是无限经典,我也一直还在用,不知道哪天才会放弃.这次遇见的问题,或许也有XP爱好者也遇得见,记下点文字备忘.----------------------- 单调的切割线 ------- ...

  3. CVE-2015-8660分析

    0x00测试环境   使用环境 备注 操作系统 Ubuntu15.04 虚拟机 内核版本 3.19.0-15-generic 漏洞来源 /fs/overlayfs/inode.c Before 201 ...

  4. 定时改变App主题的方案

    1.将接口返回的图片缓存到本地,由于写data到本地是耗时操作,为了不阻塞主线程,可开启子线程来做此操作 dispatch_queue_t queue = dispatch_queue_create( ...

  5. web_api vs2015 新加标题无法打开

    HomeController 去掉特性[Authorize]

  6. 【nodejs学习】0.nodejs学习第一天

    1.模块 大一点的程序都需要模块化,nodejs也不例外,代码放到不同的文件中,每一个文件就可以是一个模块,文件路径名就是一个模块名.每个模块中包含三个预先定义的变量: 1.require:用于在当前 ...

  7. Swift中子类必须包含的构造器和析构器

    import Foundation /* Swift中子类必须包含的构造器 1.Swift允许在父类构造器前添加required关键字, 用于声明所有子类必须包含该required构造器 (如果没有声 ...

  8. hdu2937

    题目大意: 给出n求sn,中括号代表向下取整. 为了方便表述,我们令a = (3k+6)!,b = (3k+7),令c = (a+1)/b也就是式子中的前半部分,d = a/b也就是式子中的后半部分. ...

  9. linux挂载查看、添加与取消

    挂载概念: 查看挂载:df 添加挂载mount:mount 挂载的源 目的点 mount /dev/sdb1 /mnt mount挂载常用参数(Option) -t 指定文件系统类型,例如:-t ex ...

  10. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...