JavaScript进阶之OOP（一）

say() {

return ‘我是爸爸’

}

}

class Son extends Father {

say() {

//调用父类的普通方法

console.log(super.say()); //我是爸爸

}

}

let son = new Son()

3.3 继承方法的同时扩展方法

需求：继承父类的加法方法的同时，自己扩展一个减法方法。

注意事项：调用父类的函数时，super必须在子类this之前调用(父亲必须放在之前)

// 父类加法操作

class Father {

constructor(x, y) {

this.x = x

this.y = y

}

sum() {

console.log(this.x + this.y);

}

}

// 子类继承父类加法方法的同时扩展减法操作

class Son extends Father {

constructor(x, y) {

// 调用父类的构造函数 super必须在子类this之前调用(父亲必须放在之前)

super(x, y)

this.x = x

this.y = y

}

subtract() {

console.log(this.x - this.y);

}

}

let son = new Son(5, 3)

son.subtract() // 2

son.sum() // 8

四、Tab栏 案例

---

功能描述：

1. 点击Tab栏能实现切换

2. Tab栏和内容 点击右上角×号能删除当前栏目和内容

3. 点击加号能实现增加Tab栏功能

4. 双击Tab栏，可以编辑Tab栏名称

5. 双击内容，可编辑内容

4.1 点击Tab栏能实现切换 Tab栏和内容

4.2 点击右上角×号能删除当前栏目和内容

4.3 点击加号能实现增加Tab栏效果

4.4 双击Tab栏，可以编辑Tab栏名称

4.5 双击内容，可编辑内容

4.6 细节方面：

1. 删除一个栏目后默认选中前一个栏目

2. 新增的栏目也能实现基本功能

3. 当默认选中的是第一个，并且删除的时候，选中删除后的第一个

4. 在编辑Tab名称的时候，回车键也能确认编辑

5. 新增的栏目默认选中

样例获取：

1. Demo演示传送门

2. 下面有实例代码！

源码和教程来自b站pink老师，传送门

是不是太棒了，在21世纪是不是 很久没有遇到博主这样贴心的人才了吧！ 那还愣着干什么，点赞关注走一波啊！

实例代码

---

JS：tab.js

let that = null

class Tab {

constructor(id) {

// 1.获取元素

this.main = document.querySelector(id)

this.tabadd = this.main.querySelector(‘.tabadd’)

// li的父元素

this.ul = this.main.querySelector(‘.fisrstnav ul:first-child’)

// section福元素

this.fatherSection = this.main.querySelector(‘.tabscon’)

that = this

this.init()

}

// 初始化

init() {

this.updateNode();

// inti 初始化操作 让相关的元素绑定事件

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

this.lis[i].setAttribute(‘data-index’, i)

this.lis[i].onclick = this.toggleTab;

this.remove[i].onclick = this.removeTab;

this.spans[i].ondblclick = this.editTab;

this.sections[i].ondblclick = this.editTab;

}

this.tabadd.onclick = this.add

}

// 更新数据列表

updateNode() {

this.lis = this.main.querySelectorAll(‘li’)

this.sections = that.main.querySelectorAll(‘section’)

this.remove = this.main.querySelectorAll(‘.icon-guanbi’)

this.spans = this.main.querySelectorAll(‘.fisrstnav li span:nth-child(1)’)

console.log('this.spans: ', this.spans);

}

// 1.切换功能

toggleTab() {

that.clearClass()

this.className = ‘liactive’

that.sections[this.getAttribute(‘data-index’)].className = ‘conactive’

}

clearClass() {

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

this.lis[i].className = ‘’

this.sections[i].className = ‘’

}

}

// 2.添加

add() {

// 清除所有选中

that.clearClass()

// 1.创建 li元素和section元素

let random = Math.round(Math.random() * 100, 3)

let li = ‘

• Tab
• ’

  let section = ‘

  新内容’ + random + ‘
  ’

  // 2.追加元素 使用 insertAdjacentHTML 支持字符串形式

  that.ul.insertAdjacentHTML(‘beforeend’, li)

  that.fatherSection.insertAdjacentHTML(‘beforeend’, section)

  // 更新

  that.init()

  }

  // 3.删除

  removeTab(e) {

  // 阻止时间冒泡 防止触发li的点击切换事件

  e.stopPropagation();

  let index = this.parentNode.getAttribute(‘data-index’)

  // 根据索引号 删除对应li和section remove方法可以直接删除指定的元素

  that.lis[index].remove()

  that.sections[index].remove()

  that.init()

  // 当我们删除的不是选中状态的li的时候，原来的选定状态保持不变即可

  // 该句核心思想，如果删除的是当前选中项，删除过后页面上没有 .liactive 进入判断，直接return 否则跳过

  if (document.querySelector(‘.liactive’)) return;

  // 当我们删除过后，设置默认选中其一个

  index == 0 ? index = 0 : index–

  that.lis[index] && that.lis[index].click()

  }

  // 4.编辑

  editTab(e) {

  // 双击禁止选中文字

  window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

  let str = this.innerHTML;

  console.log(this);

  this.innerHTML = ‘’

  let input = this.children[0]

  input.value = str

  input.select() //文本框内的文字处于选定状态

  // 按下回车

  input.addEventListener(‘keyup’, function (e) {

  if (e.keyCode === 13) {

  // 手动调用表单失去焦点事件

  this.blur();

  }

  })

  input.onblur = function () {

  debugger

  this.parentNode.innerHTML = this.value

  }

  }

  }

  #let tab = new Tab(‘#tab’);

  HTML：index.html

  Js 面向对象 动态添加标签页
• 测试1
• 测试2
• 测试3
• +

  测试1
  测试2
  测试3

  CSS：tab.css

  • {

  margin: 0;

  padding: 0;

  }

  ul li {

  list-style: none;

  }

  main {

  width: 960px;

  height: 500px;

  border-radius: 10px;

  margin: 50px auto;

  }

  main h4 {

  height: 100px;

  line-height: 100px;

  text-align: center;

  }

  .tabsbox {

  width: 900px;

  margin: 0 auto;

  height: 400px;

  border: 1px solid lightsalmon;

  position: relative;

  }

  nav ul {

  overflow: hidden;

  }

  nav ul li {

  float: left;

  width: 100px;

  height: 50px;

  line-height: 50px;

  text-align: center;

  #border-right: 1px solid #ccc;

  position: relative;

  cursor: pointer;

  user-select: none;

  }

  nav ul li.liactive {

  #border-bottom: 2px solid #fff;

  z-index: 9;

  }

  nav ul li.liactive span:first-child{

  font-size: 18px;

  font-weight: bold;

  }

  ##tab input {

  width: 80%;

  height: 60%;

  }

  nav ul li span:last-child {

  position: absolute;

  user-select: none;

  font-size: 12px;

  top: -18px;

  right: 0;

  display: inline-block;

  height: 20px;

  }

  .tabadd {

  position: absolute;

  /* width: 100px; */

  top: 0;

  right: 0;

  cursor: pointer;

  }

  .tabadd span {

  display: block;

  width: 20px;

  height: 20px;

  line-height: 20px;

  text-align: center;

  #border: 1px solid #ccc;

  float: right;

  margin: 10px;

  user-select: none;

  }

  .tabscon {

  width: 100%;

  height: 300px;

  position: absolute;

  padding: 30px;

  top: 50px;

  left: 0px;

  box-sizing: border-box;

  #border-top: 1px solid #ccc;

  }

  .tabscon section,

  .tabscon section.conactive {

  display: none;

  width: 100%;

  height: 100%;

  }

  .tabscon section.conactive {

  display: block;

  }

  [

  最后

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  }

  .tabadd {

  position: absolute;

  /* width: 100px; */

  top: 0;

  right: 0;

  cursor: pointer;

  }

  .tabadd span {

  display: block;

  width: 20px;

  height: 20px;

  line-height: 20px;

  text-align: center;

  #border: 1px solid #ccc;

  float: right;

  margin: 10px;

  user-select: none;

  }

  .tabscon {

  width: 100%;

  height: 300px;

  position: absolute;

  padding: 30px;

  top: 50px;

  left: 0px;

  box-sizing: border-box;

  #border-top: 1px solid #ccc;

  }

  .tabscon section,

  .tabscon section.conactive {

  display: none;

  width: 100%;

  height: 100%;

  }

  .tabscon section.conactive {

  display: block;

  }

  [

  最后

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】