面向对象
-
面向对象编程，Object-Oriented-Program（简称 OOP）是一种目前主流的编程思想
-
90年代随着 Java 一起发展壮大，现在依然是主流
-
它将抽象的编程概念，想象成一个对象即对应生活中的实物，更好理解
-
设计模式就是基于 OOP 编程思想的， 不适用于其他编程思想（如函数式编程）
-
类 class，即模板
class People {
name: string
age: number
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// 如果函数不写返回值类型，则默认为 void
eat() {
alert(`${this.name} eat something`);
}
speak() {
alert(`My name is ${this.name}, age ${this.age}`);
}
}
- 对象，即实例
// 创建实例
const zhang = new People("yun", 20);
zhang.eat();
zhang.speak();
// 创建实例
const wang = new People("mu", 21);
wang.eat();
wang.speak();
- Vue React 组件，也是对象
<!-- page1 -->
<template>
<some-component :name="a"></some-component>
</template>
<!-- page2 -->
<template>
<some-component :name="b"></some-component>
</template>
三要素
- 继承-抽离公共代码，实现代码复用
class Student extends People {
school: string
constructor(name: string, age: number, school: string) {
super(name, age);
this.school = school;
}
study() {
alert(`${this.name} study`);
}
}
const yunmu = new Student("yunmu", 10, "A小学");
yunmu.study();
yunmu.eat();
- 封装-高内聚，低耦合
-
- 可见性修饰符
-
-
public外部可访问，默认protected内部或子类可访问private只有内部可访问
-
// People 中可增加 protected weight: number
// Student 中可增加 private girlfriend: string
- 多态-更好的扩展性
interface IStyleInfo {
[key: string]: string;
}
class JQuery {
// 函数重载
css(key: string, value: string);
css(styleInfo: IStyleInfo);
css(keyOrStyleInfo: string | IStyleInfo, value?: string) {
if (typeof keyOrStyleInfo === "string") {
// key-value 形式
const key = keyOrStyleInfo;
console.log("Set CSS", key, value);
} else {
// object 形式
const styleInfo = keyOrStyleInfo;
for (const key in styleInfo) {
const value = styleInfo[key];
console.log("Set CSS", key, value);
}
}
}
}
const jquery = new JQuery();
jquery.css("color", "red");
jquery.css({ color: "red", "font-size": "14px" });
UML
- 统一建模语言（Unified Modeling Language）
- 软件设计的绘图标准
- 使用
-
- 安装 MS Visio
- 在线画图 processon.com
- 作用
-
- 需求指导设计，设计指导开发
- UML 类图就是一个重要的工具和表达方式，可快速熟悉代码结构，核心属性和方法
单个类绘制
- 三个区域：名称，属性，方法
- 权限描述：
+(public)、#(protected)、-(private)
类图的几种关系
- 实现 - 实现接口
- 泛化 - 继承
- 关联 - A 是 B 的一个属性
-
- 聚合 - 整体包含部分，部分可以脱离整体单独存在
- 组合 - 整体包含部分，部分不可脱离整体
- 依赖 - 不是属性，函数参数、返回值
【注意】聚合、组合、依赖，都属于关联关系，更加细化了。日常工作中没必要区分那么细致，都当做关联关系即可
实现接口
注意：TS 的 interface 和 Java 的不一样，TS 有属性，而 Java 的没有属性。而 UML 类图是依据 Java 语法而画的（没有属性区域），所以合并到一个区域了
泛化 - 继承父类
关联
分类
- 单项关联 - 最常见
- 双向关联
- 自关联
聚合
- 整体包含部分，部分可以脱离整体单独存在
组合
- 整体包含部分，部分不可脱离整体
依赖
- 不是属性，函数参数、返回值
总结
再次体会 UML 类图的作用
- 单个类
- 类之间的关系
- 关联关系的细分，不必过于较真
