如何使用面向对象的方法实现原生js选项卡实例教程

布满荆棘的人生 2023-07-26 05:30 104阅读 0赞

本教程通过js面向对象的方法来封装一个选项卡的实例，在实例中讲解js的面向对象如何实现功能。

一般封装好的选项卡程序，只需要一个div元素即可。其它元素都是通过json数据来生成，所以封装好的选项卡实例，调用非常方便。先创建一个div元素，如下所示：

选项卡的样式可以到随教程上传的实例 [《如何使用面向对象的方法实现原生js选项卡实例教程》源码][js] 中下载，也可以自己编写喜欢的样式。

本教程不过多解释面向对象的前世今生，直接通过实例说明具体的做法。先准备好需要的json数据，等下就可以直接在实例中生成选项卡。数据代码如下所示：

var oData = [
      { 
        label:'html',
        content:'HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。'
      },
      { 
        label:'css',
        content:'层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。'
      },
      { 
        label:'javascript',
        content:'JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。'
      },
    ];

现在可以按照惯例来分析功能，按步骤来编写具体代码。

1.  创建构造函数  
    原生javascript实例对象，一般都是通过构造函数创建的。所以生成一个选项卡的实例对象之前，先创建一个构造函数，如下所示：

//创建选项卡构造函数，elem:DOM元素；data:生成选项卡的数据；option:选项卡对象相关选项属性
    function TabClass(elem,data){ 
    
    }

1.  在构造函数中设置属性、创建标签和内容元素，如下所示：

function TabClass(elem,data,option){ 
      //设置数据
      this.data = data;
      //设置选项卡包裹
      this.wrap = elem;
      //创建标签包裹
      this.labelBox = document.createElement('ul');
      //设置标签包裹class
      this.labelBox.className = 'label_box';
      //创建内容包裹
      this.contentBox = document.createElement('div');
      //设置内容包裹class
      this.contentBox.className = 'content_box';
    }

1.  在构造函数中设置默认选项属性，如切换标签的事件，默认显示第几个标签等。如下所示：

function TabClass(elem,data,option=null){ 
    
      /*...*/
    
      //设置默认属性
      this.options = { 
        //默认切换标签是点击事件
        event:'click',
        //默认当前标签显示第一个
        index:0
      }
      //修改选项属性
      if(option instanceof Object){ 
        for(let k in option){ 
          this.options[k] = option[k];
        }
      }
    }

1.  在构造函数的原型上创建creatDataElem方法。  
    在creatDataElem方法中，通过json数据生成标签和内容元素，并把所有元素放到包裹元素中。如下所示：

TabClass.prototype.creatDataElem = function(){ 
      //声明标签html代码字符串变量
      var sLabel = '';
      //声明内容html代码字符串变量
      var sContent = '';
      //通过循环数据，生成标签和内容元素
      this.data.forEach((e,i)=>{ 
        //判断选项中默认当前标签和显示内容
        if(i==this.options.index){   
          sLabel += '<li class="active" data-index="' + i + '">' + e.label + '</li>';
          sContent += '<div class="content" style="display:block">' + e.content + '</div>';
        }else{ 
          //通过数据中的label属性生成标签,data-index属性是当前标签的索引，用于切换标签
          sLabel += '<li data-index="' + i + '">' + e.label + '</li>';
          //通过数据中的content属性生成内容
          sContent += '<div class="content">' + e.content + '</div>';
        }
      });
      //把标签和内容分别放到包裹元素中
      this.labelBox.innerHTML = sLabel;
      this.contentBox.innerHTML = sContent;
      //把标签和内容放到外包元素中
      this.wrap.appendChild(this.labelBox);
      this.wrap.appendChild(this.contentBox);
    }

1.  在构造函数的原型上创建init方法，用于初始化选项卡实例对象。  
    在init方法中，调用creatDataElem方法生成DOM元素；给标签包裹元素绑定事件，用于切换标签等。如下所示：

TabClass.prototype.init = function(){ 
      //声明_self变量，用于在事件函数中指向实例对象
      var _self = this;
      //调用creatDataElem方法生成DOM元素
      this.creatDataElem();
      //在标签上绑定事件
      this.labelBox.addEventListener(this.options.event,function(event){ 
        //获取点击的DOM元素
        var eTarget = event.target;
        //判断当前点击的不是当前标签
        if(eTarget.nodeName.toLowerCase() == 'li' && eTarget.className != 'active'){ 
          //修改当前标签
          _self.options.index = eTarget.dataset.index;
          //重新生成DOM元素
          _self.creatDataElem();
        }
      });
    }

1.  在TabClass构造函数中调用this.init进行初始化，如下所示：

function TabClass(elem,data,option){ 
      
      /* ... */
      
      /* ... */
      
      //初始化实例对象
      this.init();
    }

现在可以获取外包元素，并生成选项卡实例，代码如下：

var eContainer = document.getElementById('tabContainer');
    	new TabClass(eContainer,oData);

效果如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VzdHN0MTEy_size_16_color_FFFFFF_t_70]

如果想要默认显示第二个标签，并绑定mouseover事件，可以添加选项，如下调用：

var eContainer = document.getElementById('tabContainer');
    	new TabClass(eContainer,oData,{ index:1,event:'mouseover'});

效果如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VzdHN0MTEy_size_16_color_FFFFFF_t_70 1]

[js]: https://download.csdn.net/download/gegestst112/12327435
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VzdHN0MTEy_size_16_color_FFFFFF_t_70]: /images/20230528/1760b1209597415d82709f489e03d497.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VzdHN0MTEy_size_16_color_FFFFFF_t_70 1]: /images/20230528/82a912e9e4ba415099b2ecdb72420d91.png