面向对象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 ...
随机推荐
- 用sql语句清除日志
DUMP TRANSACTION [数据库] WITH NO_LOGBACKUP LOG [数据库] WITH NO_LOGDBCC SHRINKDATABASE([数据库])
- UVA 12299 RMQ with Shifts（线段树：单点更新）
题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...
- 『TCP/IP详解——卷一：协议』读书笔记——17
2013-08-27 15:37:42 6.5 ICMP端口不可达差错 端口不可达报文是ICMP差错报文的一种,它是ICMP不可达报文中的一种,以此来看一看ICMP差错报文中所附加的信息.使用UDP来 ...
- erlang日志功能。
用cowboy这个库,没有日志功能,所以研究了otp提供的日志功能. 1.启动SASL的方式 erl –boot start_sasl 默认配置文件下启动SASL, {env, [{sasl_erro ...
- 在wifi状态下没有数据线，链接手机调试
因为不知道是手机的问题还是数据线的问题,经常链接不上adb 所以找了一下wifi情况下,无线跟eclipse链接调试 第一步,首先你需要在你的手机上安装一个终端模拟器工具 第二步,在终端里输入(需要r ...
- 使用Axure来仿真Vogue网站
用户体验包括三部分:用户研究.视觉设计和交互设计.按顺序进行,在用户研究和视觉设计之后,开始交互设计,Axure是最好的交互设计的软件. Vogue是著名的奢侈品品牌,网站设计“高大上”,用Axure ...
- javascript position兼容性随笔
一.Javascript源码 if (!window.jasen.core.Position) { window.jasen.core.Position = {}; } function Size(w ...
- Java多线程17：中断机制
概述 之前讲解Thread类中方法的时候,interrupt().interrupted().isInterrupted()三个方法没有讲得很清楚,只是提了一下.现在把这三个方法同一放到这里来讲,因为 ...
- java算法（一）
最近在看各种经典算法,自己写起来: 一.判断素数问题: 知识点:素数即为质数,一个数n若不是质数则一定在2-n/2之间内有因数. package JingDian; public class sush ...
- DBCC DROPCLEANBUFFERS失效了？
原文出处:http://www.sqlskills.com/blogs/paul/when-dbcc-dropcleanbuffers-doesnt-work/ DBCC DROPCLEANBUFFE ...