ES6 class继承的简单应用

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <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 = $("<span / >");
            this.text.html(this.value)
            this.edit = $("<input type='text' />");
            this.btnDiv = $("<div style='display:inline-block' />");
            this.saveBtn = $("<input type='button' value='保存' />");
            this.cancelBtn = $("<input type='button' value='取消' />");

            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 = $("<span / >");
            this.text.html(this.value);
            this.edit = $("<textarea style='width:315px;height:70px;' />");
            this.btnDiv = $("<div style='display:inline-block' />");
            this.saveBtn = $("<input type='button' value='保存' />");
            this.cancelBtn = $("<input type='button' value='取消' />");

            this.btnDiv.append(this.saveBtn).append(this.cancelBtn);
            this.parentEle.append(this.text).append(this.edit).append(this.btnDiv);
            this.convertToReadable();
        }
    }



    $(".oUl li").each(function() {
        new ChangeToEidt($(this).attr("id"), "请输入成绩...", $(this));
    });

    $(".oDiv li div").each(function() {
        new ChangeToAreaEidt($(this).attr("id"), "请留1言...", $(this));
    });
    </script>
</body>

</html>

 

posted @ 2017-02-16 16:17  墨纸瀚云  阅读(301)  评论(0)  编辑  收藏  举报