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. Python之浅谈基础

    执行python的两种方式 交互式(jupyter) 通过cmd或jupyter运行python代码 优点:运行一句执行一句 缺点:关闭cmd或jupyter后数据消失 命令行式(pycharm) 优 ...

  2. C#操作SharePoint文档库文档

    using (Stream file = spFile.OpenBinaryStream()) { //其余代码 }

  3. 每日一题 - 剑指 Offer 48. 最长不含重复字符的子字符串

    题目信息 时间: 2019-07-02 题目链接:Leetcode tag: 动态规划 哈希表 难易程度:中等 题目描述: 请从字符串中找出一个最长的不包含重复字符的子字符串,计算该最长子字符串的长度 ...

  4. 如何实现html页面自动刷新

    使用场景: 1. 页面需要定时刷新,实时加载数据,需要实时查看监控数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据 ...

  5. [POJ3613] Cow Relays(Floyd+矩阵快速幂)

    解题报告 感觉这道题gyz大佬以前好像讲过一道差不多的?然鹅我这个蒟蒻发现矩阵快速幂已经全被我还给老师了...又恶补了一遍,真是恶臭啊. 题意 给定一个T(2 <= T <= 100)条边 ...

  6. postman设置页面详解

    设置详解/General Trim keys and values in request body:如果使用form-data或者url-encoded的方式向服务器发送数据:将该选项设置为ON,则会 ...

  7. Dynamics CRM Performance Issue when CRM Forms Opening

    事情发生在Dynamics CRM 8.2.2版本,客户新升级到这个版本几个月的时间. 突然有一天,客户反映为什么我们打开CRM Form页面的时候loading的时间这么长呢?大概会需要5-15分钟 ...

  8. LNMP架构应用案例----WordPress

    一.环境部署 mysql        172.16.1.10                                  数据库 web01      10.0.0.11      172.1 ...

  9. NW.js Mac App 签名公证流程

    使用 Developer ID 为 Mac 软件签名 - Apple Developer 在MacOS 10.15之前,应用如果没有签名(signature),那么首次打开时就会弹出"无法验 ...

  10. Prometheus + Grafana 监控(mysql 和redis)

    1.监控MySQL(mysqld-exporter) https://github.com/prometheus/mysqld_exporter/releases/download/v0.11.0/m ...