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>
ES6 class继承的简单应用的更多相关文章
- ES5和ES6的继承对比
ES5的继承实现,这里以最佳实践:寄生组合式继承方式来实现.(为什么是最佳实践,前面有随笔讲过了,可以参考) function Super(name) { this.name = name; } Su ...
- ES5的继承和ES6的继承有什么区别?让Babel来告诉你
如果以前问我ES5的继承和ES6的继承有什么区别,我一定会自信的说没有区别,不过是语法糖而已,充其量也就是写法有区别,但是现在我会假装思考一下,然后说虽然只是语法糖,但也是有点小区别的,那么具体有什么 ...
- 对于js原型和原型链继承的简单理解(第三种,复制继承)
复制继承:简单理解,就是把父对象上的所有属性复制到自身对象上: function Cat(){ this.climb = function(){ alert("我会爬树"); } ...
- 详解ES5和ES6的继承
ES5继承 构造函数.原型和实例的关系:每一个构造函数都有一个原型对象,每一个原型对象都有一个指向构造函数的指针,而每一个实例都包含一个指向原型对象的内部指针, 原型链实现继承 基本思想:利用原型让一 ...
- 用仿ActionScript的语法来编写html5——第四篇,继承与简单的rpg
第四篇,继承与简单的rpg 这次用继承自LSprite的类来实现简单的rpg的demo先看一下最后的代码与as的相似度 var backLayer; //地图 var mapimg; //人物 var ...
- ES5和ES6的继承
ES5继承 构造函数.原型和实例的关系:每一个构造函数都有一个原型对象,每一个原型对象都有一个指向构造函数的指针,而每一个实例都包含一个指向原型对象的内部指针, 原型链实现继承 基本思想:利用原型让一 ...
- ES6 class继承
ES6 class继承 class类的继承 class可以通过extends关键字实现继承,这笔ES5的通过修改原型连实现继承要清晰和方便很多. class Point{ } class ColorP ...
- ES6 class 继承 与面向对象封装开发简单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ES5与ES6的继承
JavaScript本身是一种神马语言: 提到继承,我们常常会联想到C#.java等面向对象的高级语言(当然还有C++),因为存在类的概念使得这些语言在实际的使用中抽象成为一个对象,即面向对象.Jav ...
随机推荐
- ES11来了,还学得动吗?
写在前面 ES2020(即 ES11)上周(2020 年 6 月)已经正式发布,在此之前进入 Stage 4 的 10 项提案均已纳入规范,成为 JavaScript 语言的新特性 一.特性一览 ES ...
- java语言基础(五)_Scanner类_Random类_ArrayList类
API API(Application Programming Interface),应用程序编程接口.Java API是一本程序员的字典 ,是JDK中提供给程序员使用的类的说明文档.这些类将底层的代 ...
- JVM源码分析之深入分析Object类finalize()方法的实现原理
原创申明:本文由公众号[猿灯塔]原创,转载请说明出处标注 “365篇原创计划”第十篇. 今天呢!灯塔君跟大家讲: 深入分析Object类finalize()方法的实现原理 finalize 如果 ...
- 理解css中Grid布局,在项目中如何实现grid页面布局
简介 CSS中Grid是一种二维网格式布局方式.我们常规使用table.float.position.inline-block等布局,但它们遗漏了很多功能,例如垂直居中.后来css3中flexbox的 ...
- CVE-2020-5902 F5 BIG-IP 远程代码执行RCE
cve-2020-5902 : RCE:curl -v -k 'https://[F5 Host]/tmui/login.jsp/..;/tmui/locallb/workspace/tmshCmd. ...
- SpringCloud和SpringBoot对应的版本选型
SpringBoot版本选择: 官网地址:https://spring.io/projects/spring-boot SpringBoot官方目前最新最稳定版:2.3.1,如果单独使用SpringB ...
- 数据可视化之DAX篇(七) Power BI中用DAX生成的表如何添加索引列?
https://zhuanlan.zhihu.com/p/74732578 来源于知识星球中一个星友的问题,使用DAX在PowerBI中新建了一个表,如何为这个表添加索引列呢? 假如数据模型中只有一 ...
- 数据可视化之DAX篇(二十)Think in DAX 之报表自动化实践
https://zhuanlan.zhihu.com/p/107672198 本文来自星友袁佳林的实践分享,他参加了PowerBI星球中的DAX圣经第二版100天学习打卡活动,已持续分享近100天, ...
- ffplay源码编译
ffplay是ffmpeg源码中一个自带的开源播放器组件,支持本地视频文件的播放以及在线流媒体播放,很多商业播放器都是基于ffplay定制而来的.ffplay中的代码充分利用了ffmpeg中的函数库, ...
- Lodash中数组常用方法
数组方法 1.数组对象去重 differenceBy(array, [values], [iteratee=_.identity]) let newArr =_.differenceBy( [{ na ...