面向对象个人理解: 让代码具有高内聚和低耦合2种特性

预备知识

掌握TS中接口和抽象类使用规则
熟悉并可以灵活使用常见设计模式,比如单例模式和工厂模式
对需求编码时具有较高抽象能力
代码实现参考Java中一个小众框架JFinal

案例(伪代码)

场景

有N种用来解析json类库,比如阿里巴巴的fastJson,谷歌的Gson等
在需求中,默认使用JFinal的库来解析json,也可以通过前置设置方式,来指定其他库来解析json

UML类图

编码实现

// 抽象类Json: 只负责提供函数功能抽象,不负责实现
abstract class Json {
  abstract toJson(obj: object): string
}

// 抽象类Json的一种具体实现类,只负责功能实现,不负责实例化
class JFinalJson extends Json {
  toJson(obj: object): string {
    return 'JFinalJson'
  }
}

// 抽象类Json的另外一种具体实现类,只负责功能实现,不负责实例化
class NewJson extends Json {
  toJson(obj: object): string {
    return 'NewJson'
  }
}

// 接口: 抽象实例化Json类
interface IJsonFactory {
  getJson(): Json
}

// 单例模式: JFinalJson类对应实例化工厂类,提供JFinalJson实例化操作
class JFinalJsonFactory implements IJsonFactory {

  private static me: JFinalJsonFactory = new JFinalJsonFactory()

  static getInstance(): JFinalJsonFactory {
    return JFinalJsonFactory.me
  }

  getJson(): Json {
    return new JFinalJson()
  }
}

// 单例模式: NewJson类对应实例化工厂类,提供NewJson实例化操作
class NewJsonFactory implements IJsonFactory {

  private static me: NewJsonFactory = new NewJsonFactory()

  static getInstance(): NewJsonFactory {
    return NewJsonFactory.me
  }

  getJson(): Json {
    return new NewJson()
  }
}

// 精彩部分: 对应提供API的工具类
class JsonKit {
  // 上来直接先实例化一个JFinalJsonFactory类,就是需求中默认使用JFinal来解析
  private static defaultJsonFactory: IJsonFactory = new JFinalJsonFactory()
  
  // 如果你需要其他库来解析,需要调用该方法
  static setDefaultJsonFactory(defaultJsonFactory: IJsonFactory): void{
    JsonKit.defaultJsonFactory = defaultJsonFactory
  }
  // 具体对外API
  static toJson(obj: object): string {
    return JsonKit.defaultJsonFactory.getJson().toJson(obj)
  }
}

// 单例模式: 不使用默认JFinal来解析,就需要该类
class JsonManager {
  private static me: JsonManager = new JsonManager()

  private constructor() {
    console.log('JsonManager init')
  }

  static getInstance(): JsonManager {
    return JsonManager.me
  }
  // 关键注意setDefaultJsonFactory中的参数是接口,而不是实现
  setDefaultJsonFactory(defaultJsonFactory: IJsonFactory): void{
    JsonKit.setDefaultJsonFactory(defaultJsonFactory)
  }
}

// 具体代码使用
JsonManager.getInstance().setDefaultJsonFactory(new NewJsonFactory())
const result = JsonKit.toJson({name: '无意义凑参数'})
console.log(result) // 调用NewJson中toJson方法.输出 NewJson

const result = JsonKit.toJson({name: '无意义凑参数'})
console.log(result) // 调用默认JFinal中toJson方法,输出JFinalJson

总结:

以上功能使用if...else一把梭也完全可以实现,而且代码还更加简单
但上述代码有如下好处:
- 用抽象类来提前规划好函数抽象,后续可以方便添加各种形式的toJson的实现
- 每个类中较好的维持的单一职责的设计原则,代码更规整
- 在具体API实现时,函数中参数永远是接口或者抽象类形式,这更利于后续扩展,符合依赖倒置原则
- 综上: 以上代码较好体现高内聚,低耦合设计思路
最后: 前端使用TS不光可以增强数据类型的健壮性,还能利用TS写出更具备面向对象的前端代码

用TS带你进入面向对象编程

预备知识

案例(伪代码)

场景

UML类图

编码实现