面向对象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 ...
随机推荐
- 【NHibernate】列“ReservedWord”不属于表 ReservedWords
NHibernate+FluentNHibernate+MySql 运行时黄页显示下边的异常,项目中找了半天没出现过这个列的关键字. [ArgumentException: 列“ReservedWor ...
- jQuery中$.fn的用法
原文:http://www.jb51.net/article/42816.htm $.fn是指jquery的命名空间,$.fn=$.prototype. 1.$.extend 为jquery添加静态方 ...
- ssh端口转发
http://blog.sina.com.cn/s/blog_47094def0101fvge.html
- Jquery 表单验证
<html> <head> <meta http-equiv="content-type" content="tex ...
- WINDOWS窗口风格 WS_OVERLAPPEDWINDOW
转自:http://blog.csdn.net/hquxiezk/archive/2008/07/29/2733269.aspx #define WS_OVERLAPPEDWINDOW (WS_OVE ...
- 一张图片说明MII
- IOS 跳转至AppStore的两种方式
//第一种方法 直接跳转 id+编号 [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"itms-apps: ...
- unity 实现简单的分离
在网上随便搜一搜资料就可以找到很多关于Mvc ,MVVM,StrangeIoc等有关显示与数据分离的博客,很多大神也是讲的蛮有道理的,但是这些框架理解起来有一定的难度, 这时候肯定有人说有现成的框架为 ...
- Docker Machine v1.11.2安装与使用
官方文档:Docker Machine 官方文档:Docker Toolbox boot2docker安装包官网下载链接:Docker Toolbox-1.11.1b.exe 此安装包包含的“boot ...
- 【Win10】UAP/UWP/通用 开发之 x:DeferLoadStrategy
[Some information relates to pre-released product which may be substantially modified before it's co ...