黑马Pink老师的javaScript进阶面向对象ES6教程:
https://www.bilibili.com/video/BV1Kt411w7MP?p=1
本文在原教程的基础上对目录结构进行了排序和裁剪。针对视频中的讲解、案例、PPT和源码材料作了一些总结,仅用于个人复习以及学习交流分享。
目录
1. 面向对象编程
1.1 两大编程思想
- 面向过程
- 面向对象
1.2 面向过程编程 POP(Process oriented programming)
面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。
将大象装进冰箱:
- 打开冰箱门
- 把大象装进去
- 关上冰箱门
面向过程,就是按照我们分析好了的步骤,按照步骤解决问题。
1.3 面向对象编程 OOP(Object Oriented Programming)
面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。
将大象装进冰箱:
-
大象对象
- 进去
-
冰箱对象
- 打开
- 关闭
-
使用大象和冰箱的功能
面向对象是以对象功能来划分问题,而不是步骤。
面向对象的特性:
- 封装性
- 封装性
- 多态性
2. ES6中的类和对象
面向对象更贴近我们的实际生活,可以使用面向对象描述现实世界事物。但是事物分为具体的事物和抽象的事物。
面向对象的思维特点:
- 抽取(抽象)对象共用的属性和行为组织(封装)成一个类(模板)
- 对类进行实例化,获取类的对象
面向对象编程我们考虑的是有哪些对象,按照面向对象的思维特点,不断的创建对象,使用对象,指挥对象做事情。
2.1 对象
现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的实物。例如,一本书、一辆汽车、一个人可以是“对象”,一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。
在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
对象是由属性和方法组成的:
- 属性:事物的特征,在对象中用属性来表示(常用名词)
- 方法:事物的行为,在对象中用方法来表示(常用动词)
2.2 类 class
在 ES6 中新增加了类的概念,可以使用 class 关键字声明一个类,之后以这个类来实例化对象。
类抽象了对象的公共部分,它泛指某一大类(class)
对象特指某一个,通过类实例化一个具体的对象。
2.3 创建类
// 语法
class name {
// class body
}
// 创建实例
var xx = new name();
注:类必须使用new实例化对象
2.4 类中的constructor构造函数
constructor() 方法是类的构造函数(默认方法),用于传递参数,同时返回实例对象。通过 new 命令生成对象实例时,自动调用该方法。如果没有显式定义,类内部会自动给我们创建一个constructor() 。
// 语法
class Person {
constructor(name, age) {
// constructor 构造方法或者构造函数
this.name = name;
this.age = age;
}
}
// 创建实例
var ldh = new Person('刘德华', 18);
var zxy = new Person('张学友', 20);
console.log(ldh);
console.log(zxy);
2.5 类添加方法
// 语法
class Person {
constructor(name,age) {
// constructor 构造器或者构造函数
this.name = name;
this.age = age;
}
say() {
console.log(this.name + '你好');
}
}
// 创建实例
var ldh = new Person('刘德华', 18);
ldh.say();
注:方法之间不能加逗号分隔,同时不需要添加function关键字。
3. 类的继承
3.1继承
继承:子类可以继承父类的一些属性和方法。
//语法
class Father{
// 父类
}
class Son extends Father {
// 子类继承父类
}
实例:
class Father {
constructor(surname) {
this.surname= surname;
}
say() {
console.log('你的姓是' + this.surname);
}
}
class Son extends Father{
// 这样子类就继承了父类的属性和方法
}
var damao= new Son('刘');
damao.say();
3.2 super 关键字
super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数。
案例:调用父类的构造函数
class Person {
// 父类
constructor(surname){
this.surname = surname;
}
}
class Student extends Person {
// 子类继承父类
constructor(surname, firstname) {
super(surname); // 调用父类的constructor(surname)
this.firstname = firstname; // 定义子类独有的属性
}
}
注意: 子类在构造函数中使用super,必须放到 this 前面(必须先调用父类的构造方法,在使用子类构造方法)
案例:
class Father {
constructor(surname) {
this.surname = surname;
}
saySurname() {
console.log('我的姓是' + this.surname);
}
}
class Son extends Father {
// 这样子类就继承了父类的属性和方法
constructor(surname, fristname) {
super(surname); // 调用父类的constructor(surname)
this.fristname = fristname;
}
sayFristname() {
console.log("我的名字是:" + this.fristname);
}
}
var damao = new Son('刘', "德华");
damao.saySurname();
damao.sayFristname();
案例:调用父类的普通函数
class Father {
say() {
return '我是爸爸';
}
}
class Son extends Father {
// 这样子类就继承了父类的属性和方法
say() {
// super.say() super 调用父类的方法
return super.say() + '的儿子';
}
}
var damao = new Son();
console.log(damao.say());
注意:
- ES6中类没有变量提升,所以必须先定义类,才能通过类实例化对象
- 类里面的共有属性和方法一定要加this使用
- 类里面的this指向问题:constructor里面的this指向实例对象,方法里面的this指向这个方法的调用者
4. 面向对象案例
4.1 简介
功能需求:
- 点击 tab栏,可以切换效果。
- 点击 + 号, 可以添加 tab 项和内容项。
- 点击 x 号, 可以删除当前的tab项和内容项。
- 双击tab项文字或者内容项文字,可以修改里面的文字内容。
抽取对象:tab对象
该对象具有以下功能:
- 切换
- 添加
- 删除
- 修改
4.2 添加功能
- 点击 + 可以实现添加新的选项卡和内容
- 第一步: 创建新的选项卡li 和 新的 内容 section
- 第二步: 把创建的两个元素追加到对应的父元素中。
- 以前的做法: 动态创建元素 createElement,但是元素里面内容较多, 需要innerHTML赋值,在 appendChild 追加到父元素里面。
- 现在高级做法: 利用 insertAdjacentHTML() 可以直接把字符串格式元素添加到父元素中
- appendChild 不支持追加字符串的子元素, insertAdjacentHTML 支持追加字符串的元素
- insertAdjacentHTML(追加的位置, ‘要追加的字符串元素’)
- 追加的位置有: beforeend 插入元素内部的最后一个子节点之后
- 该方法地址: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML
4.3 删除功能
- 点击 × 可以删除当前的li选项卡和当前的section
- × 是没有索引号的, 但是它的父亲li 有索引号, 这个索引号正是我们想要的索引号
- 所以核心思路是: 点击 x 号可以删除这个索引号对应的 li 和 section
- 但是,当我们动态删除新的li和索引号时,也需要重新获取 x 这个元素,需要调用init 方法
4.4 编辑功能
- 双击选项卡li或者 section里面的文字,可以实现修改功能
- 双击事件是: ondblclick
- 如果双击文字,会默认选定文字,此时需要双击禁止选中文字
- window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
- 核心思路: 双击文字的时候,在里面生成一个文本框,当失去焦点或者按下回车然后把文本框输入的值给原先元素即可。
4.5 demo的完整代码
链接: https://pan.baidu.com/s/1FQ_6jzkpFOlsEGxuwxkcpQ 提取码: ivht
(JavaScript高级\JavaScript 高级第一天\code\07-面向对象案例)
面向对象的tab栏.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>面向对象的tab栏</title>
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/tab.css">
</head>
<body>
<main>
<h4>面向对象的动态标签页</h4>
<div class="tabsbox" id="tab">
<!-- tab标签 -->
<nav class="firstnav">
<ul>
<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
<li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
<li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
</ul>
<div class="tabadd">
<span>+</span>
</div>
</nav>
<!-- tab内容 -->
<div class="tabscon">
<section class="conactive">测试1</section>
<section>测试2</section>
<section>测试3</section>
</div>
</div>
</main>
<script src="js/tab.js"></script>
</body>
</html>
tab.js
var that;
class Tab {
constructor(id) {
that = this;
// 获取元素
this.main = document.querySelector(id);
this.add = this.main.querySelector('.tabadd');
// li的父元素
this.ul = this.main.querySelector('.firstnav ul:first-child');
// section的父元素
this.div = this.main.querySelector('.tabscon');
this.init();
}
// 初始化操作,让相关的元素绑定事件
init() {
this.updateNode();
this.add.onclick = this.addTab;
for (var i = 0; i < this.lis.length; i++) {
this.lis[i].index = i;
this.lis[i].onclick = this.toggleTab;
this.remove[i].onclick = this.removeTab;
this.spans[i].ondblclick = this.editTab;
this.sections[i].ondblclick = this.editTab;
}
}
// 1. 切换功能
toggleTab() {
that.clearClass();
this.className = 'liactive';
that.sections[this.index].className = 'conactive';
}
// 2. 增加功能
addTab() {
that.clearClass();
// 创建li元素和section元素
var random = Math.random();
var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
var section = '<section class="conactive">' + random + '</section>';
// 把这两个元素追加到对应的父元素里
that.ul.insertAdjacentHTML('beforeend', li);
that.div.insertAdjacentHTML('beforeend', section);
that.init();
}
// 3. 删除功能
removeTab(e) {
// 阻止冒泡(点击删除后会触发li的切换功能)
e.stopPropagation();
var index = this.parentNode.index;
console.log(index);
// 根据索引号删除对应的li和section
that.lis[index].remove(); // remove()方法可以直接删除指定元素
that.sections[index].remove();
that.init();
// 当我们删除的不是选中状态的li时,当前选定状态的li状态保持不变
if (document.querySelector('.liactive')) return;
// 当我们删除了选中状态的这个li的时候,如果删除的不是第一个,让它的前一个li处于选定状态
if (index > 0) {
index--;
}
// 手动调用点击事件,不需要鼠标触发
that.lis[index].click();
}
// 4. 修改功能
editTab() {
// 双击禁止选中文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
// 添加文本框
var str = this.innerHTML;
this.innerHTML = '<input type="text" />';
var input = this.children[0];
input.value = str;
input.select(); // 文本框中的文字处于选定状态
// 当我们离开文本框,就把文本框里面的值给span
input.onblur = function () {
this.parentNode.innerHTML = this.value;
}
// 按下回车也可以把文本框里面的值给span
input.onkeyup = function (e) {
if (e.keyCode === 13) {
// 手动调用表单失去焦点事件
this.blur();
}
}
}
// 清除样式
clearClass() {
for (var i = 0; i < that.lis.length; i++) {
that.lis[i].className = '';
that.sections[i].className = '';
}
}
// 动态添加元素时,需要重新获取对应的元素
updateNode() {
this.lis = this.main.querySelectorAll('li');
this.sections = this.main.querySelectorAll('section');
this.remove = this.main.querySelectorAll('.icon-guanbi');
this.spans = this.main.querySelectorAll('.firstnav li span:first-child');
}
}
new Tab('#tab');