墨纸瀚云
墨纸瀚云

ES6 class继承的简单应用

class的好处就是让继承的实现更加简单，语法简单，理解起来也不复杂，但是现在只能做测试使用，项目中需要用Babel工具。

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examplestitle>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script src="jquery2.3.0.js">script>
head>

<body>
    <ul class="oUl">
        <li>张三：li>
        <li>李四：li>
        <li>王二：li>
    ul>
    <ul class="oDiv">
        <li id="1">
            <h3>我要改剧本，不让~~h3>
            <div>
            div>
        li>
        <li id="2">
            <h3>悬崖上有桥么，有？没有~ h3>
            <div>
            div>
        li>
        <li id="3">
            <h3>你敢打坏我的灯？不租~   h3>
            <div>
            div>
        li>
    ul>
    <script>
    /*function ChangeToEidt(id,value,parentElement){
                                this.id = id;
                                this.value = value;
                                this.parentElement = parentElement;
                            };*/

    class ChangeToEidt {
        constructor(id, value, parentEle) {
            this.id = id;
            this.value = value;
            this.parentEle = parentEle;
            this.initElements();
            this.initEvents()
        }

        initElements() {
            this.text = $("");
            this.text.html(this.value)
            this.edit = $("");
            this.btnDiv = $("
");
            this.saveBtn = $("");
            this.cancelBtn = $("");

            this.btnDiv.append(this.saveBtn).append(this.cancelBtn);
            this.parentEle.append(this.text).append(this.edit).append(this.btnDiv);
            this.convertToReadable();
        }
        initEvents() {
            var that = this;
            this.text.click(function() {
                that.convertToEditable();
            });
            this.cancelBtn.click(function() {
                that.cancel();
            });
            this.saveBtn.click(function() {
                that.save();
            });
        }

        convertToEditable() {
            this.text.hide();
            this.edit.show();
            this.btnDiv.show();
            this.edit.focus();
            if (this.value == this.getValue()) {
                this.edit.val("")
            }
        }

        convertToReadable() {
            this.text.show();
            this.edit.hide();
            this.btnDiv.hide();
        }

        cancel() {
            this.convertToReadable();
        }

        save() {
            this.setValue(this.edit.val());
            this.text.html(this.getValue());
            this.convertToReadable();
        }
        setValue() {
            this.value = value;
        }

        getValue() {
            return this.value;
        }
    }

    class ChangeToAreaEidt extends ChangeToEidt {
        constructor(id, value, parentEle) {
            super(id, value, parentEle)
        }

        initElements() {
            this.text = $("");
            this.text.html(this.value);
            this.edit = $("