面向过程—>面向对象

之前在未学习面向对象时,我们都是面向过程编程的。它的优点就是简单,明了,下面就来把面向过程的tabs切换改写成面向对象的方式。

html:

 <div class="tabs" id="tabs1">
         <ul class="tabs-nav">
             <li class="active"><a href="javascript:;">折扣</a></li>
             <li><a href="javascript:;">活动</a></li>
             <li><a href="javascript:;">优惠</a></li>
             <li><a href="javascript:;">其他</a></li>
         </ul>
         <div class="tabs-cnt">
             <div class="tabs-content">
                 11111111
             </div>
             <div class="tabs-content">
                 2222
             </div>
             <div class="tabs-content">
                 3333
             </div>
             <div class="tabs-content">
                 4444
             </div>
         </div>
     </div>

css:

;; list-style:none;}

.tabs{ margin:10px;}

.tabs-nav:before, .tabs-nav:after{ display:table; content:' ';}
.tabs-nav:after{ width:100%; clear:both; border-bottom:1px solid #47a3da;}
.tabs-nav li{ position:relative; float:left; margin-right:5px; border:1px solid #becbd2; border-bottom:none;}
.tabs-nav li.active:after{ position:absolute; bottom:-1px; width:100%; display:block; content:' '; border-bottom:1px solid #fff;}
.tabs-nav a{ display:block; padding:0 20px; line-height:30px; text-decoration:none; color:#000; font-size:14px;}

.tabs-cnt{ padding:10px;}
.tabs-content{ display:none;}
.tabs-content:first-child{ display:block;}

javascript:

 window.onload=function(){
     var oTabs=document.getElementById('tabs1');
     var aTabsNav=oTabs.querySelectorAll('.tabs-nav li');
     var aTabsCnt=oTabs.querySelectorAll('.tabs-content');

     for(var i=0;i<aTabsNav.length;i++){
         aTabsNav[i].index=i;
         aTabsNav[i].onclick=function(){
             for(var i=0;i<aTabsNav.length;i++){
                 aTabsNav[i].className='';
                 aTabsCnt[i].style.display='none';
             }
             this.className='active';
             aTabsCnt[this.index].style.display='block';
         };
     }
 };

效果:

改写成面向对象:

需要注意的几点:1.不能有函数嵌套 2.变量改为属性 3.函数改为方法 4.this的指向问题

 function tabSwitch(id){
     var _this=this;
     this.oTabs=document.getElementById(id);
     this.aTabsNav=this.oTabs.querySelectorAll('.tabs-nav li');
     this.aTabsCnt=this.oTabs.querySelectorAll('.tabs-content');

     for(var i=0;i<this.aTabsNav.length;i++){
         this.aTabsNav[i].index=i;
         this.aTabsNav[i].onclick=function(){
             _this.tab(this);
         };
     }
 }

 tabSwitch.prototype.tab=function(oTabsNav){
     for(var i=0;i<this.aTabsNav.length;i++){
         this.aTabsNav[i].className='';
         this.aTabsCnt[i].style.display='none';
     }
     oTabsNav.className='active';
     this.aTabsCnt[oTabsNav.index].style.display='block';
 };

 new tabSwitch('tabs1');

javascript面向对象——tabs实例的更多相关文章

  1. javaScript 面向对象开发实例

    javaScript 面向对象开发实例 这个是结合require的模块化开发,首先创建构造函数: //test.js 1 function Test(lists) { var config={ nam ...

  2. JavaScript面向对象 实例与原型

    JavaScript 面向对象 和 C# 不太一样,js 的对象是继承自原型的如下: 首先创建一个 js 实例 new  function function f () {} 这个函数 会继承 Func ...

  3. JavaScript学习总结(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  4. javascript面向对象系列第四篇——选项卡的实现

    前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...

  5. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  6. javascript面向对象系列第一篇——构造函数和原型对象

    × 目录 [1]构造函数 [2]原型对象 [3]总结 前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如 ...

  7. Javascript面向对象(封装、继承)

    Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程( ...

  8. 【转】javascript面向对象编程

    摘要:本文本来是想自己写的,奈何花了好长时间写好之后忘记保存,还按了刷新键,一键回到解放前,索性不写了,所以本文是转载的. 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化. ...

  9. javascript面向对象(一):封装

    本文来自阮一峰 学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学 ...

随机推荐

  1. JSP——页面三大部分(指令、脚本、动作组件)

    一.JSP简介: JSP(Java Server Pages,Java服务器端页面开发技术) JSP可以实现的技术都可以通过Servlet实现,他们本质上是一样的.但JSP设计的目的在于简化表示层的表 ...

  2. 解决eclipse中maven出现的Failure to transfer XXX.jar的问题

    这个问题很烦,试了好几次都没有彻底解决,今天终于找到解决办法了. 问题主要出在,maven在下载jar的过程中出现了中断或者错误问题(不仅仅是eclipse,其他IDE也一样) 解决办法: 移除之前的 ...

  3. grunt切换下载源

    nrm 是一个 NPM 源管理器,允许你快速地在NPM 源间切换: 安装:npm install -g nrm 列出可选源:nrm ls 切换:nrm use taobao 测试所有源连接时间:nrm ...

  4. 射频识别技术漫谈(25)——Felica简介

    Felica是SONY公司开发的射频识别技术,该技术使用的载波频率与ISO14443A和ISO14443B一样,都是13.56MHz,所以有人把它称为ISO14443C,但SONY并没有正式接受这样的 ...

  5. VS2012 EF5 连接oracle11.2

    1.安装ODAC 11.2 Release 5 and Oracle Developer Tools for Visual Studio (11.2.0.3.20). 注:支持VS2010和VS201 ...

  6. elasticsearch集群部署

    启动elk: zjtest7-redis:/usr/local/elasticsearch-2.3.4/bin# ./elasticsearch -d 后台运行 访问: http://192.168. ...

  7. Filter 知识总结

    Filter对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 html 文件等进行拦截,从而实现一些特殊的功能.例如实现URL级别的权限访问控制.过滤敏感词汇.压 ...

  8. c++ cout 保留小数点位

    需要头文件 <iomanip> 输出时需要用 fixed 和 setprecision() fixed代表输出浮点数,setprecision()设置精度. #include <io ...

  9. 未能加载文件或程序集“DAL”或其他的某一个依赖项,系统找不到指定的文件

    针对这个问题我在敲VB.NET机房收费系统的时候总共出现了两次,第一次是在使用反射+抽象工厂的时候出现的,第二次是在使用VS2012自带的打包工具生成可执行文件执行exe文件的时候出现的.具体看下图: ...

  10. SqlServer之like、charindex、patindex(转载)

    SqlServer之like.charindex.patindex   1.环境介绍 测试环境 SQL2005 测试数据 200W条   2.环境准备 2.1建表 CREATE TABLE [dbo] ...