JavaScript面向对象:面向对象案例

面向对象版 tab 栏切换

功能需求:

1.点击 tab栏,可以切换效果.

2.点击 + 号, 可以添加 tab 项和内容项.

3.点击 x 号, 可以删除当前的tab项和内容项.

双击tab项文字或者内容项文字,可以修改里面的文字内容

基本结构

抽象对象: Tab 对象

1.该对象具有切换功能

2.该对象具有添加功能

3.该对象具有删除功能

4.该对象具有修改功能

面向对象版 tab 栏切换添加功能

1.点击 + 可以实现添加新的选项卡和内容

2.第一步: 创建新的选项卡li 和新的内容 section

3.第二步: 把创建的两个元素追加到对应的父元素中.

4.以前的做法: 动态创建元素 createElement , 但是元素里面内容较多, 需要innerHTML赋值,在 appendChild 追加到父元素里面.

5.现在高级做法: 利用 insertAdjacentHTML() 可以直接把字符串格式元素添加到父元素中

6.appendChild 不支持追加字符串的子元素, insertAdjacentHTML 支持追加字符串的元素

7.insertAdjacentHTML(追加的位置,‘要追加的字符串元素’)

8.追加的位置有: beforeend 插入元素内部的最后一个子节点之后

9.该方法地址: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML

出现这样的原因是因为，我们后面添加的小li是后添加的，而前面的获取元素是页面加载时，获取已经准备好的。解决方案就是把获取放在一个函数中，加载时调用一次，添加完成后在调动一次init()就可以了

面向对象版 tab 栏切换删除功能

1.点击 × 可以删除当前的li选项卡和当前的section

2.X是没有索引号的, 但是它的父亲li 有索引号, 这个索引号正是我们想要的索引号

3.所以核心思路是: 点击 x 号可以删除这个索引号对应的 li 和 section

4.但是,当我们动态删除新的li和索引号时,也需要重新获取 x 这个元素. 需要调用init 方法

icon-guanbi是我们要的X号

删除功能

面向对象版 tab 栏切换编辑功能

1.双击选项卡li或者 section里面的文字,可以实现修改功能

2.双击事件是: ondblclick

3.如果双击文字,会默认选定文字,此时需要双击禁止选中文字

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

5.核心思路: 双击文字的时候, 在里面生成一个文本框, 当失去焦点或者按下回车然后把文本框输入的值给原先元素即可.

var that;
class Tab{constructor(id){// 获取元素that=this;this.main=document.querySelector(id);this.add=this.main.querySelector('.tabadd')// li 的父元素this.ul=this.main.querySelector('.fisrstnav ul:first-child')// section的父元素this.fsection=this.main.querySelector('.tabscon');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.toggleTab;this.remove[i].onclick=this.removeTab;this.spans[i].ondblclick = this.editTab;this.sections[i].ondblclick = this.editTab;}}// 获取所有的小li和sectionupdateNode(){this.lis=this.main.querySelectorAll('li')this.sections=this.main.querySelectorAll('section');this.remove=this.main.querySelectorAll('.icon-guanbi')this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');}// 1.切换功能toggleTab(){// console.log(this.index);that.clearClass()this.className='liactive';that.sections[this.index].className='conactive'}// clearClass this指向的是that 也就是实例化对象clearClass(){for(var i=0;i<this.lis.length;i++){this.lis[i].className='';this.sections[i].className='';}}// 2.添加功能addTab(){that.clearClass()//创建li元素和section元素var random=Math.random();var li='<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';var section='<section class="conactive">测试'+random+'</section>'// 追加父元素that.ul.insertAdjacentHTML('beforeend',li)that.fsection.insertAdjacentHTML('beforeend',section)that.init()}// 3.删除功能removeTab(e){e.stopPropagation();var index=this.parentNode.index;console.log(index);// remove()方法可以直接删除指定的元素that.lis[index].remove();that.sections[index].remove();that.init();// 当我们删除的不是选中状态的li的时候，原本的状态if(document.querySelector('.liactive')) return;//return了就是不执行后面的代码// 当我们点击了选中状态的这个li的时候，让它前一个li处于选中状态index--;// 手动调用我们点击事件，不需要鼠标触发that.lis[index]&&that.lis[index].click();that.sections[index].click();}// 4.修改功能editTab(){var str=this.innerHTML;// 双击禁止选中文字window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();this.innerHTML='<input tpye="text"/>'var input=this.children[0]input.value=strinput.select();//文本框里面的文字处于选定状态// 当我们离开文本框就把文本框里面的值给spaninput.onblur=function(){input.parentNode.innerHTML=this.value;}// 按下回车也可以把文本框里面的值给spaninput.onkeyup = function(e) {if (e.keyCode === 13) {// 手动调用表单失去焦点事件  不需要鼠标离开操作this.blur();}}}
}
new Tab('#tab');

JavaScript面向对象:面向对象案例相关推荐

Web前端学习笔记——JavaScript之面向对象游戏案例：贪吃蛇
面向对象游戏案例:贪吃蛇案例相关源码以上传到 GitHub :https://github.com/lipengzhou/new-snake 案例介绍游戏演示在线演示地址:贪吃蛇案例目标游戏 ...
JavaScript 面向对象游戏案例：贪吃蛇
面向对象游戏案例:贪吃蛇案例相关源码以上传到 GitHub :https://github.com/sunna1/snake 案例介绍案例目标游戏的目的是用来体会js高级语法的使用不需要具备抽 ...
JavaScript高级面向对象、正则表达式
JavaScript高级面向对象.正则表达式学习目标: 理解面向对象开发思想掌握 JavaScript 面向对象开发相关模式掌握在 JavaScript 中使用正则表达式 typora-cop ...
JavaScript 之面向对象
JavaScript 面向对象一.面向对象编程介绍 1.1 两大编程思想面向过程面向对象 1.2 面向过程编程 POP(Process-oriented programming) 面向过程就是分 ...
javascript 的面向对象特性参考
最近在看用javascript+css实现rich client.javascript 也是一个蛮有意思的语言.特别是其面向对象的实现和其他"标准"的OO launguage有很大 ...
JavaScript的面向对象特性
JavaScript的面向对象特性 JavaScript是基于对象和事件驱动并具有安全性能的脚本:JavaScript虽然不是面向对象的编程语言但具有很多面向对象的特性. 1.面向对象开发 a) ...
了解使用JavaScript进行面向对象编程的基础（并增强您的编码…
by Kris Baillargeon 通过克里斯·拜伦学习使用JavaScript进行面向对象编程的基础知识(并增强您的编码能力!) (Learn the basics of object-ori ...
javascript 中面向对象实现如何继承
上一篇博客已经说了关于javascript中的封装, 其中也说了javascript中本来是没有类的,我们上一篇的封装也是用javascript中的函数去模拟一个类,最后我们还模拟了一个构造函数.那 ...
python-面向对象-05_面向对象封装案例 II
面向对象封装案例 II 目标士兵突击案例身份运算符封装封装是面向对象编程的一大特点面向对象编程的第一步 -- 将属性和方法封装到一个抽象的类中外界使用类创建对象, ...
javascript中面向对象的5种写法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

JavaScript面向对象:面向对象案例

JavaScript面向对象:面向对象案例相关推荐

最新文章

热门文章