注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淡淡De影痕的博客

将来的你一定会感激现在拼命的自己。

 
 
 

日志

 
 
 
 

【转载】javascript封装函数  

2014-05-15 17:10:25|  分类: JS初心向小结 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自云谦小记《javascript封装函数》
函数的封装可以理解为一个黑盒子,把东西都整合起来,只提供一个接口,使用者可以不考虑里面的结构,只需要把内容输进这个接口就可以。他实际上就是不同类的封装,并提供统一的外部联系通道,这样其他对象就可以利用接口来调用不同类的成员了。比如现在的智能手机,使用者并不需要去拆里面的各种的硬件,只需要在屏幕上执行相关的操作就可以达到相应的功能,这里的屏幕就是我们说的“接口”,相关的操作,就是输进这个接口的“内容”,整个手机就是“封装函数”。
还是不太明白,看例子:

function model(a,b){
return a+b
}
var c = model(5,3)
alert(c)

上面的代码,就是一个最简单的封装函数,函数的功能就是求和,接口就是传进“两个数字“a,b”。函数调用时,使用者不用去考虑里面的函数功能是如何实现的,只需知道这是一个求两个数的和,并返回求和结果。 model(5,3);即调用了这个函数,假如在不同的地方我要多次用函数,只要反复进行调用即可,如果函数里面很复杂有几十行的代码,封装函数就大大减少了代码的重复书写,有利于整个网页的执行效率。

回顾之前的tab切换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
list-style: none;
margin: 0;
padding: 0;
}
.box{
width: 302px;height: 400px;border: 1px solid #f00;
}
.tit li{
width: 100px;height: 50px;float: left;line-height: 50px;text-align: center;background: #eee;
}
.box div{
clear: both;height: 350px;background: #ccc;
}
.con{
display: none;
}
.tit .select{
background: #ccc;
}
.tit{
height: 50px;
}
.show{
display: block;
}
</style>
</head>
<body>
<div id="box1" class="box">
<ul id="tit" class="tit">
<li class='select'>标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<div class='con show'>
内容1
</div>
<div class='con'>
内容2
</div>
<div class='con'>
内容3
</div>
</div>
</body>
<script>
var box = document.getElementById('box1');
var tits = box.getElementsByTagName('li');
var cons = box.getElementsByTagName('div');
var a= tits.length
for (var i = 0; i < tits.length; i++) {
tits[i].onclick = function(){
/*
再次使用for循环——针对全部的li元素进行遍历
如果tits[j]和tits[i]相同,那么数组下标相同
*/
for (var j = 0; j <a; j++) {
if(tits[j]==this){
tits[j].className = 'select';
cons[j].className = 'show';
}
else{
cons[j].className = 'con';
tits[j].className = '';
}
};
}
};
</script>
</html>

要封装一个函数,我们要考虑的应该是那些“可变的东西”应该提出来作为“接口”,在上面的代码中,可变的就是“获取的标签”,以及“要改变的类名”,也就是box的id:select,show.con于是修改JS代码为:

function tabChange(box,conClassname,showClassname,liClassname){
var boxs = document.getElementById(box);
var tits = boxs.getElementsByTagName('li');
var cons = boxs.getElementsByTagName('div');
var a= tits.length
for (var i = 0; i < tits.length; i++) {
tits[i].onclick = function(){
for (var j = 0; j <a; j++) {
if(tits[j]==this){
tits[j].className = liClassname;
cons[j].className =showClassname;
}
else{
cons[j].className = conClassname;
tits[j].className = '';
}
};
}
};
};
tabChange('box1','con','show','select')

  评论这张
 
阅读(22)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018