面向对象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 ...
随机推荐
- Android Activity生命周期
从android api文档摘抄出来的activity生命周期图如下: Activity有如下四种状态 a.活动状态 activity处于屏幕前台,获取到了焦点可以和用户进行交互,同一时刻只有一个a ...
- android ProgressBar 进度条的进度两端是圆角的方法
转自 http://www.jianshu.com/p/6e7ea842d5ce 另外工作原理可以参考http://blog.csdn.net/lan603168/article/details/44 ...
- 8.2 辅助 xUtils 3.0
主要有四大模块: DbUtils模块: android中的orm(对象关系映射)框架,一行代码就可以进行增删改查: 支持事务,默认关闭: 可通过注解自定义表名,列名,外键,唯一性约束,NOT NULL ...
- mysql 存储过程 死循环，如何关闭
如果误操作 ,存储过程中出现了死循环怎么办?删除存储过程是不能解决问题的. 解决方法, 1,打开mysql客户端,在查询窗口中执行: show processlist; 2,查询到自己的那个进程 ...
- 织梦cms、帝国cms、PHPcms优缺点解析
php才是建站的主流,cms这类程序又是用的最多的,占据主流的cms主要就是织梦,帝国,phpcms这三种的,这三个程序都是开源程序.国内用户众多. 一.从美观性来说(以官方默认模版为准 ph ...
- switch 的一些事
switch后面的括号的表达式,其值得 “类型" 应为整数类型(包括字符类型). case后面跟一个常量或者常量表达式,
- .Net下的 ORM框架介紹
在.NET平台下,关于数据持久层框架非常多,本文主要对如下几种做简要的介绍并推荐一些学习的资源: 1．NHibernate 2．NBear 3．Castle ActiveRecord 4．iBATIS ...
- Linux内核--网络栈实现分析（十一）--驱动程序层（下）
本文分析基于Linux Kernel 1.2.13 原创作品,转载请标明http://blog.csdn.net/yming0221/article/details/7555870 更多请查看专栏,地 ...
- JavaScript知识总结<一>
JavaScript核心基础语法: 1.什么是JavaScript? 我们知道在Web标准中网页由:结构.形式.行为三部分组成:结构由标准形式XHTML.形式又标准形式CSS,那么行为的表现就由Jav ...
- 跟visual studio 集成的git插件
目前有三个,git extension,微软的 visual studio tools for git extension,还有git source control provider 经测试,最好用的 ...