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]); }
以上。
Javascript:重用之道的更多相关文章
- JavaScript之周道长浅谈变量使用中的坑
天空一声巨响,道长闪亮登场,飞花落叶,尘土飞扬,此处不应恐慌,用阅读变量的概念来提升气场. 1)变量的声明,使用一个变量之前应该先声明.变量是使用关键字var来声明的,如下: var number; ...
- 《JavaScript修炼之道》读书笔记
1.参考书目 入门:<JavaScript DOM编程艺术>第二版 进阶:<JavaScript高级程序设计>第二版.<JavaScript编程精粹> <Ja ...
- 大量Javascript/JQuery学习教程电子书合集
[推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- [推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
- 【推荐分享】大量JavaScript/jQuery电子书籍教程pdf合集下载
不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pdf 274.79 KB 21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...
- javascript 词法结构小结
作为一名前端程序员,自然学习了一些框架,但是学的越多越发现自己基础的不足,于是想系统的学习一下js基础,然后把它记录下来. 如其他编程语言一样,词法结构是一门语言的基础,它规定了诸如如何给变量起名字. ...
- Java爬虫_资源网站爬取实战
对 http://bestcbooks.com/ 这个网站的书籍进行爬取 (爬取资源分享在结尾) 下面是通过一个URL获得其对应网页源码的方法 传入一个 url 返回其源码 (获得源码后,对源码进 ...
- JSP、servlet、SQL三者之间的数据传递
JSP.servlet.SQL三者之间的数据传递 博客分类: web开发 JSPservletSQL数据库连接池web开发 前言: 最近一直在做WEB开发,现总结一下这一段时间的体会和感触. 切记, ...
- 一道笔试题和UML思想 ~
一句软件工程界的名言,让我想起了一个和一道笔试题有关的故事.希望更多的人了解 UML 背后的思想比他的语法更重要,是笔者写作本文的一点小愿望. 一.从一句软件工程名言说起 对很多事情的处理上,东西方都 ...
随机推荐
- i++与++i的区别,使用实例说明
/** * 类名:TEST.java<br> * <p> * 功能:i++与++i的区别,使用实例说明 * </p> * * @Author:<a href= ...
- WinXP 无线提示“区域中找不到无线网络”的一种可能原因!
貌似WinXP还是无限经典,我也一直还在用,不知道哪天才会放弃.这次遇见的问题,或许也有XP爱好者也遇得见,记下点文字备忘.----------------------- 单调的切割线 ------- ...
- CVE-2015-8660分析
0x00测试环境 使用环境 备注 操作系统 Ubuntu15.04 虚拟机 内核版本 3.19.0-15-generic 漏洞来源 /fs/overlayfs/inode.c Before 201 ...
- 定时改变App主题的方案
1.将接口返回的图片缓存到本地,由于写data到本地是耗时操作,为了不阻塞主线程,可开启子线程来做此操作 dispatch_queue_t queue = dispatch_queue_create( ...
- web_api vs2015 新加标题无法打开
HomeController 去掉特性[Authorize]
- 【nodejs学习】0.nodejs学习第一天
1.模块 大一点的程序都需要模块化,nodejs也不例外,代码放到不同的文件中,每一个文件就可以是一个模块,文件路径名就是一个模块名.每个模块中包含三个预先定义的变量: 1.require:用于在当前 ...
- Swift中子类必须包含的构造器和析构器
import Foundation /* Swift中子类必须包含的构造器 1.Swift允许在父类构造器前添加required关键字, 用于声明所有子类必须包含该required构造器 (如果没有声 ...
- hdu2937
题目大意: 给出n求sn,中括号代表向下取整. 为了方便表述,我们令a = (3k+6)!,b = (3k+7),令c = (a+1)/b也就是式子中的前半部分,d = a/b也就是式子中的后半部分. ...
- linux挂载查看、添加与取消
挂载概念: 查看挂载:df 添加挂载mount:mount 挂载的源 目的点 mount /dev/sdb1 /mnt mount挂载常用参数(Option) -t 指定文件系统类型,例如:-t ex ...
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...