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和section
    updateNode(){
        
        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='
新选项卡
';