设计模式：TypeScript中的构造器模式

最新推荐文章于 2024-09-20 10:25:05 发布

清晰编程

最新推荐文章于 2024-09-20 10:25:05 发布

阅读量809

点赞数 20

分类专栏：公众号文章标签：设计模式 typescript

本文链接：https://blog.csdn.net/wannianchuan/article/details/135565658

版权

公众号专栏收录该内容

199 篇文章 2 订阅

订阅专栏

掌握构建器模式，轻松处理对象的创建。

设计模式对于 web 开发人员来说非常重要，掌握它们可以让我们写出更好的代码。在本文中，我将使用 TypeScript 来介绍构建器模式。

构建器模式将复杂对象分解为相对简单的部分，然后根据不同的需求分别创建它们，最后构建复杂对象。

那么如何更好地理解构建器模式的作用呢？接下来，让我们来看一个例子。

class User {  constructor(    public username: string,    public sex: string,    public age: number,    public photo: string,    public email: string) {}}

在上面的代码中，我们使用了 class 语法定义了一个 User 类，有了这个类，我们就可以创建一个 User 类的实例：

const bytefer = new User(  "Bytefer",  "male",  30,  "https://***.com/**",  "bytefer@gmail.com");

对于上面的代码，虽然我们可以成功创建 User 类的实例，但是在创建实例的过程中，我们需要注意 User 类构造函数参数的类型和顺序，同时我们还需要一次传入足够多的参数来构造 User 类的实例。

为了解决上述问题，一种解决方案是使用 builder 设计模式，该模式的关键是将复杂对象分解为相对简单的部分，然后根据不同的需求分别创建它们，最后构建复杂对象。

在了解了以上关键信息之后，让我们定义一个 UserBuilder 类：

class UserBuilder {  public username!: string;  public sex!: string;  public age!: number;  public photo!: string;  public email!: string;  setUserName(name: string) {    this.username = name;    return this;  }  setSex(sex: string) {    this.sex = sex;    return this;  }  setAge(age: number) {    this.age = age;    return this;  }  setPhoto(photo: string) {    this.photo = photo;    return this;  }  setEmail(email: string) {    this.email = email;    return this;  }  build() {    return new User(this.username, this.sex, this.age, this.photo, this.email);  }}

在 UserBuilder 类中，我们定义了几个 setXXX 方法和一个 build 方法。 setXXX 方法用于设置 UserBuilder 实例的属性值，而 build 方法用于执行创建 User 类实例的操作。

有了 UserBuilder 类，我们可以用下面的方法创建 User 类的实例：

const bytefer = new UserBuilder()  .setAge(30)  .setSex("male")  .setEmail("bytefer@gmail.com")  .setPhoto("https://***.com/**")  .setUserName("Bytefer")  .build();

接下来，我们用一个图表来展示创建 User 实例的不同方法：

读完上面的例子，你会发现构建器模式并不复杂，在实际的 TypeScript 项目中，我们可以使用 builder-pattern 库来高效地使用构建器模式。

基本用法

interface UserInfo {  id: number;  userName: string;  email: string;}

const userInfo = Builder<UserInfo>()                   .id(28)                   .userName('bytefer')                   .email('bytefer@gmail.com')                   .build();

模板对象的使用

const defaultUserInfo: UserInfo = {  id: 1,  userName: 'bytefer',  email: 'bytefer@gmail.com'};

const modifiedUserInfo = Builder(defaultUserInfo)                          .id(28)                          .build();

与类对象一起使用

class UserInfo {  id!: number;  userName!: string;  email!: string;}

const userInfo = Builder(UserInfo)                    .id(28)                   .userName('bytefer')                   .email('bytefer@gmail.com')                   .build();

看完上面三个使用例子，你觉得这个 builder-pattern 库的功能是不是很强大，其实这个库内部是基于 ES6 Proxy API 实现的，如果你有兴趣，可以去阅读它的源代码。

在数据查询的场景中，我们经常会看到builder模式，比如构建sql或者elasticsearch查询条件，这里我们以bodybuilder(An elasticsearch query body builder)库为例，来看看它的基本用法：

bodybuilder()  .query('match', 'message', 'this is a test')  .filter('term', 'user', 'kimchy')  .filter('term', 'user', 'herald')  .orFilter('term', 'user', 'johnny')  .notFilter('term', 'user', 'cassie')  .aggregation('terms', 'user')  .build()

最后，让我们总结一下构建器模式的使用场景：