ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能

叫我詹躲躲 2020-11-06 20:48:36
学习 es es6 笔记 教你用


前两篇文章主要介绍了类和对象、类的继承,如果想了解更多理论请查阅《ES6学习笔记(一):轻松搞懂面向对象编程、类和对象》、《ES6学习笔记(二):教你玩转类的继承和类的对象》,今天主要来分享关于如何用js面向对象的思维来实现tab栏的一些相关的功能。

要实现的功能分析

  1. 点击tab栏可以切换效果
  2. 点击+号,可以添加tab项和内容项
  3. 点击X号,可以删除当前的tab项和内容项
  4. 点击tab文字或者内容项文字,可以修改里面的字体内容

抽像对象: Tab对象 (增删改查功能)
实现功能效果如下图:
image.png
首先建立一个class 类Tab:

let that
class Tab {

constructor(id) {

that=this
// 获取元素
this.main = document.getElementById('tab')
//获取li的父元素
this.ul = this.main.querySelector('.firstnav ul:first-child')
// 获取section的父元素
this.fSection = this.main.querySelector('.tabscon')
this.add = this.main.querySelector('.tabadd')
this.remove = this.main.querySelectorAll('i')
this.init()
}
//初始化
init() {

this.updateNode()
// init 初始化操作让相关的元素绑定事件
this.add.onclick = this.addTab
for(var i = 0; i<this.lis.length; i++) {

this.lis[i].index = i
this.lis[i].onclick = this.togggleTab
this.remove[i].onclick = this.removeTab
this.spans[i].ondblclick = this.editTab
this.sections[i].ondblclick = this.editTab
}
}
//我们动态添加元素,删除元素时,需要从新获取对应的元素
updateNode() {

this.lis = this.main.querySelectorAll('li')
this.sections = this.main.querySelectorAll('section')
this.remove = this.main.querySelectorAll('i')
this.spans = this.main.querySelectorAll('span')
}
//切换功能
togggleTab() {
}
//清除li和section的class,主要实现切换功能用
clearClass() {

for(var i = 0; i< this.lis.length; i++) {

this.lis[i].className = ''
this.sections[i].className = ''
}
}
//添加功能
addTab() {
}
//删除功能
removeTab(e) {
}
// 修改功能
editTab() {
}
}
let tab = new Tab('#tab')

切换功能

  1. 点击上面的tab标题实现切换功能,下面对应的section也显示,其他的隐藏
  2. 实现思路,先去掉已有的选中class,
  3. 根据li的索引值,找到要显示的section,添加对应的class,使其显示

实现的主要代码是:

that.clearClass()
this.className='liactive'
that.sections[this.index].className='conactive'

添加功能实现

  1. 点击+ 可以实现添加新的选项卡和内容
  2. 第一步:创建新的选项卡li和新的内容section
  3. 第二步: 把创建的两个元素追加到对应的父元素中
  4. 以前的做法:动态创建元素createElement,但是元素里面内容较多,需要innerHTML赋值在appendChild追加到父元素里面
  5. 现在高级做法,利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中,appendChild不支持追加字符串的子元素,insertAdjacentHTML支持追加字符串的元素

实现功能的主要代码是:

//创建li元素和section元素
that.clearClass()
let li = ' <li class="liactive" ><span>新选项卡</span><i>X</i></li>'
let section = '<section class="conactive">新内容区</setion>'
that.ul.insertAdjacentHTML('beforeend', li)
that.fSection.insertAdjacentHTML('beforeend',section)
that.init()

删除功能

  1. 点击X可以删除当前的选项卡和当前的section
  2. X是没有索引号的,但是它的父元素li有索引号,这个索引号正是我们想要的索引号
  3. 所以核心思路就是:点击x号可以删除这个索引号对应的li和section

实现功能的主要代码是:

e.stopPropagation();//阻止冒泡,
let index = this.parentNode.index
//根据索引号删除对应的li 和section
that.lis[index].remove()
that.sections[index].remove()
that.init()
//当我们删除的不是选中状态的元素时,原来的选中状态保持不变
if(document.querySelector('.liactive')) return
//当我们删除 了选中状态的生活,让它前一个li处于选中状态
index--
//手动调用click事件,不需要鼠标触发
that.li[index] && that.lis[index].click()

编辑功能

  1. 双击选项卡li或者section里面的文字,可以实现修改功能
  2. 双击事件是:ondblclick
  3. 如果双击文字,会默认选定文字,此时需要双击禁止选中文字
  4. window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()
  5. 核心思路:双击文字的时候,在里面生成一个文本框,当失去焦点或者按下回车然后把文本输入的值给原先元素即可

实现功能的主要代码是:

let str = this.innerHTML
//双击禁止选定文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
this.innerHTML ='<input type="text" value="'+ str +'"/>'
let input = this.children[0]
//文本框里面的文字处于选中状态
input.select()
//当鼠标离开文本框就把文本框的值给span
input.onblur = function() {

this.parentNode.innerHTML=input.value
}
// 按回车键也饿可以把文本框里的值给span
input.onkeyup = function(e) {

if(e.keyCode === 13) {

this.blur()
}
}

总结

这篇文章主要是通过我学习的技术总结后来分享了如何用面向对象的思路方法来实现tab栏的切换、编辑、增加、删除功能。用到了很多ES6的一些语法。
案例源码地址:https://github.com/qiuqiulanfeng/tab

版权声明
本文为[叫我詹躲躲]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/3995971/blog/4558928

  1. 【计算机网络 12(1),尚学堂马士兵Java视频教程
  2. 【程序猿历程,史上最全的Java面试题集锦在这里
  3. 【程序猿历程(1),Javaweb视频教程百度云
  4. Notes on MySQL 45 lectures (1-7)
  5. [computer network 12 (1), Shang Xuetang Ma soldier java video tutorial
  6. The most complete collection of Java interview questions in history is here
  7. [process of program ape (1), JavaWeb video tutorial, baidu cloud
  8. Notes on MySQL 45 lectures (1-7)
  9. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  10. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  11. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  12. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  13. 【递归,Java传智播客笔记
  14. [recursion, Java intelligence podcast notes
  15. [adhere to painting for 386 days] the beginning of spring of 24 solar terms
  16. K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
  17. K8s Series Part 8 (service, endpoints and high availability kubeadm deployment)
  18. 【重识 HTML (3),350道Java面试真题分享
  19. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  20. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  21. [re recognize HTML (3) and share 350 real Java interview questions
  22. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  23. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  24. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  25. RPC 1: how to develop RPC framework from scratch
  26. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  27. RPC 1: how to develop RPC framework from scratch
  28. 一次性捋清楚吧,对乱糟糟的,Spring事务扩展机制
  29. 一文彻底弄懂如何选择抽象类还是接口,连续四年百度Java岗必问面试题
  30. Redis常用命令
  31. 一双拖鞋引发的血案,狂神说Java系列笔记
  32. 一、mysql基础安装
  33. 一位程序员的独白:尽管我一生坎坷,Java框架面试基础
  34. Clear it all at once. For the messy, spring transaction extension mechanism
  35. A thorough understanding of how to choose abstract classes or interfaces, baidu Java post must ask interview questions for four consecutive years
  36. Redis common commands
  37. A pair of slippers triggered the murder, crazy God said java series notes
  38. 1、 MySQL basic installation
  39. Monologue of a programmer: despite my ups and downs in my life, Java framework is the foundation of interview
  40. 【大厂面试】三面三问Spring循环依赖,请一定要把这篇看完(建议收藏)
  41. 一线互联网企业中,springboot入门项目
  42. 一篇文带你入门SSM框架Spring开发,帮你快速拿Offer
  43. 【面试资料】Java全集、微服务、大数据、数据结构与算法、机器学习知识最全总结,283页pdf
  44. 【leetcode刷题】24.数组中重复的数字——Java版
  45. 【leetcode刷题】23.对称二叉树——Java版
  46. 【leetcode刷题】22.二叉树的中序遍历——Java版
  47. 【leetcode刷题】21.三数之和——Java版
  48. 【leetcode刷题】20.最长回文子串——Java版
  49. 【leetcode刷题】19.回文链表——Java版
  50. 【leetcode刷题】18.反转链表——Java版
  51. 【leetcode刷题】17.相交链表——Java&python版
  52. 【leetcode刷题】16.环形链表——Java版
  53. 【leetcode刷题】15.汉明距离——Java版
  54. 【leetcode刷题】14.找到所有数组中消失的数字——Java版
  55. 【leetcode刷题】13.比特位计数——Java版
  56. oracle控制用户权限命令
  57. 三年Java开发,继阿里,鲁班二期Java架构师
  58. Oracle必须要启动的服务
  59. 万字长文!深入剖析HashMap,Java基础笔试题大全带答案
  60. 一问Kafka就心慌?我却凭着这份,图灵学院vip课程百度云