javascript高级第五章

01-构造函数创建对象

   <script>
        var p1 = new Person('momoko', 18);
        console.log(p1);

        function Person(name, age) {
            this.name = name;
            this.age = age;
        };
        Person.prototype.sayHi = function() {
            console.log('您好');
        };
    </script>

02-class创建对象

  class Person {
            // 初始化属性
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            sayHi() {
                console.log('您好');
            }
        };
        // 实例化对象
        // 自动将方法添加到原型对象上
        var p1 = new Person('美丽', 18);
        console.log(p1);

03-class类实现继承1

   class Father {
            // 初始化属性
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            say() {
                console.log('教育你');
            }
            makemoney() {
                console.log('挣钱');
            }

        };
        // extends:实现继承
        class Son extends Father {
            // constructor 函数只要new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数
            // 自动继承Father的constructor构造函数
        }

        // 实例化对象
        // 自动将方法添加到原型对象上
        var father = new Father('小头爸爸', 30);
        console.log(father);
        var son = new Son('大头儿子', 6);
        console.log(son);
        console.log(son.age);
        son.say();

04-class类实现继承2

class Father {
            // 初始化属性
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            say() {
                console.log('教育儿子');
            }
            makemoney() {
                console.log('挣钱');
            }

        };
        // extends:实现继承
        class Son extends Father {
            // 一旦子类书写constructor构造函数，就不会再自动加载
            constructor(name, age, height) {
                super(name, age);
                this.height = height;
            }
            spendMoney() {
                console.log('花钱');
            }
            say() {
                console.log('我错了');
            }
        }

        // 实例化对象
        // 自动将方法添加到原型对象上
        var father = new Father('小头爸爸', 30);
        console.log(father);
        var son = new Son('大头儿子', 6);
        console.log(son);
        console.log(son.age);
        son.say();
        son.spendMoney();

tab切换案例

HTML

 <div class="tab-box" id="tab">
        <!-- tab部分 -->
        <nav class="tab-nav">
            <ul>
                <li class="li-active">
                    <!-- <p contenteditable="true">这是一个可编辑的段落。</p> -->
                    <span>标签1</span>
                    <span class="iconfont icon-guanbi"></span>
                </li>
                <li>
                    <span>标签2</span>
                    <span class="iconfont icon-guanbi"></span>
                </li>
                <li>
                    <span>标签3</span>
                    <span class="iconfont icon-guanbi"></span>
                </li>

            </ul>
            <div class="tab-add">
                <span>+</span>
            </div>
        </nav>
        <!-- 内容区域 -->
        <div class="tab-con">
            <section class="con-active">标签1内容</section>
            <section>标签2内容</section>
            <section>标签3内容</section>
        </div>
    </div>
    <!-- 引入js事件 -->
    <script src="js/tab.js"></script>

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;
}

.tab-box {
    width: 900px;
    margin: 0 auto;
    height: 400px;
    border: 1px solid blue;
    position: relative;
}

nav ul {
    overflow: hidden;
    width: 860px;
    display: flex;
}

nav ul li {
    /* float: left; */
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-right: 1px solid #ccc;
    position: relative;
}

nav ul li span {
    display: block;
    width: 100px;
    height: 50px;
}

nav ul li.li-active {
    border-bottom: 2px solid #fff;
    z-index: 9;
}

#tab input {
    width: 80%;
    height: 60%;
}

nav ul li span:last-child {
    position: absolute;
    user-select: none;
    font-size: 12px;
    top: -18px;
    right: 0;
    height: 20px;
    text-align: right;
}

.tab-add {
    position: absolute;
    /* width: 100px; */
    top: 0;
    right: 0;
}

.tab-add span {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #ccc;
    float: right;
    margin: 10px;
    user-select: none;
}

.tab-con {
    width: 100%;
    height: 300px;
    position: absolute;
    padding: 30px;
    top: 50px;
    left: 0px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
}

.tab-con section,
.tab-con section.con-active {
    display: none;
    width: 100%;
    height: 100%;
}

.tab-con section.con-active {
    display: block;
}

JS

// 1.添加的功能
// 2.切换的功能
// 3.删除的功能
// 4.编辑的功能
var that;
class Tab {
    // 初始化属性
    constructor(id) {
            that = this;
            // tab的DOM元素
            this.tabBox = document.querySelector(id);
            // 找到添加节点功能的DOM元素
            this.add = this.tabBox.querySelector('.tab-add');
            this.ul = this.tabBox.querySelector('.tab-nav ul');
            this.tabCon = this.tabBox.querySelector('.tab-con');
            // 初始化调用--DOM元素直接具备绑定的功能
            this.init();
        }
        // 初始化
    init() {
            // 获取当前的所有的li和所有section
            this.updateNodes();
            console.log(this.spans);
            // 绑定事件
            // 添加功能的事件
            this.add.onclick = this.addNodes.bind(this);
            for (var i = 0; i < this.lis.length; i++) {
                // 绑定点击事件切换功能
                this.lis[i].index = i;
                // 绑定切换事件
                this.lis[i].onclick = this.toggle;
                // 绑定删除事件
                this.guanbis[i].onclick = this.removeTab;
                this.spans[i].ondblclick = this.editTab;
            }
        }
        // 更新节点功能
    updateNodes() {
            this.lis = this.tabBox.querySelectorAll('.tab-nav ul li');
            this.sections = this.tabBox.querySelectorAll('.tab-con section');
            this.guanbis = this.tabBox.querySelectorAll('.icon-guanbi');
            this.spans = this.tabBox.querySelectorAll('.tab-nav ul li span:nth-child(1)');

        }
        // 排他功能
    clearClass() {
            for (var i = 0; i < this.lis.length; i++) {
                this.lis[i].className = '';
                this.sections[i].className = '';
            }
        }
        // 1.添加的功能
    addNodes() {
            // 先做排他功能
            this.clearClass();
            // 添加li内容
            var li = `
        <li class="li-active">
            <span>新标签</span>
            <span class="iconfont icon-guanbi"></span>
        </li>
        `;
            // 添加到页面上
            // console.log(this);
            // console.log(this.ul.innerHTML);
            this.ul.innerHTML += li;
            // 添加section内容
            var section = `<section class="con-active">${Math.random()}</section>`;
            // 添加内容部分到页面
            this.tabCon.innerHTML += section;
            // 再次调用init初始化的方法,更新li的个数和section的个数
            this.init();

        }
        // 2.切换功能的事件
    toggle() {
            // console.log(this);
            // console.log(that);
            // 排他
            that.clearClass();
            this.className = 'li-active';
            that.sections[this.index].className = 'con-active';
        }
        // 3.删除事件
    removeTab(e) {
        console.log(this);
        // 阻止事件传播
        e.stopPropagation();
        // 先获取父元素的index的值
        var lisIndex = this.parentNode.index;
        // 删除点击元素的父元素li
        this.parentNode.remove();
        that.sections[lisIndex].remove();
        // 判定删除的元素是否是活性的元素
        var hasActive = that.tabBox.querySelector('.li-active');
        if (hasActive) {
            return;
        };
        // 删除完成后,需要更新节点
        that.init();
        if (lisIndex == 0) {
            lisIndex = 0;
        } else {
            lisIndex--;
        }
        console.log(that.lis[lisIndex]);
        // 使设定的元素成为活性
        // that.lis[lisIndex].className = 'li-active';
        // that.sections[this.index].className = 'con-active';

        // 手动调用点击事件
        that.lis[lisIndex] && that.lis[lisIndex].click();
    }

    // 编辑功能
    // 1. 双击时 span元素文本替换,input元素显示--span的innerText设置input的value
    // 2.input元素失去焦点时,input消失,input的value设置span,进行显示
    // 如果inputValue为空时,可设置默认值
    editTab(e) {
        if (this.childNodes[0].nodeType == 3) {
            console.log(this.childNodes[0].nodeType);
            // span元素
            console.log(this);
            // 获取span元素的文本
            var spanText = this.innerText;
            // 生成input元素
            var inputEle = `<input type="text" value="${spanText}">`;
            // 把input元素添加到span元素中
            this.innerHTML = inputEle;
            // 获取inputDOM元素
            var input = this.children[0];
            // 使文字选中
            input.select();
            // 绑定失去焦点事件
            input.onblur = function() {
                if (this.value == '') {
                    alert('请输入标题');
                    this.parentNode.innerText = '新标签页';
                } else {
                    this.parentNode.innerText = this.value;
                }
            };
            input.onkeyup = function(e) {
                if (e.keyCode == 13) {
                    this.blur();
                }
            };
        }
    }
}
var tab = new Tab('#tab');
console.log(tab);