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>

ES6 class继承的简单应用的更多相关文章

  1. ES5和ES6的继承对比

    ES5的继承实现,这里以最佳实践:寄生组合式继承方式来实现.(为什么是最佳实践,前面有随笔讲过了,可以参考) function Super(name) { this.name = name; } Su ...

  2. ES5的继承和ES6的继承有什么区别？让Babel来告诉你

    如果以前问我ES5的继承和ES6的继承有什么区别,我一定会自信的说没有区别,不过是语法糖而已,充其量也就是写法有区别,但是现在我会假装思考一下,然后说虽然只是语法糖,但也是有点小区别的,那么具体有什么 ...

  3. 对于js原型和原型链继承的简单理解（第三种，复制继承）

    复制继承:简单理解,就是把父对象上的所有属性复制到自身对象上: function Cat(){ this.climb = function(){ alert("我会爬树"); } ...

  4. 详解ES5和ES6的继承

    ES5继承 构造函数.原型和实例的关系:每一个构造函数都有一个原型对象,每一个原型对象都有一个指向构造函数的指针,而每一个实例都包含一个指向原型对象的内部指针, 原型链实现继承 基本思想:利用原型让一 ...

  5. 用仿ActionScript的语法来编写html5——第四篇，继承与简单的rpg

    第四篇,继承与简单的rpg 这次用继承自LSprite的类来实现简单的rpg的demo先看一下最后的代码与as的相似度 var backLayer; //地图 var mapimg; //人物 var ...

  6. ES5和ES6的继承

    ES5继承 构造函数.原型和实例的关系:每一个构造函数都有一个原型对象,每一个原型对象都有一个指向构造函数的指针,而每一个实例都包含一个指向原型对象的内部指针, 原型链实现继承 基本思想:利用原型让一 ...

  7. ES6 class继承

    ES6 class继承 class类的继承 class可以通过extends关键字实现继承,这笔ES5的通过修改原型连实现继承要清晰和方便很多. class Point{ } class ColorP ...

  8. ES6 class 继承 与面向对象封装开发简单实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. ES5与ES6的继承

    JavaScript本身是一种神马语言: 提到继承,我们常常会联想到C#.java等面向对象的高级语言(当然还有C++),因为存在类的概念使得这些语言在实际的使用中抽象成为一个对象,即面向对象.Jav ...

随机推荐

  1. selenium（12）-web UI自动化项目实战（PO模式，代码封装）

    web UI自动化项目实战-项目 项目使用禅道,所以你需要搭建1个禅道,搭建禅道的方法和步骤见 https://www.cnblogs.com/xinhua19/p/13151296.html 搭建U ...

  2. 【FastDFS】如何打造一款高可用的分布式文件系统？这次我明白了！！

    写在前面 前面我们学习了如何基于两台服务器搭建FastDFS环境,而往往在生产环境中,需要FastDFS做到高可用,那如何基于FastDFS打造一款高可用的分布式文件系统呢?别急,今天,我们就一起来基 ...

  3. mat-paginatoor控件

    pageNumber是点击搜索查询后,跟新的变量值. import { MatPaginatorIntl } from '@angular/material'; const getRangeLabel ...

  4. （私人收藏）React教程手册

    React教程手册 https://pan.baidu.com/s/1ka2PJ54HgqJ8lC6XgbvdLg pedx React 教程 含有3个附件,如下: react.js react-do ...

  5. spring和springmvc包扫描问题

    写这篇博客之前,橘子松必须感慨下!!找了我一下午加一晚上(md),问了几个朋友也没找到.凉了啊 在搭建ssm之前,我把controller service mapper包扫描用基本包扫描   都写在a ...

  6. LeetCode 第 196 场周赛 （题目：5452-5455，这是参加过最坑的周赛，暴力n^2居然可以过）

    5452. 判断能否形成等差数列   给你一个数字数组 arr . 如果一个数列中,任意相邻两项的差总等于同一个常数,那么这个数列就称为 等差数列 . 如果可以重新排列数组形成等差数列,请返回 tru ...

  7. 3dTiles 数据规范详解[3] 内嵌在瓦片文件中的两大数据表

    转载请声明出处:全网@秋意正寒 零.本篇前言 说实话,我很纠结是先介绍瓦片的二进制数据文件结构,还是先介绍这两个重要的表.思前想后,我决定还是先介绍这两个数据表. 因为这两个表不先给读者灌输,那么介绍 ...

  8. Git上传本地项目到远程仓库

    一.在gitee或其他仓库上创建工程,名称需要和本地工程名称一致. 二.找到本地项目工程,进入工程目录,如下图,然后依次执行下列命令: 1.git init //初始化本地仓库 2. git add ...

  9. 【学习】从.txt文件读取生成编译代码。

    string code = null; String projectName = Assembly.GetExecutingAssembly().GetName().Name; // 1. 生成要编译 ...

  10. day15 名称空间与作用域

    目录 一.参数补充 1 命名关键字参数(了解) 二.名称空间 1.内置名称空间 2.全局名称空间 3.局部名称空间 4.名称空间的加载与销毁顺序 三.作用域 一.参数补充 1 命名关键字参数(了解) ...