面向对象tab栏例子分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
margin:0;
padding:0;
}
li{
list-style:none;
width:218px;
height:200px;
box-shadow:0 0 0 1px #ccc;
display:none;
}
a{
display:inline-block;
padding:10px 20px;
border:1px solid #ccc;
text-decoration:none;
margin-left:-1px;
}
.action{
display:block;
}
</style>
</head>
<body>
<!--
1.程序具有良好的结构。本文档所关注的核心。
2.容易理解，代码公用性强
-->
<div id="box">
<div class="class1">
<a href="javascript:;">游戏
<a href="javascript:;">平台
<a href="javascript:;">服务</a>
</div>
<div class="class2">
<ul>
<li class="action">游戏平台</li>
<li>平台平台</li>
<li>服务平台</li>
</ul>
</div>
</div> <div id="box2">
<div class="class1">
<a href="javascript:;">游戏
<a href="javascript:;">平台
<a href="javascript:;">服务</a>
</div>
<div class="class2">
<ul>
<li class="action">游戏平台</li>
<li>平台平台</li>
<li>服务平台</li>
</ul>
</div>
</div> <script defer="defer">
// 初始化
function Util(){
}
// 获取元素
Util.prototype.getDom = function(dom){
return document.querySelectorAll(dom);
};
// 点击事件
Util.prototype.click = function(dom,callback){
var doms = this.getDom(dom);
if(!doms.length){
doms.addEventListener('click',callback(this,0));
}
for(var i=0;i<doms.length;i++){
(function(index){
doms[i].addEventListener('click',function(){
callback(this,index);
})
}(i))
}
};
// 显示
Util.prototype.show = function(dom){
this.isDisplay(true,dom);
};
// 隐藏
Util.prototype.hide = function(dom){
this.isDisplay(false,dom);
};
// 显示隐藏
Util.prototype.isDisplay = function(is,dom){
if(is){
if(!dom.length){
dom.style.display = 'block';
return false;
}
for(var i=0;i<dom.length;i++){
dom[i].style.display = 'block';
}
}else{
if(!dom.length){
dom.style.display = 'none';
return false;
}
for(var i=0;i<dom.length;i++){
dom[i].style.display = 'none';
}
}
};
// 当前显示其他隐藏
Util.prototype.action = function(doms,index){
this.hide(this.getDom(doms));
this.show(this.getDom(doms)[index]);
};
// tab栏组件
Util.prototype.tab = function(doms1,doms2){
var _this = this;
this.click(doms1,function(item,index){
_this.action(doms2,index);
})
}; var util = new Util();
// util.click('#box>.class1>a',function(item,index){
// util.action('#box>.class2 li',index);
// // util.hide(util.getDom('#box>.class2 li'));
// // util.show(util.getDom('#box>.class2 li')[index]);
// }) // 点击a标签让对应的li显示
util.tab('#box>.class1>a','#box>.class2 li');
util.tab('#box2>.class1>a','#box2>.class2 li');
</script> </body>
</html>
这段代码并不能说是完全用面向对象思想写的，怎么说呢，我们来看看，它一共分成了以下几个部分：创建一个构造函数，给这构造函数的原型上添加了一些方法，连tab栏也一道封装到了那个构造函数里面，这样从整体上来看的话，这整个功能更像是一个工具函数。因此并不能说它是一个完整的面向对象的例子，于是写完之后发现不对劲，这更本就不像面向对象，重新写了一个，就是底下的这个例子，棒棒的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
margin:0;
padding:0;
}
li{
list-style:none;
width:218px;
height:200px;
box-shadow:0 0 0 1px #ccc;
display:none;
}
a{
display:inline-block;
padding:10px 20px;
border:1px solid #ccc;
text-decoration:none;
margin-left:-1px;
}
.action{
display:block;
}
</style>
</head>
<body>
<!--
1.程序具有良好的结构。本文档所关注的核心。
2.容易理解，代码公用性强
-->
<div id="box">
<div class="class1">
<a href="javascript:;">游戏
<a href="javascript:;">平台
<a href="javascript:;">服务</a>
</div>
<div class="class2">
<ul>
<li class="action">游戏平台</li>
<li>平台平台</li>
<li>服务平台</li>
</ul>
</div>
</div> <div id="box2">
<div class="class1">
<a href="javascript:;">游戏
<a href="javascript:;">平台
<a href="javascript:;">服务</a>
</div>
<div class="class2">
<ul>
<li class="action">游戏平台</li>
<li>平台平台</li>
<li>服务平台</li>
</ul>
</div>
</div> <script defer="defer">
// 初始化
function Util(){
}
// 获取元素
Util.prototype.getDom = function(dom){
return document.querySelectorAll(dom);
};
// 添加事件
Util.prototype.toggleOn = function(dom,way,callback){
var doms = this.getDom(dom);
if(!doms.length){
doms.addEventListener(way,callback(this,0));
}
for(var i=0;i<doms.length;i++){
(function(index){
doms[i].addEventListener(way,function(){
callback(this,index);
})
}(i))
}
};
// 显示元素
Util.prototype.show = function(dom){
this.isDisplay(true,dom);
};
// 隐藏元素
Util.prototype.hide = function(dom){
this.isDisplay(false,dom);
};
// 显示隐藏元素
Util.prototype.isDisplay = function(is,dom){
if(is){
if(!dom.length){
dom.style.display = 'block';
return false;
}
for(var i=0;i<dom.length;i++){
dom[i].style.display = 'block';
}
}else{
if(!dom.length){
dom.style.display = 'none';
return false;
}
for(var i=0;i<dom.length;i++){
dom[i].style.display = 'none';
}
}
};
// 让当前那个元素显示
Util.prototype.action = function(doms,index){
this.hide(this.getDom(doms));
this.show(this.getDom(doms)[index]);
}; // tab组件
function Tab(doms1,doms2){
var util = new Util();
this.doms1 = doms1;
this.doms2 = doms2;
};
// tab切换
Tab.prototype.toggleTab = function(way,callback){
var util = new Util();
var _this = this;
util.toggleOn(this.doms1,way,function(item,index){
if(callback){callback(util.getDom(_this.doms1),item,index)};
util.action(_this.doms2,index);
})
}; // 实例1
var tab = new Tab('#box>.class1>a','#box>.class2 li');
tab.toggleTab('mouseout'); // 实例2
var tab2 = new Tab('#box2>.class1>a','#box2>.class2 li');
tab2.toggleTab('mouseover',function(items,item,index){
for(var i=0;i<items.length;i++){
items[i].style.color = '';
}
item.style.color = 'red';
}); </script> </body>
</html>
这段代码和之前那段不同之处在于我把tab重新创建了一个构造函数，因为tab本来就是独立的，这段代码还有一个还有一个好处就是我使用了高阶函数，使用起来特别爽。
就是这一段：
for(var i=0;i<doms.length;i++){
(function(index){
doms[i].addEventListener(way,function(){
callback(this,index);
})
}(i))
}
使用如下：
var tab2 = new Tab('#box2>.class1>a','#box2>.class2 li');
tab2.toggleTab('mouseover',function(items,item,index){
for(var i=0;i<items.length;i++){
items[i].style.color = '';
}
item.style.color = 'red';
});
高阶函数，大家可以搜索一下，这里不做介绍。
这里主要想说是面向对象就是把一个大的代码块拆分成很多个小的代码块，如果是一个功能就是一个代码块，另外一个功能就是另外一个代码块，然后可以把一些公用的方法弄成一个函数库。
面向对象tab栏例子分析的更多相关文章
- 前端—我的第一篇博客 梦开始的地方（面向对象版tab栏）
这是我的第一篇博客 博客生涯才开始 但是人生已经过去了二十个年头了 才开始弄这个 也没搞得太懂 我原本的想法是想搞个源代码上来 但是看了半天好像就只能传html源代码 那我还有css js的部分呢 我 ...
- 面向对象版Tab栏切换
<div class="wrapper" id="wrapper"> <ul class="tab" id="t ...
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
- JS高级——面向对象方式解决tab栏切换问题
注意事项 1.给li元素注册事件,函数里面的this指的li元素,那么我们可以在注册事件之前将Tab对象用that=this进行保存 2.使用沙箱模式,所以暴露给外面的变量使用的是window.tab ...
- JavaScript实现Tab栏切换
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...
- tab栏切换的特殊效果
在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...
- ViewPage显示Fragment集合实现左右滑动并且出现tab栏--第三方开源--SlidingTabLayout和SlidingTabStrip实现
注意:有关Fragment的方法和ViewPager的全部是android.support.v4包的,否则会报很多的错误 MainActivity: package com.zzw.fragmentt ...
- Android 常用UI控件之TabHost(5)Tab栏在底部且在最上层也不盖tab页
tab栏在底部 <TabHost android:id="@android:id/tabhost" android:layout_width="match_pare ...
随机推荐
- hdu 1394 Minimum Inversion Number（树状数组）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1394 题意:给你一个0 — n-1的排列,对于这个排列你可以将第一个元素放到最后一个,问你可能得到的最 ...
- middleware中间件的概念
简要来说express就是一个由路由和中间件构成的 web 开发框架. 当express服务收到客户端的请求时,会通过一组函数来处理请求. 这些函数用于解析请求体数据,处理错误,或者负责返回各种情况对 ...
- rabbitmq集群安装
在配置文件中配置集群没有成功,但是使用命令行成功了,以下是过程请参考. 场景:两台机器,一台是10.1.3.95 hostname为mq1,一台是10.1.3.96 hostname为 ...
- Mysql运行SQL文件 错误Incorrect table definition;there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON UPDATE clause
问题描述 想从服务器上DOWN下数据库.操作:先把数据库转存为SQL文件,然后在本地利用navicate运行SQL文件,出现错误信息: Incorrect table definition;there ...
- 条件随机场matlab程序下载
19:44:23 1 http://www.cs.ubc.ca/~murphyk/Software/CRF/crf.html matlab程序包: 该条件随机场程序(CRF)是针对语句进行标注,mat ...
- UIAlertController 使用
iOS 8的新特性之一就是让接口更有适应性.更灵活,因此许多视图控制器的实现方式发生了巨大的变化.全新的UIPresentationController在实现视图控制器间的过渡动画效果和自适应设备尺寸 ...
- Swift不同storyboard之间的交互
如何实现多个Storyboard之间的切换 正如大家所知道的,Main-board是·程序运行的入口,如果找不到就会抛出异常,打开plist文件可以看到关于Main-board的描述,特别的制定了其b ...
- Salesforce + AngularJS + Bootstrap
也可以分成三步: 1. 添加css和js引用: <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3. ...
- 微信公共平台开发-（.net实现）1--成为开发者
刚换了个新环境,哎这都快一个月了,还没适应过来,还是怀念老地方呀.老板让开发一个基于微信平台的开发项目,而且是用net实现.当时就蒙了,微信就用了一会个人赶脚不好,所以果断不用,现在让开发,而且查了一 ...
- Yii2中的环境配置
默认的Debug配置 在入口文件中 defined ( 'YII_DEBUG' ) or define ( 'YII_DEBUG', true ); defined ( 'YII_ENV' ) or ...